Forstå formularer til lærredapps

Tilføj tre typer kontrolelementer i en lærredapp, så brugeren kan søge efter en post, få vist oplysninger om posten og redigere eller oprette en post:

Placer hvert kontrolelement i et andet skærmbillede for at gøre det lettere at skelne mellem dem:

I dette emne beskrives, hvordan du kan kombinere disse kontrolelementer med formler for at oprette den overordnede brugeroplevelse.

Forudsætninger

• Tilmeld dig for Power Apps, og log på ved hjælp af de samme brugeroplysninger, som du brugte ved tilmeldingen.
• Få mere at vide om, hvordan du konfigurerer et kontrolelement i Power Apps.

Udforske en oprettet app

Power Apps kan automatisk oprette en app, der er baseret på en datakilde, som du angiver. Hver app indeholder tre skærmbilleder med de kontrolelementer, der er beskrevet tidligere, og formler, der sammenkæder dem. Kør disse apps med det samme, tilpas dem til dine specifikke mål, eller undersøg, hvordan de fungerer, så du kan lære nyttige begreber at kende, som gælder for dine egne apps. Undersøg de skærmbilleder, kontrolelementer og formler, der fører til, at en app oprettes, i de følgende afsnit.

Skærmen Gennemse

Dette skærmbillede indeholder disse vigtige formler:

Det primære kontrolelement på dette skærmbillede, BrowseGallery1, dækker det meste af skærmbilledets område. Brugeren kan rulle gennem galleriet for at finde en bestemt post for at få vist flere felter eller for at opdatere.

Angiv egenskaben Items for et galleri for at få vist poster fra en datakilde i galleriet. Du kan f.eks. angive egenskaben til Aktiver for at få vist poster fra en datakilde med det pågældende navn.

I stedet for at søge efter en post til visning eller redigering, kan brugeren oprette en post ved at vælge "+"-symbolet over galleriet. Opnå denne effekt ved at tilføje et kontrolelement af typen Billede, som viser et "+"-symbol i det, og angive dets egenskab OnSelect til denne formel:
NewForm( EditForm1 ); Navigate( EditScreen1, None )

Denne formel åbner skærmbilledet Rediger og opret, der indeholder et kontrolelement af typen Rediger formular med navnet EditForm1. Formlen skifter også den pågældende formular til tilstanden Ny, hvor formularen viser standardværdier fra datakilden, så brugeren nemt kan oprette en post fra bunden.

Hvis du vil undersøge kontrolelementerne i BrowseGallery1, skal du vælge det pågældende kontrolelement i første sektion af galleriet, der fungerer som en skabelon for alle andre sektioner. Du kan f.eks. vælge det midterste kontrolelement af typen Etiket på venstre kant:

I dette eksempel angives kontrolelementets egenskab Text til ThisItem.AssignedTo, som er et felt i datakilden Aktiver. Egenskaben Text for de andre tre kontrolelementer af typen Etiket i galleriet angives til lignende formler, og hvert kontrolelement viser et forskelligt felt i datakilden.

Vælg kontrolelementet Figur (pilen), og bekræft dets egenskab OnSelect til denne formel:
Navigate( DetailScreen1, None )

Hvis brugeren søger efter en post i BrowseGallery1, kan vedkommende vælge pilen for den pågældende post for at få vist yderligere oplysninger om den i DetailScreen1. Når brugeren vælger en pil, ændres værdien for egenskaben Selected for BrowseGallery1. I denne app bestemmer denne egenskab, hvilken post der vises på DetailScreen1 og i skærmbilledet Rediger og opret, hvis brugeren beslutter at opdatere posten.

Skærmbilledet Detaljer

Dette skærmbillede indeholder disse vigtige formler:

Øverst på skærmen ses tre billeder uden for DetailForm1, der fungerer som knapper, og som samordner de tre skærmbilleder i appen.

