Skapa en egen app från grunden med någon av en rad olika datakällor och lägg till flera källor senare om du vill. Ange utseendet och beteendet för varje UI-element så att du kan optimera resultatet för dina exakta mål och ditt arbetsflöde. Den här metoden är mycket mer tidskrävande än genererar en app automatiskt, men erfarna app-skapare kan bygga den bästa appen för sina behov.

Obs! Den här artikeln skrevs för PowerApps Studio för Windows, men stegen är liknande om du öppnar PowerApps i en webbläsare.

Genom att följa den här självstudien kommer du att skapa en app som innehåller två skärmar. På en sida kan användarna bläddra igenom en uppsättning poster:

Skärm där en användare kan bläddra igenom en uppsättning data

På den andra skärmen kan användare skapa en post, uppdatera ett eller flera fält i en post eller ta bort en hel post:

Skärm där en användare kan lägga till eller uppdatera data

Förutsättningar

I den här självstudien hittar du mer information, både om du bara vill veta mer om allmänna begrepp eller om du vill följa de här stegen exakt.

  1. Kopiera dessa data och klistrar in dem i en Excel-fil.

    Startdag Starttid Frivillig 1 Frivillig 2
    Lördag 10:00-lunch Vasquez Kumashiro
    Lördag lunch-14:00 Ice Singhal
    Lördag 14:00-16:00 Myk Mueller
    Söndag 10:00-lunch Li Adams
    Söndag 10:00-lunch Singh Morgan
    Söndag 10:00-lunch Batye Nguyen
  2. Formatera informationen som en tabell med namnet Schema, så att PowerApps kan parsa informationen.

    Mer information finns i Skapa en Excel-tabell i ett kalkylblad.

  3. Spara filen under namnet eventsignup.xls, och överför den till ett molnlagringskonto, till exempel OneDrive.

  4. Om du inte är bekant med PowerApps:

Skapa en tom app och anslut till data

  1. I PowerApps Studio klickar eller trycker du på Nytt i menyn Arkiv (nära skärmens vänsterkant).

    Nytt alternativ på menyn Arkiv

  2. På panelen Tom app klickar du på eller trycker på Layout för mobil.

    Alternativ för att skapa en app från data

  3. Använd introduktionsguiden för att lära dig om de viktigaste delarna av PowerApps (eller tryck på Hoppa över).

    Kort guide

    Du kan alltid ta rundturen senare genom att trycka på frågetecknet i det övre vänstra hörnet och sedan trycka på Take the intro tour (Ta rundturen).

  4. I det vänstra navigeringsfältet kan du klicka eller trycka på en ikon i det övre högra hörnet för att växla till miniatyrvisning.

    Växla vyer

  5. Klicka eller tryck på Lägg till datakälla i rutan till höger.

    Lägg till datakälla

  6. Gör något av följande:

    • Om du redan har en anslutning till ditt molnlagringskonto, tryck på det.
    • Om du inte har en anslutning till ditt molnlagringskonto, tryck på Lägg till anslutning, sedan på din kontotyp, sedan på Anslut, och sedan anger du dina autentiseringsuppgifter (om du uppmanas att göra det).
  7. Under Välj en Excel-fil bläddrar du till eventsignup.xlsx och trycker sedan på den.

    Ange Excel-filen som du vill använda

  8. Under Välj en tabell trycker du på kryssrutan Schema och sedan trycker du på Anslut.

    Ange tabellen i Excel-filen som du vill använda

    Fliken datakällor i fönstret till höger visar vilka datakällor som du har lagt till i din app.

    Visa anslutna datakällor

    Den här självstudien kräver bara en datakälla, men du kan lägga till fler datakällor senare.

Visa data

  1. Klicka eller tryck på Ny skärm på fliken Start och klicka eller tryck sedan på Listskärm.

    Lägga till en layout med en rubrik, en underrubrik och ett brödtextelement

    En skärm läggs till med flera standardkontroller, till exempel en sökruta och kontrollen Galleri. Galleriet täcker hela skärmen under sökrutan.

  2. Klicka eller tryck var som helst i galleriet utom på en pil, till exempel direkt under sökrutan.

    Välj galleri

  3. Öppna listan Layouter i rutan till höger och klicka eller tryck sedan på det alternativ som endast visar en rubrik, en underrubrik och text.

    Välj galleri

  4. Tryck på Items i egenskapslistan, kopiera den här formeln och klistra in den i formelfältet:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Om du inte är säker på var egenskapslistan är kan du se Lägg till och konfigurera kontroller.

    Obs! För Excel- eller SharePoint-datakällor som innehåller kolumnnamn med blanksteg visar PowerApps blankstegen som ”_x0020_”. I det här exemplet visas kolumnen "Frivillig 1" i en formel som "Frivillig_x0020_1".

    Det här galleriet visar data från den tabellen Schema.

    Data för Schema lagras i galleriet som standard

    En sökruta kan filtrera galleriet baserat på den text som användaren matar in. Om en användare matar in minst en bokstav i sökrutan visar galleriet endast de poster vars Frivillig 1-fält innehåller den text som användaren har matat in.

    Knappen Sortera sorterar poster baserat på datan i kolumnen Frivilligt 1. Sorteringsordningen växlar mellan stigande och fallande när en användare trycker på knappen.

    Den formeln innehåller funktionerna Sort, If, IsBlank, Filter och Text. Mer information om de här och andra funktioner finns i formelreferensen

  5. Skriv ett i i sökrutan och klicka eller tryck på knappen Sortera en gång (eller ett udda antal gånger).

    Galleriet visar dessa resultat.

    Sortera och filtrera galleriet

    Mer information om Sortera, Filter, och andra funktioner

  6. Välj kontrollen Etikett längst upp på skärmen genom att klicka eller trycka på den.

    Välj namnlist

  7. Tryck på Text i egenskapslistan, kopiera texten och klistra sedan in den i formelfältet.
    "View Records"

    Ändra namnlist

