Opret en lærredapp, der er baseret på Excel-data, helt fra bunden

Opret din egen lærredapp fra bunden baseret på Excel-data, der er formateret som en tabel, og tilføj derefter eventuelt data fra andre kilder. Når du følger dette selvstudium, opretter du en app, der indeholder to skærmbilleder. På det ene skærmbillede kan brugerne gennemse et sæt poster. På det andet skærmbillede kan brugere oprette en post, opdatere et eller flere felter i en post eller slette en hel post. Denne fremgangsmåde er mere tidskrævende end at oprette en brundlæggende app fra Excel, men hvis du har erfaring med at udvikle apps, kan du bruge den til at bygge den app, der passer bedst til dine behov.

Forudsætninger

Hvis du vil følge trinnene i dette selvstudium nøje, skal du først oprette en Excel-fil med disse eksempeldata.

  1. Kopiér dataene, og indsæt dem i en Excel-fil.

    StartDay StartTime Frivillig Sikkerhedskopiering
    Lørdag 10:00-12:00 Winther Karlsen
    Lørdag 12:00-14:00 Iversen Schmidt
    Lørdag 14:00-16:00 Mog Møller
    Søndag 10:00-12:00 Li Andreasen
    Søndag 12:00-14:00 Schmi Jensen
    Søndag 14:00-16:00 Berg Nygaard
  2. Formatér dataene som en tabel, og kald den Schedule, så Power Apps kan fortolke oplysningerne.

    Du kan finde flere oplysninger under Formatér en tabel i Excel.

  3. Gem filen med navnet eventsignup.xlsx, luk den, og upload den derefter til en cloudlagerkonto, f.eks. OneDrive.

Vigtigt

Du kan bruge din egen Excel-fil og gennemgå dette selvstudium, som kun omhandler generelle koncepter. Dataene i Excel-filen skal dog være formateret som en tabel. Du kan finde flere oplysninger under Formatér en tabel i Excel.

Åbn en tom app

  1. Log på Power Apps.

  2. Vælg Lærredapp fra bunden under Skab din egen app.

    Opret tom lærredapp

  3. Angiv et navn til din app, vælg Telefon, og vælg derefter Opret.

    Du kan designe en app fra bunden til telefoner eller til andre enheder (f.eks. tablets). I dette emne beskrives, hvordan du designer en app til telefoner.

    Angiv navn og format på appen

    Power Apps Studio opretter en tom app til telefoner.

  4. Hvis dialogboksen Velkommen til Power Apps Studio åbnes, skal du vælge Spring over.

Opret forbindelse til data

  1. Midt på skærmen skal du vælge Opret forbindelse til data.

  2. Vælg forbindelsen til din cloudlagerkonto, hvis den vises, i ruden Data. Ellers skal du udføre disse trin for at tilføje en forbindelse:

    1. Vælg Ny forbindelse, vælg feltet for din cloudlagerkonto, og vælg derefter Opret.
    2. Angiv dine legitimationsoplysninger for kontoen, hvis du bliver bedt om det.
  3. Under Vælg en Excel-fil skal du skrive eller indsætte de første bogstaver i eventsignup for at filtrere listen og derefter vælge den fil, du har uploadet.

  4. Markér afkrydsningsfeltet for Tidsplan under Vælg en tabel, og vælg derefter Opret forbindelse.

  5. Luk ruden Data ved at vælge lukkeikonet (X) i øverste højre hjørne.

Opret visningsskærmbilledet

  1. Vælg pil ned ud for Nyt skærmbillede under fanen Hjem for at åbne en liste over skærmtyper, og vælg derefter Liste.

    Der tilføjes et skærmbillede med en række standardkontrolelementer, f.eks. et søgefelt og et Gallery-kontrolelement. Galleriet dækker hele skærmbilledet under søgefeltet.

  2. Øverst på det nye skærmbillede skal du vælge Label-elementet og derefter erstatte [Title] med Vis poster.

    Ret titellinjen

  3. Vælg BrowseGallery1 på navigationslinjen til venstre.

    En markeringsboks med håndtag omgiver galleriet.

    Tilføj et listeskærmbillede

  4. Vælg pil ned for menuen Layout under fanen Egenskaber i ruden til højre.

    Åbn menuen Layout

  5. Vælg Titel, undertitel og brødtekst.

  6. Erstatt CustomGallerySample med Tidsplan på formellinjen, og udskift begge forekomster af SampleText med Frivillig.

  7. Vælg pil ned i højre side af formellinjen, og vælg derefter Formatér tekst.

    Formlen matcher dette eksempel:

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. Vælg Rediger på fanen Egenskaber i ruden til højre ud for etiketten Felter.

  9. Vælg frivillig i feltet Title2, vælg StartDayi feltet Subtitle2, og vælg StartTime i feltet Body1.

  10. Luk ruden Data ved at vælge lukkeikonet (X) i øverste højre hjørne.

Brugerne kan sortere og filtrere galleriet efter frivilliges navn baseret på funktionerne SortByColumns og Search i denne formel.

  • Hvis en bruger skriver mindst ét bogstav i søgefeltet, viser galleriet kun poster, hvor feltet Frivillig indeholder den tekst, som brugeren har indtastet.
  • Hvis en bruger vælger knappen til sortering (mellem opdateringsknappen og plusknappen på titellinjen), viser galleriet posterne i stigende eller faldende rækkefølge (afhængigt af hvor mange gange brugeren vælger knappen) baseret på feltet Frivillig.