DetailForm1 dominerer dette skærmbillede og viser den post, som brugeren har valgt i galleriet (fordi formularens egenskab Items er angivet til BrowseGallery1.Selected). Egenskaben DataSource for formularen indeholder også metadata om datakilden, f.eks. et brugervenligt vist navn for hvert felt.

DetailForm1 indeholder adskillige kontrolelementer af typen Kort. Du kan vælge enten selve kontrolelementet Kort eller det kontrolelement, det indeholder, for at få flere oplysninger.

Egenskaben DataField for et kontrolelement af typen Kort afgør, hvilket felt kortet viser. I dette tilfælde er denne egenskab angivet til AssetID. Kortet indeholder et kontrolelement af typen Etiket, hvis egenskab Text er angivet til Parent.Default. Dette kontrolelement viser værdien Standard for kortet, der er angivet via egenskaben DataField.

I en oprettet app er kontrolelementer af typen Kort som standard låst. Når et kort er låst, kan du ikke ændre bestemte egenskaber som f.eks. DataField, og formellinjen er ikke tilgængelig for disse egenskaber. Denne begrænsning sikrer, at dine tilpasninger ikke ødelægger de grundlæggende funktioner i den oprettede app. Du kan dog ændre nogle egenskaber for et kort og dets kontrolelementer i højre rude:

I ruden til højre kan du vælge, hvilke felter der skal vises, og i hvilken type kontrolelement hvert felt skal vises.

Skærmbilledet Rediger og opret

Dette skærmbillede indeholder disse vigtige formler:

På samme måde som på skærmbilledet Detaljer dominerer et formularkontrolelement ved navn EditForm1 skærmbilledet Rediger og opret. Desuden angives egenskaben Item for EditForm1 til BrowseGallery1.Selected, så formularen viser den post, som brugeren valgte i BrowseScreen1. Hvert felt vises som skrivebeskyttet på skærmbilledet Detaljer, men brugeren kan opdatere værdien af et eller flere felter ved hjælp af kontrolelementerne i EditForm1. Den gør også brug af egenskaben DataSource til at få adgang til metadata om denne datakilde, f.eks. brugervenlige viste navne for hvert felt og det sted, hvor ændringer skal gemmes.

Hvis brugeren vælger ikonet "X" for at annullere en opdatering, sletter funktionen ResetForm ændringer, der ikke er blevet gemt, og funktionen Back åbner skærmbilledet Detaljer. Både skærmbilledet Detaljer og skærmbilledet Rediger og orpet viser den samme post, indtil brugeren vælger en anden i BrowseScreen1. Felterne i den pågældende post forbliver angivet til de værdier, der senest blev gemt, og ikke de ændringer, som brugeren har foretaget og derefter afbrudt.

Hvis brugeren ændrer en eller flere værdier i formularen og derefter vælger ikonet "flueben" i funktionen SubmitForm, sendes brugerens ændringer til datakilden.

• Hvis ændringerne gemmes, kører formularens formel OnSuccess, og funktionen Back() åbner skærmbilledet Detaljer for at vise den opdaterede post.
• Hvis ændringerne ikke gemmes, kører formularens formel OnFailure, men det ændrer ikke noget, fordi den er tom. Skærmbilledet Rediger og opret forbliver åben, så brugeren enten kan annullere ændringerne eller rette fejlen. LblFormError1 viser en brugervenlig fejlmeddelelse, som formularens egenskab Error er angivet til.

På samme måde som et kontrolelement af typen Vis formular indeholder et kontrolelement af typen Rediger formular kontrolelementer af typen Kort, som indeholder andre kontrolelementer, der viser forskellige felter i en post:

På det forrige billede viser det valgte kort feltet AssetID og indeholder et kontrolelement af typen Tekstinput, så brugeren kan redigere værdien i dette felt. (I modsætning hertil vises det samme felt i skærmbilledet Detaljer i et kontrolelement af typen Etiket, der er skrivebeskyttet.) Kontrolelementet Tekstinput har en egenskab af typen Standard, som er angivet til Parent.Default. Hvis brugeren var ved at oprette en post i stedet for at redigere en, ville dette kontrolelement vise en indledende værdi, som brugeren kan ændre for den nye post.

