Skapa en app för arbetsytor från grunden utifrån Excel-dataCreate a canvas app from scratch based on Excel data

Skapa din egen app för arbetsytor från grunden utifrån Excel-data formaterade som en tabell och lägg sedan till data, om du vill, från andra källor.Create your own canvas app from scratch based on Excel data, formatted as a table, and then add data from other sources if you want. Genom att följa den här självstudien kommer du att skapa en app som innehåller två skärmar.By following this tutorial, you'll create an app that contains two screens. På en skärm kan användarna bläddra igenom en uppsättning poster.On one screen, users can browse through a set of records. På den andra skärmen kan användarna skapa en post, uppdatera ett eller flera fält i en post eller ta bort en hel post.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record. Den här metoden tar längre tid än att generera en app automatiskt, men appskapare med mer erfarenhet kan använda den för att skapa bästa möjliga appar utifrån sina behov.This approach takes more time than generating an app automatically does, but app makers who have more experience can use it to build the best app for their needs.

FörutsättningarPrerequisites

Om du vill följa stegen i den här självstudien exakt måste du först skapa en Excel-fil med hjälp av dessa exempeldata.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. Kopiera dessa data och klistrar in dem i en Excel-fil.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime FrivilligVolunteer BackupBackup
    LördagSaturday 10:00-lunch10am-noon VasquezVasquez KumashiroKumashiro
    LördagSaturday lunch-14:00noon-2pm IceIce SinghalSinghal
    LördagSaturday 14:00–16:002pm-4pm MykMyk MuellerMueller
    SöndagSunday 10:00-lunch10am-noon LiLi AdamsAdams
    SöndagSunday lunch-14:00noon-2pm SinghSingh MorganMorgan
    SöndagSunday 14:00–16:002pm-4pm BatyeBatye NguyenNguyen
  2. Formatera informationen som en tabell med namnet Schema, så att PowerApps kan parsa informationen.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Mer information finns i Formatera en tabell i Excel.For more information, see Format a table in Excel.

  3. Spara filen under namnet eventsignup.xls, stäng den och överför den sedan till ett molnlagringskonto, t.ex. OneDrive.Save the file under the name eventsignup.xls, close it, and then upload it to a cloud-storage account, such as OneDrive.

Viktigt

Du kan använda din egen Excel-fil och bara titta på de här självstudierna för att lära dig det generella konceptet.You can use your own Excel file and review this tutorial for general concepts only. Men data i Excel-filen måste vara formaterade som en tabell.However, the data in the Excel file must be formatted as a table. Mer information finns i Formatera en tabell i Excel.For more information, see Format a table in Excel.

Öppna en tom appOpen a blank app

  1. Logga in på PowerApps.Sign in to PowerApps.

  2. Välj App för arbetsyta från tom under Skapa din egen app.Under Make your own app, select Canvas app from blank.

    Skapa en tom app för arbetsytaCreate blank canvas app

  3. Ange ett namn för din app i panelen, välj Telefon och sedan Skapa.Specify a name for your app, select Phone, and then select Create.

    Du kan utforma en app från grunden för telefoner eller andra enheter (t.ex. surfplattor).You can design an app from scratch for phones or for other devices (such as tablets). I det här avsnittet fokuserar vi på hur du skapar en app för telefoner.This topic focuses on designing an app for phones.

    Ange ett namn och format för appenSpecify name and format of app

    Med PowerApps Studio skapar du en tom app för telefoner.PowerApps Studio creates a blank app for phones.

  4. Om dialogrutan Välkommen till PowerApps Studio visas väljer du Hoppa över.If the Welcome to PowerApps Studio dialog box opens, select Skip.