Skapa ChangeScreen och dess popup-meddelande

  1. Ta bort Screen1 och Byt namn på Screen2 till ViewScreen.

    Byt namn på skärmen

  2. Lägga till en skärm och byt namn på den till ChangeScreen.

    Lägg till och byt namn på skärmen

  3. Tryck på Text på fliken Infoga och klicka eller tryck sedan på Etikett.

  4. Konfigurera kontrollen Etikett som du lagt till:

    • Ange dess egenskap Text till den här formeln:
      "Change record"
    • Ange dess egenskap Fill till den här formeln:
      RGBA(62, 96, 170, 1).
    • Ange dess egenskap Color till den här formeln:
      RGBA(255, 255, 255, 1)
    • Ange dess egenskap Align till Center.
    • Ange dess egenskap X till 0.
    • Ange dess egenskap Width till 640.

    Kontrollen Etikett visar dina ändringar.

    ChangeScreen med banderoll

Lägga till och konfigurera ett formulär

  1. Tryck på Formulär under fliken Infoga och tryck sedan på Redigera.

  2. Flytta och ändra storlek på formuläret för att omfatta större delen av skärmen.

    Lägga till ett formulär

    Formuläret heter Form1 som standard om du inte redan har lagt till och tagit bort ett formulär. Byt i så fall namn på formuläret till Form1.

  3. Ange egenskapen DataSource för Form1 till Schedule.

  4. Ange egenskapen Item för Form1 till det här uttrycket:
    BrowseGallery1.Selected

  5. Klicka eller tryck på kryssrutan i det högra fönstret för varje fält för att visa det.

    Visa fält i formulär

  6. Nästan längst ned i formuläret, klicka eller tryck på Lägg till ett anpassat kort.

    Lägg till ett anpassad-kort

  7. Lägg till kontrollen Etikett i det nya kortet.

  8. Ange egenskapen AutoHeight för den nya kontrollen till sant och dess egenskap Text som den här formeln:
    Form1.Error

    Etiketten visar eventuella fel i formuläret.

  9. I det vänstra navigeringsfältet klickar du på eller trycker på miniatyren för ChangeScreen för att välja den.

  10. På fliken Infoga klickar du på eller trycker på Ikoner, klicka eller tryck på alternativet för att lägga till en Bakåtpil, och flytta sedan pilen till nedre vänstra hörnet på skärmen.

  11. Ange pilens egenskap OnSelect till den här formeln:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    När användaren trycker på pilen öppnar funktionen Navigate ViewScreen.

  12. Lägg till en kontroll för Knapp i formuläret och ange knappens Text-egenskap som "Spara".

    Lägg till en knapp för att spara

  13. Ange egenskapen OnSelect för knappen enligt den här formeln:

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    När användaren trycker på knappen sparar SubmitForm-funktionen ändringar i datakällan och ViewScreen visas igen.

  14. Lägg till en till knapp längst ned på skärmen genom att ange dess Text-egenskap som "Ta bort", och ange dess OnSelect-egenskap som den här formeln:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    När användaren klickar eller trycker på den här knappen tar funktionen Ta bort bort posten och ViewScreen visas igen.

  15. Ange egenskapen Synlig för knappen Ta bort enligt den här formeln:
    Form1.Mode=FormMode.Edit

    Det här steget döljer knappen Ta bort när användaren skapar en post.

    ChangeScreen matchar det här exemplet:

    Slutlig ChangeScreen

Ange navigering från ViewScreen

  1. I det vänstra navigeringsfältet trycker du på miniatyrbilden för ViewScreen.

    Öppna ViewScreen

  2. Klicka eller tryck på Nästapilen för den första posten i galleriet.

    Nästapil

  3. Ange egenskapen OnSelect för pilen enligt den här formeln:

    Navigate(ChangeScreen,ScreenTransition.None)

  4. I det övre högra hörnet, klicka eller tryck på plus-ikonen.

    Lägg till post

  5. Ange egenskapen OnSelect för den markerade ikonen enligt den här formeln:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    När användaren trycker på den här ikonen visas ChangeScreen med alla fält tomma, så att användaren kan skapa en post enklare.

Kör appen

Som beskrivs i stegen i det här avsnittet kan du när du anpassar appen testa ändringarna genom att köra appen i förhandsgranskningsläge.

  1. I det vänstra navigeringsfältet trycker du på den översta miniatyrbilden för att välja ViewScreen.

    Välj ViewScreen

  2. Öppna förhandsgranskningsläge genom att trycka på F5 (eller på ikonen Förhandsgranska längst upp i högra hörnet).

    Öppna förhandsgranskningsläget

  3. Trycker du på Nästapilen för en post för att visa information om posten.

  4. Ändra informationen i ett eller flera fält på ChangeScreen och spara sedan ändringarna genom att trycka på Spara, eller ta bort posten genom att trycka på Ta bort.

  5. Stäng förhandsgranskningsläget genom att trycka på Esc (eller genom att trycka på stängningsikonen under namnlisten).

    Stäng förhandsgranskningsläget

Nästa steg

  • Tryck på Ctrl-S för att spara din app i molnet så att du kan köra den från andra enheter.
  • Dela appen så att andra kan köra den.
  • Lär dig mer om gallerier, formulär, och formler.