I ruden til højre kan du få vist eller skjule hvert kort, flytte rundt på dem eller konfigurere dem til at vise felter i forskellige typer kontrolelementer.

Opbyg en app fra bunden

Når du forstår, hvordan Power Apps opretter en app, kan du bygge en selv, der bruger de samme byggesten og formler, der blev beskrevet tidligere i dette emne.

Identificere testdata

For at få mest muligt ud af dette emne kan du starte med en datakilde, som du kan prøve dig frem med. Den skal indeholde testdata, som du kan læse og opdatere uden problemer.

Følg resten af dette emne helt ved at oprette en liste, der hedder "Ice Cream", der indeholder disse data:

• Opret en app fra bunden til telefoner, og forbind den med din datakilde.

  Bemærk

  Tabletapps ligner telefonapps, men du kan vælge et andet skærmlayout for at få mest muligt ud af den ekstra skærmplads.

  Eksemplerne i resten af emnet er baseret på en datakilde med navnet Ice Cream.

Gennemse poster

Hent nogle oplysninger fra en post ved at finde dem i et galleri på en gennemgangsskærm.

1. Tilføj et galleri af typen Lodret, og rediger layoutet til kun at indeholde en Titel.

   

2. Angiv galleriets egenskab Items til Ice Cream.

3. Angiv egenskaben Text for den første etiket i galleriet til ThisItem.Title, hvis den ikke er angivet til noget andet.

   Etiketten viser nu værdien i feltet Titel for hver post.

   

4. Rediger størrelsen på galleriet for at fylde hele skærmbilledet, og angiv dets egenskab TemplateSize til 60.

   Skærmbilledet ligner dette eksempel, der viser alle posterne i datakilden:

   

Vis detaljer

Hvis galleriet ikke viser de ønskede oplysninger, kan du vælge pilen for en post for at åbne skærmbilledet med detaljer. Et kontrolelement af typen Vis formular på skærmbilledet viser flere og eventuelt alle felter for den valgte post.

Kontrolelementet til Vis formular bruger to egenskaber til at vise posten:

• Egenskaben DataSource. Navnet på den datakilde, der indeholder posten. Denne egenskab udfylder det højre panel med felter og bestemmer det viste navn og datatypen (streng, nummer, dato osv.) for hvert felt.
• Egenskaben Item. Den post, der skal erstattes. Denne egenskab er ofte forbundet med egenskaben Selected for kontrolelementet Galleri, så brugeren kan vælge en post i kontrolelementet Galleri og derefter undersøge denne post nærmere.

Når egenskaben DataSource er angivet, kan du tilføje og fjerne felter i ruden til højre og ændre, hvordan de vises.

På dette skærmbillede kan brugerne bevidst eller utilsigtet ændre værdier for posten. Kontrolelementet Vis formular er et skrivebeskyttet kontrolelement, så det ændrer ikke en post.

Sådan tilføjes et kontrolelement af typen Vis formular:

1. Tilføj et skærmbillede, og føj derefter et kontrolelement af typen Vis formular til skærmbilledet.
2. Angiv egenskaben DataSource for formularkontrolelementet til 'Ice Cream'.

I ruden til højre kan du vælge de felter, der vises i skærmbilledet, og hvilken type kort der skal vises for hvert felt. Når du foretager ændringer i ruden til højre, angives egenskaben DataField for hvert kontrolelement af typen Kort til det felt, som brugeren vil arbejde med. Skærmbilledet skal ligne dette eksempel:

Til sidst skal vi oprette forbindelse mellem kontrolelementet Vis formular og kontrolelementet Galleri, så vi kan se detaljerne om en bestemt post. Når egenskaben Items er blevet angivet, vises den første post fra galleriet i vores formular.

• Angiv egenskaben Item for kontrolelementet Vis formular til Gallery1.Selected.

  Detaljerne for det valgte element vises i formularen.

  