Du kan finde flere oplysninger om disse og andre funktioner i formelreferencen.

Opret ændringsskærmbilledet

  1. Vælg pil ned ud for Nyt skærmbillede under fanen Hjem, og vælg derefter Formular.

  2. Vælg EditForm1 på navigationslinjen til venstre.

  3. Vælg pil ned ud for Datakilde i ruden til højre på fanen Egenskaber, og vælg derefter Tidsplan på den viste liste.

  4. Vælg Rediger felter under den datakilde, du lige har angivet.

  5. I ruden Felter skal du vælge Tilføj felt, markere afkrydsningsfeltet for hvert felt og derefter vælge Tilføj.

  6. Vælg pilen ud for navnet på hvert felt for at skjule det, og træk derefter feltet Frivillig op, så det vises øverst på listen over felter.

    Omarranger felter

  7. Luk ruden Felter ved at vælge lukkeikonet (X) i øverste højre hjørne.

  8. Angiv egenskaben Element for formularen til dette udtryk ved at skrive eller indsætte det på formellinjen:

    BrowseGallery1.Selected

  9. Øverst på skærmen skal du vælge elementet Etiket og derefter erstatte [Title] med Ændringsposter.

    Ret titellinjen

Slet og omdøb skærmbilleder

  1. Vælg ellipsen (...) for Screen1 på venstre navigationslinje, og vælg derefter Slet.

    Slet skærmbilledet

  2. Vælg ellipsen (...) for Screen2, vælg Omdøb, og skriv eller indsæt derefter ViewScreen.

  3. Vælg ellipsen (...) for Screen3, vælg Omdøb, og skriv eller indsæt derefter ChangeScreen.

Konfigurer ikoner på visningsskærmbilledet

  1. Vælg ikonet med den cirkulære pil øverst i ViewScreen.

    Tilføj post

  2. Angiv egenskaben OnSelect for ikonet til denne formel:

    Refresh(Schedule)

    Når brugeren vælger dette ikon, opdateres dataene fra Tidsplan fra Excel-filen.

    Du kan finde flere oplysninger om denne og andre funktioner i formelreferencen.

  3. Vælg ikonet med plustegnet i øverste højre hjørne af ViewScreen.

    Tilføj post

  4. Angiv egenskaben OnSelect for ikonet til denne formel:

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

    Når brugeren vælger dette ikon, vises ChangeScreen, hvor alle felter er tomme, så brugeren lettere kan oprette en post.

  5. Vælg højre pil for den første post i galleriet.

    Vælg pil

  6. Angiv egenskaben OnSelect for pilen til denne formel:

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

    Når brugeren vælger dette ikon, vises ChangeScreen, hvor de enkelte felter viser data for den valgte post, så brugeren nemmere kan redigere eller slette posten.

Konfigurer ikoner på ændringsskærmen

  1. Vælg "X"-ikonet i øverste venstre hjørne på ChangeScreen.

    Ikonet Annuller

  2. Angiv egenskaben OnSelect for ikonet til denne formel:

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

    Når brugeren vælger dette ikon, annulleres eventuelle ændringer, som brugeren har foretaget på denne skærm, og visningsskærmen åbnes.

  3. Vælg ikonet med fluebenet i øverste højre hjørne.

    Fluebensikon

  4. Angiv egenskaben OnSelect for fluebenet til denne formel:

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

    Når brugeren vælger dette ikon, gemmes eventuelle ændringer, som brugeren har foretaget på dette skærmbillede, og visningsskærmbilledet åbnes.

  5. Vælg Ikoner under fanen Indsæt, og vælg derefter ikonet Papirkurv.

  6. Angiv egenskaben Farve for det nye ikon til Hvid, og flyt det nye ikon, så det vises ved siden af ikonet med fluebenet.

    Ikonet Papirkurv

  7. Angiv egenskaben Visible for ikonet Papirkurv til denne formel:

    EditForm1.Mode = FormMode.Edit

    Dette ikon vises kun, når formularen er i tilstanden Rediger, og ikke i tilstanden Ny.

  8. Angiv egenskaben OnSelect for ikonet Papirkurv til denne formel:

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

    Når brugeren vælger dette ikon, slettes den valgte post fra datakilden, og visningsskærmbilledet åbnes.

Test appen

  1. Vælg ViewScreen, og åbn derefter eksempelvisningen ved at trykke på F5 (eller ved at vælge ikonet Eksempel i øverste højre hjørne).

    Åbn tilstanden Eksempel

  2. Skriv eller indsæt et eller flere bogstaver i søgefeltet for at filtrere listen baseret på navnet på den frivillige.

  3. Vælg sorteringsikonet én eller flere gange for at få vist dataene i stigende eller faldende rækkefølge baseret på navnet på den frivillige.

  4. Tilføj en post.

  5. Opdater den post, du har tilføjet, og gem derefter ændringerne.

  6. Opdater den post, du har tilføjet, og annuller derefter ændringerne.

  7. Slet den post, du har tilføjet.

  8. Luk eksempelvisningen ved at trykke på Esc (eller ved at vælge lukkeikonet i øverste højre hjørne).

Næste trin

  • Tryk på Ctrl + S for at gemme appen i cloudmiljøet, så du kan køre den fra andre enheder.
  • Del appen, så andre brugere kan køre den.
  • Få mere at vide om funktioner, f.eks. Programrettelse, som du kan bruge til at administrere data uden at oprette en standardformular.
  • Link denne app til en løsning, så du f.eks. kan installere den i et andet miljø eller udgive den på AppSource.