Anslut till dataConnect to data

  1. Välj Anslut till data mitt på skärmen.In the middle of the screen, select connect to data.

  2. Välj anslutningen för ditt molnlagringskonto, om den visas, i fönstret Data.In the Data pane, select the connection for your cloud-storage account if it appears. Annars lägger du till en anslutning enligt stegen nedan:Otherwise, follow these steps to add a connection:

    1. Välj Ny anslutning, välj sedan panelen för ditt molnlagringskonto och därefter Skapa.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. Ange dina autentiseringsuppgifter till kontot om du uppmanas till detta.If prompted, provide your credentials for that account.
  3. Filtrera listan genom att skriva eller klistra in de första bokstäverna i eventsignup under Välj en Excel-fil och välj sedan den fil som du har överfört.Under Choose an Excel file, type or paste the first letters of eventsignup to filter the list, and then select the file that you uploaded.

  4. Markera kryssrutan för Schema under Välj en tabell och välj sedan Anslut.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. Stäng genom att välja ikonen Stäng (X) längst upp till höger i fönstret Data.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Skapa vyskärmenCreate the view screen

  1. Öppna en lista över skärmtyper genom att välja nedpilen bredvid Ny skärm på fliken Start och välj sedan Lista.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    En skärm läggs till med flera standardkontroller, till exempel en sökruta och kontrollen Galleri.A screen is added with several default controls, such as a search box and a Gallery control. Galleriet täcker hela skärmen under sökrutan.The gallery covers the entire screen under the search box.

  2. Välj kontrollen Etikett högst upp på den nya skärmen och ersätt sedan [Rubrik] med Visa poster.At the top of the new screen, select the Label control, and then replace [Title] with View records.

    Ändra namnlist

  3. Välj BrowseGallery1 i det vänstra navigeringsfältet.In the left navigation bar, select BrowseGallery1.

    En markeringsruta med handtag visas runt galleriet.A selection box with handles surrounds the gallery.

    Lägga till en listskärm

  4. Välj nedpilen för menyn Layout på fliken Egenskaper i den högra rutan.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    Öppna menyn Layout

  5. Välj rubrik, underrubrik och brödtext.Select Title, subtitle, and body.

  6. Ersätt CustomGallerySample med Schema och ersätt båda förekomsterna av SampleText med Frivillig i formelfältet.In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. Välj nedpilen och sedan Formattext i den högra kanten av formelfältet.On the right edge of the formula bar, select the down arrow, and then select Format text.

    Formeln matchar det här exemplet:The formula matches this example:

    SortByColumns(
        Search(
            Schedule;
            TextSearchBox1.Text;
            "Volunteer"
        );
        "Volunteer";
        If(
            SortDescending1;
            SortOrder.Descending;
            SortOrder.Ascending
        )
    )
    
  8. Välj Redigera bredvid etiketten Fält på fliken Egenskaper i den högra rutan.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. Välj Frivillig i rutan Rubrik2.In the Title2 box, select Volunteer.

  10. Stäng genom att välja ikonen Stäng (X) längst upp till höger i fönstret Data.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Användarna kan sortera och filtrera galleriet efter de frivilligas namn med hjälp av funktionerna SortByColumns och Search i formeln.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • Om en användare matar in minst en bokstav i sökrutan visar galleriet endast de poster vars fält Frivillig innehåller den text som användaren har matat in.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer field contains the text that the user typed.
  • Om en användare klickar på sorteringsknappen (mellan uppdateringsknappen och plusknappen i namnlisten) visar galleriet posterna i stigande eller fallande ordning (beroende på hur många gånger användaren har klickat på knappen) baserat på fältet Frivillig.If a user selects the sort button (between the refresh button and the plus button in the title bar), the gallery shows the records in ascending or descending order (depending on how many times the user selects the button) based on the Volunteer field.

Mer information om dessa och andra funktioner finns i formelreferensen.For more information about these and other functions, see the formula reference.

Skapa ändringsskärmenCreate the change screen

  1. Välj nedpilen bredvid Ny skärm på fliken Start och välj sedan Formulär.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. I vänster navigeringsfält väljer du EditForm1.In the left navigation bar, select EditForm1.

  3. Välj nedpilen bredvid Datakälla och sedan Schema i listan som visas på fliken Egenskaper i den högra rutan.On the Properties tab of the right-hand pane, select the down arrow next to Data source, and then select Schedule in the list that appears.

  4. Välj Redigera fält under den datakälla som du precis angav.Under the data source that you just specified, select Edit fields.

  5. Välj Lägg till fält, markera kryssrutan för varje fält och välj sedan Lägg till i fönstret Fält.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. Välj pilen bredvid namnet på varje fält för att minimera det och dra sedan upp fältet Frivillig så att det visas överst i listan över fält.Select the arrow next to the name of each field to collapse it, and then drag the Volunteer field up so that it appears at the top of the list of fields.

    Sortera om fält

  7. Stäng genom att välja ikonen Stäng (X) längst upp till höger i fönstret Fält.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. Konfigurera egenskapen Objekt på det här formuläret till det här uttrycket genom att skriva eller klistra in texten i formelfältet:Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. Välj kontrollen Etikett högst upp på skärmen och ersätt sedan [Rubrik] med Ändra poster.At the top of the screen, select the Label control, and then replace [Title] with Change records.

    Ändra namnlist

Ta bort och byt namn på skärmarDelete and rename screens

  1. Välj ellipsen (...) för Screen1 i det vänstra navigeringsfältet och välj sedan Ta bort.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    Ta bort skärmen

  2. Välj ellipsen (...) för Screen2, välj Byt namn och skriv eller klistra sedan in ViewScreen.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Välj ellipsen (...) för Screen3, välj Byt namn och skriv eller klistra sedan in ChangeScreen.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