Glimrende! Vi går nu til navigationen: Sådan åbner en bruger skærmbilledet Detaljer fra skærmbilledet Galleri og åbner skærmbilledet Galleri fra skærmbilledet Detaljer.

• Føj et kontrolelement af typen Knap til skærmbilledet, angiv dets egenskab Text til at vise Back, og angiv dets egenskab OnSelect til Back().

  Denne formel tager brugeren tilbage til galleriet, når vedkommende er færdig med at få vist detaljer.

  

Lad os nu gå tilbage til kontrolelementet Galleri og føje navigation til skærmbilledet Detaljer.

1. Skift til det første skærmbillede, som er vært for kontrolementet Galleri, og vælg pilen i det første element i galleriet.

2. Angiv egenskaben OnSelect for figuren til denne formel:
   Navigate( Screen2, None )

   

3. Tryk på F5, og vælg derefter en pil i galleriet for at få vist detaljerne for et element.

4. Vælg knappen Tilbage for at vende tilbage til galleriet af produkter, og tryk derefter på Esc.

Redigering af detaljer

Vores sidste vigtige aktivitet er at ændre indholdet i en post gennem et kontrolelement af typen Rediger formular.

Kontrolelementet Redigeri formular bruger to egenskaber til at vise og redigere posten:

• Egenskaben DataSource. Navnet på den datakilde, der indeholder posten. På samme måde som kontrolelementet Vis formular udfylder denne egenskab det højre panel med felter og bestemmer det viste navn og datatypen (streng, nummer, dato osv.) for hvert felt. Denne egenskab bestemmer også, om hvert felts værdi er gyldig, før de sendes til den underliggende datakilde.
• Egenskaben Item. Den post, der skal redigeres, og som ofte er knyttet til egenskaben Selected for kontrolelementet Galleri. På denne måde kan du vælge en post i kontrolelementet Galleri, vise posten på skærmbilledet Detaljer og redigere den på skærmbilledet Rediger og opret.

Sådan tilføjes et kontrolelement af typen Rediger formular:

1. Tilføj et skærmbillede, tilføj et kontrolelement af typen Rediger formular, og angiv dets egenskab DataSource til 'Ice Cream'.
2. Angiv egenskaben Item til Gallery1.Selected.

Du kan nu vælge de felter, der skal vises på skærmbilledet. Du kan også vælge, hvilken type kort der skal vises for hvert felt. Når du foretager ændringer i ruden til højre, angives egenskaben DataField for hvert kontrolelement af typen Kort til det felt, som brugeren vil arbejde med. Skærmbilledet skal ligne dette eksempel:

Disse to egenskaber er de samme som egenskaberne i kontrolelementet Vis formular. Og med disse alene kan vi få vist detaljerne for en post.

Kontrolelementet Rediger formular tilbyder også, at funktionen SubmitForm skriver ændringer tilbage til datakilden. Dette bruger du sammen med et kontrolelement af typen Knap eller Billede til at gemme en brugers ændringer.

• Tilføj et kontrolelement af typen Knap, angiv dets egenskab Text til Gem, og angiv dets egenskab OnSelect til denne formel:
  SubmitForm( Form1 )

Sådan føjes navigation til og fra dette skærmbillede:

1. Tilføj endnu et kontrolelement af typen Knap, angiv dets egenskab Text for at vise Annuller, og angiv dets egenskab OnSelect til denne formel:
   ResetForm( Form1 ); Back()

   Denne formel sletter ændringer, der ikke er blevet gemt, og åbner det forrige skærmbillede.

   

2. Angiv egenskaben OnSuccess til Back().

   Når opdateringer er blevet gemt, åbnes det forrige skærmbillede (i dette tilfælde skærmbilledet Detaljer) automatisk.

   

3. Tilføj en knap i skærmbilledet Vis, angiv dens egenskab Text til at vise Rediger, og angiv dens egenskab OnSelect til denne formel:
   Navigate( Screen3, None )

   

Du har nu bygget en grundlæggende app med tre skærmbilleder til visning og indtastning af data. Du kan prøve den ved at få vist skærmbilledet Galleri og trykke på F5 (eller vælge pil fremad til visning af et eksempel øverst til venstre i skærmbilledet). Den lyserøde prik angiver, hvor brugeren klikker eller trykker i skærmbilledet for hvert trin.

Opret en post

Brugeren arbejder med den samme formular af typen Rediger til både opdatering og oprettelse af poster. Når brugeren vil oprette en post, skifter funktionen NewForm til tilstanden Ny.

Når formularen er i tilstanden Ny, angives værdien for hvert felt til standardværdierne for datakilden. Den post, der er angivet for formularens egenskab Item, ignoreres.

Når brugeren er klar til at gemme den nye post, køres SubmitForm. Når formularen er blevet sendt, skifter den tilbage til EditMode.

På det første skærmbillede skal du tilføje en knap af typen Ny:

1. Tilføj et kontrolelement af typen Knap på skærmbilledet Galleri.

2. Angiv knappens egenskab Text til Ny og dens egenskab OnSelect til denne formel:
   NewForm( Form1 ); Navigate( Screen3, None )

   Formlen skifter til kontrolelementet Rediger formular på Screen3 til tilstanden Ny og åbner det pågældende skærmbillede, så brugeren kan udfylde det.

Når skærmbilledet Rediger og opret åbnes, er formularen tom, så brugeren kan tilføje en vare. Når brugeren vælger knappen Gem sikrer funktionen SubmitForm, at der oprettes en post, i stedet for at den opdateres. Hvis brugeren vælger knappen Annuller skifter funktionen ResetForm formularen tilbage til tilstanden Rediger, og funktionen Back åbner skærmbilledet til gennemsyn af galleriet.

Slette en post

1. På skærmbilledet Vis skal du tilføje en knap og angive dens egenskab Text til at vise Slet.

2. Angiv knappens egenskab OnSelect til denne formel:
   Remove( 'Ice Cream', Gallery1.Selected ); Back()

   

Håndtering af fejl

I denne app opstår der en fejl, når værdien af et felt ikke er gyldigt, når et obligatorisk felt er tomt, når der ikke er forbindelse til netværket, eller når der opstår andre problemer.

Hvis SubmitForm af en eller anden grund mislykkes, indeholder egenskaben Error for kontrolelementet Rediger formular en fejlmeddelelse, som brugeren får vist. Brugeren skal kunne løse problemet og gensende ændringen eller annullere opdateringen med disse oplysninger.

1. Tilføj et kontrolelement af typen Etiket på skærmbilledet Rediger og opret, og flyt det under knappen Gem. En fejl vil være let at se, når brugeren vælger dette kontrolelement for at gemme ændringerne.

2. Angiv egenskaben Text for kontrolelementet Etiket for at vise Form1.Error.

   

I en app, der oprettes fra data af Power Apps, angives egenskaben AutoHeight for dette kontrolelement til true, så der ikke bruges noget plads, hvis der ikke opstår nogen fejl. Egenskaberne Height og Y for kontrolelementet Rediger formular justeres også dynamisk for at tage højde for, at dette kontrolelement bliver større, når der opstår en fejl. Du kan få flere oplysninger ved at oprette en app fra eksisterende data og undersøge disse egenskaber. Kontrolelementet til fejltekst er meget kort, når der ikke er opstået nogen fejl, og det kan være nødvendigt at åbne visningen Avanceret (tilgængelig på fanen Vis) for at vælge dette kontrolelement.

Opdater data

Datakilden opdateres, hver gang brugeren åbner appen, men brugeren vil muligvis opdatere posterne i galleriet uden at lukke appen. Tilføj en knap af typen Opdater, så brugeren kan vælge at opdatere dataene manuelt:

1. På skærmbilledet med kontrolelementet Galleri skal du tilføje et kontrolelement af typen Knap og angive dets egenskab Text til at vise Opdater.