Konfigurera ikoner på visningsskärmenConfigure icons on the view screen

  1. Välj den cirkulära pilikonen högst upp på ViewScreen.Near the top of the ViewScreen, select the circular-arrow icon.

    Lägg till post

  2. Ställ in egenskapen OnSelect för knappen till den här formeln:Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    När användaren väljer den här ikonen uppdateras data från Schema från Excel-filen.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

    Mer information om den här och andra funktioner finns i formelreferensen.For more information about this and other functions, see the formula reference.

  3. Välj plusikonen i det övre högra hörnet av ViewScreen.In the upper-right corner of the ViewScreen, select the plus icon.

    Lägg till post

  4. Ställ in egenskapen OnSelect för knappen till den här formeln:Set the OnSelect property for that icon to this formula:

    NewForm(EditForm1);;Navigate(ChangeScreen;ScreenTransition.None)

    När användaren väljer den här ikonen visas ChangeScreen med alla fält tomma, så att användaren kan skapa en post enklare.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. Välj högerpilen för den första posten i galleriet.Select the right-pointing arrow for the first record in the gallery.

    Välj pilen

  6. Ställ in egenskapen OnSelect för pilen till den här formeln:Set the OnSelect property for the arrow to this formula:

    EditForm(EditForm1);; Navigate(ChangeScreen; ScreenTransition.None)

    När användaren väljer den här ikonen visas ChangeScreen med varje fält som visar data för den valda posten, så att användaren enklare kan redigera eller ta bort posten.When the user selects this icon, ChangeScreen appears with each field showing the data for the selected record, so that the user can edit or delete the record more easily.

Konfigurera ikoner på ändringsskärmenConfigure icons on the change screen

  1. Välj ikonen ”X” i det övre vänstra hörnet på ChangeScreen.On ChangeScreen, select the "X" icon in the upper-left corner.

    Ikonen avbryt

  2. Ställ in egenskapen OnSelect för knappen till den här formeln:Set the OnSelect property for that icon to this formula:

    ResetForm(EditForm1);;Navigate(ViewScreen; ScreenTransition.None)

    När användaren väljer den här ikonen så ignoreras alla de ändringar som användaren har gjort på den här skärmen ignoreras och visningskärmen öppnas.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. Välj kryssmarkeringsikonen i det övre högra hörnet.In the upper-right corner, select the checkmark icon.

    Kryssmarkeringsikonen

  4. Ställ in egenskapen OnSelect för kryssmarkeringen till den här formeln:Set the OnSelect property for the checkmark to this formula:

    SubmitForm(EditForm1);; Navigate(ViewScreen; ScreenTransition.None)

    När användaren väljer den här ikonen så sparas de eventuella ändringar som användaren har gjort på den här skärmen ignoreras och visningsskärmen öppnas.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. Välj Ikoner på fliken Infoga och välj sedan ikonen Papperskorg.On the Insert tab, select Icons, and then select the Trash icon.

  6. Ställ in den nya ikonens egenskap Färg till Vit och flytta den nya ikonen så att den visas bredvid kryssmarkeringsikonen.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    Ikonen Papperskorg

  7. Ställ in papperskorgens egenskap Synlig till den här formeln:Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    Den här ikonen visas endast när formuläret är i läget Redigera, inte i läget Ny.This icon will appear only when the form is in Edit mode, not in New mode.

  8. Ställ in papperskorgens egenskap OnSelect till den här formeln:Set the OnSelect property for the trash icon to this formula:

    Remove(Schedule; BrowseGallery1.Selected);; Navigate(ViewScreen; ScreenTransition.None)

    När användaren väljer den här ikonen tas den valda posten bort från datakällan och visningsskärmen öppnas.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

Testa appenTest the app

  1. Välj ViewScreen och öppna sedan förhandsversionen genom att trycka på F5 (eller genom att välja ikonen Förhandsversion nära det övre högra hörnet).Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Öppna förhandsgranskningsläget

  2. Skriv eller klistra in en eller flera bokstäver i sökrutan för att filtrera listan baserat på den frivilligas namn.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. Tryck på sorteringsikonen en eller flera gånger för att visa data i stigande eller fallande ordning baserat på den frivilligas namn.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. Lägg till en post.Add a record.

  5. Uppdatera den post som du har lagt till och spara sedan ändringarna.Update the record that you added, and then save the changes.

  6. Uppdatera den post som du har lagt till och avbryt sedan ändringarna.Update the record that you added, and then cancel the changes.

  7. Ta bort posten som du har lagt till.Delete the record that you added.

  8. Öppna förhandsversionsläget genom att trycka på Esc (eller genom att välja stängnings i det övre högra hörnet).Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

Nästa stegNext steps

  • Tryck på Ctrl-S för att spara din app i molnet så att du kan köra den från andra enheter.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Dela appen så att andra kan köra den.Share the app so that other people can run it.
  • Lär dig mer om funktioner som Korrigering, som du kan använda för att hantera data utan att behöva skapa något standardformulär.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • Länka den här appen till en lösning så att du till exempel kan distribuera den till en annan miljö eller publicera den på AppSource.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.