2. Angiv egenskaben OnSelect for dette kontrolelement til denne formel:
   Refresh( 'Ice Cream' )

   

Søge og sortere galleriet

I den app, som Power Apps oprettede fra data, udelod vi i første omgang to kontrolelementer øverst i skærmbilledet Gennemse. Brugeren kan ved hjælp af disse kontrolelementer søge efter en eller flere poster, sortere listen over poster i stigende eller faldende rækkefølge eller begge dele.

Når brugeren vælger knappen til sortering, ændres sorteringsrækkefølgen i galleriet. Til denne funktionsmåde bruger vi en kontekstvariabel til at spore den retning, galleriet sorteres i. Når brugeren vælger knappen, opdateres variablen, og retningen ændres. Egenskaben OnSelect for sorteringsknappen angives til denne formel: UpdateContext( {SortDescending1: !SortDescending1} )

Funktionen UpdateContext opretter kontekstvariablen SortDescending1, hvis den ikke allerede findes. Funktionen læser værdien for variablen og angiver den til den logiske modsatte værdi ved hjælp af !- operatoren. Hvis værdien er true, bliver den false. Hvis værdien er false, bliver den true.

Formlen for egenskaben Items for kontrolelementet Galleri bruger denne kontekstvariabel sammen med teksten i kontrolelementet TextSearchBox1:

Sort( 
    If( IsBlank(TextSearchBox1.Text),
        Assets,
        Filter( Assets, TextSearchBox1.Text in Text(ApproverEmail) ) 
    ),
    ApproverEmail,
    If(SortDescending1, Descending, Ascending) 
)

Lad os gennemgå det trin for trin:

• På ydersiden har vi funktionen Sort med tre argumenter: En tabel, et felt, der skal sorteres, og den retning, der skal sorteres i.

  • Sorteringsretningen stammer fra kontekstvariablen, der skifter, når brugeren vælger kontrolelementet ImageSortUpDown1. Værdien true/false oversættes til konstanterne Descending og Ascending.
  • Det felt, der skal sorteres i, fastsættes til ApproverEmail. Hvis du ændrer de felter, der vises i galleriet, skal du også ændre dette argument.

• På indersiden har vi funktionen Filter med en tabel som et argument og et udtryk, der skal evalueres for hver post.

  • Tabellen er den rå datakilde Aktiver, som er udgangspunktet inden filtrering eller sortering.
  • Udtrykket søger efter en forekomst af strengen i TextSearchBox1 inden for feltet ApproverEmail. Hvis du ændrer de felter, der vises i galleriet, skal du igen opdatere dette argument.
  • Hvis TextSearchBox1 er tom, vil brugeren have vist alle poster, og funktionen Filter tilsidesættes.

Dette er blot ét eksempel: Du kan udforme din egen formel for egenskaben Items, afhængigt af behovene i din app, ved at sætte Filter, Sort og andre funktioner og operatorer sammen.

Skærmbilledes design

Vi har endnu ikke gennemgået andre metoder til fordeling af kontrolelementer på tværs af skærmene. Det skyldes, at du har mange muligheder, og det bedste valg afhænger af behovene i forbindelse med din app.

Da der er så mange begrænsninger forbundet med at få vist ejendomme på telefonskærme, vil du sandsynligvis gennemse, vise og redigere/oprette på forskellige skærmbilleder. I dette emne åbner funktionerne Navigate og Back hvert skærmbillede.

På en tablet kan du gennemse, vise og redigere/oprette på to eller endda én skærm. Sidstnævnte kræver hverken funktionen Navigate eller Back.

Hvis brugeren arbejder på samme skærmbillede, skal du være opmærksom på, at brugeren ikke kan ændre valget i Galleri og potentielt kan miste ændringer i kontrolelementet Rediger formular. Hvis du vil forhindre brugeren i at vælge en anden post, når ændringer af en anden post endnu ikke er blevet gemt, kan du angive egenskaben Disabled for galleriet til denne formel:
EditForm.Unsaved