MS Power Apps detaljeskærm og formularskærm

I denne vejledning skal vi tale om, hvordan du opretter detaljeskærmen og formularskærmen i Power Apps fra bunden.

Fordi Power Apps blev bygget til brugervenlighed, er det letder har eksisterende skærme, gallerier og andre grundlæggende elementer. Der vil dog være tidspunkter, hvor du bliver nødt til at bygge din egen app fra bunden, vel vidende at du måske har unikke mål med at bygge din app.

Det er derfor, det er vigtigt at forstå de byggeklodser, der gør en app. Skærmen er en af ​​dem.

Indholdsfortegnelse

• Oprettelse af detaljeskærmen i MS Power Apps
• Linker galleriet til detaljeskærmen
• Navigerer mellem galleriet og detaljeskærmen
• Oprettelse af skærmbilledet Rediger formular
• Gør indsend-knappen funktionel
• Navigation mellem redigeringsskærmen og detaljeskærmen
• Oprettelse af en ny formularskærm i MS Power Apps
• Skift mellem ny formular og rediger formular i MS Power Apps
• Brug af Back-funktionen
• Konklusion

Oprettelse af detaljeskærmen i MS Power Apps

En detaljeskærm indeholder alle de oplysninger, der følger med hver post fra din datakilde.

I eksemplet nedenfor vil du se et galleri, der viser forskellige poster. Galleriet indeholder kun en forhåndsvisning af denne post. I dette tilfælde vil du se fornavnet, efternavnet, lokationen og VIP-niveauet, hvis du ser på indgangen til Viki Darling.

Men denne post kommer med en masse andre detaljer. Hvis vi ser på datakilden, vil vi se, at der også er et kundenummer, dato for tilslutning, pasnummer og agentnavn.

Det er det, detaljeskærmen er til. Det er en skærm, som brugere vil lande på i det øjeblik, de klikker på et indgangspunkt i galleriet. Det er her, de vil se alle de andre detaljer, der ikke er synlige i galleriet.

For at begynde at oprette detaljeskærmen går vi tilbage til MasterScreen og duplikerer den.

At starte fra en masterskærm var noget, vi diskuterede i et selvstudie om, hvordan man opretter en app fra bunden. At have en masterskærm, der indeholder de grundlæggende elementer i din app, gør det nemt at holde alle dine skærme ensartede med hensyn til udseende og layout.

Lad os omdøbe dubletskærmen som DetailScreen.

Lad os også ændre etiketten øverst og skrive kundeoplysninger.

Selvom vi opretter denne skærm fra bunden, er der ingen grund til manuelt at tilføje alle detaljer. Power Apps har automatiseret hele processen for os.

Vi starter med at tilføje en visningsformular, som kan gøres under Indsæt-båndet.

Da denne skærm ikke rigtig har nogen anden brug end at vise kundeoplysningerne, kan vi lade formularen udfylde hele skærmen ved at trække i hjørnerne.

Detaljeskærmen skal have en datakilde. Vi kan linke en datakilde her i højre rude under Egenskaber. Til denne app bruger vi Tabel1.

Nu hvor vi har en datakilde, hvor vi trækker detaljerne fra, er det tid til at beslutte, hvilke detaljer vi vil vise på skærmen. Det kan gøres ved at klikke på Rediger felter.

Vi kan tilføje felter ved at afkrydse alle felter, som vi føler er anvendelige til vores formål. I dette tilfælde, lad os tilføje alle disse felter.

vil derefter indlæse alle de felter, vi valgte, i den formular, vi lige har oprettet, som er FormViewer1.

Hvis vi klikker på den, viser den, at den automatisk har sat datakort op for hver af de forskellige kolonner i vores datakilde.

Og til hvert datakort har den faktisk sat en nøgle op, som indeholder hvad datakortet hedder.

Den har også sat en værdi op, som viser den faktiske værdi, der er knyttet til den kolonne.

I øjeblikket viser denne formular ingen værdier endnu. Det er fordi vi endnu ikke har knyttet vores galleri til DetailScreen. Igen er målet her, at detaljerne først skal vises, efter at en post er blevet valgt fra vores galleri.

Linker galleriet til detaljeskærmen

Det fantastiske ved gallerier i er, at det har en ejendom kaldet Selected. Det forbinder grundlæggende galleriet med detaljeskærmen, så hver gang vi vælger en post i galleriet, viser den kun detaljerne for den specifikke post.

For at gøre det, vil vi fremhæve FormViewer1 og gå til egenskaben Item.

Sørg for, at du henviser til det rigtige galleri her, især hvis din app bruger flere gallerier. I dette tilfælde vil vi bruge Gallery2.

Går vi tilbage til detailskærmens formellinje, skriver vi i Gallery2.Selected og trykker på Enter.

Nu ser vi detaljer her, der kommer fra det, der sidst blev valgt i galleriet.

Lad os gå tilbage til skærmbilledet Vis kunder og vælge Viki Darling fra vores galleri.

Når du har klikket på det, vil du se, at detaljerne på detaljeskærmen også er ændret og nu viser oplysninger om Viki Darling.

Dette understreger forholdet mellem disse skærme og elementerne i det. Felterne i detaljeskærmen er drevet af vareegenskaben i formularfremviseren, som igen er drevet af den valgte post i galleriet.

Navigerer mellem galleriet og detaljeskærmen

I øjeblikket kan vi kun se detaljerne, hvis vi vælger en post i galleriet og manuelt går til detaljeskærmen. Ideelt set bør brugere automatisk føres til detaljeskærmen i det øjeblik, de klikker på en post. Så vi vil tilføje noget navigation mellem skærmene.

Lad os starte med navigationen fra detaljeskærmen, der går tilbage til galleriet. Vi tilføjer en venstre pil gennem knappen Ikoner under Indsæt båndet.

Lad os ændre farven til hvid for at sikre, at den matcher de andre elementer på skærmen.

Med ikonet fremhævet, lad os bruge Naviger-funktionen og henvise til skærmen, hvor vi vil have ikonet til at lande. I dette tilfælde er det ViewCustomersScreen.

For at gøre det mere visuelt tiltalende, når vi bevæger os fra en skærm til en anden, lad os bruge Fade-overgangen.

Derefter trykker vi Enter for at låse den formel. Når vi har gjort det, skal vi bare klikke på ikonet.

Hvis du gør det, kommer vi til skærmen Vis kunder.

Lad os denne gang gå fra skærmbilledet Vis kunder til skærmbilledet med detaljer.

Denne gang har vi at gøre med forskellige poster i galleriet. Men det betyder ikke, at vi skal lave en anden handling for hvert element. Vi skal bare fremhæve galleriet og vælge OnSelect fra rullemenuen Egenskaber.

Vi bruger funktionen Naviger igen og refererer til DetailScreen. Vi bruger den samme overgang, som vi brugte før. Tryk derefter på Enter for at låse denne formel inde.

Nu hvor vi har sat formlen, lad os klikke på rekorden for Megan Rohman.

Nu tager det os direkte til detaljeskærmen med Megan Rohmans detaljer automatisk indsat på skærmen.

Og fordi vi har konfigureret navigationen fra detaljeskærmen til skærmbilledet for visning af kunder, vil et enkelt klik på pileikonet tage dig direkte tilbage til galleriet.

Oprettelse af skærmbilledet Rediger formular

Selvom vores datakilde giver os alle oplysninger, er der tidspunkter, hvor vi har brug for at opdatere kundens oplysninger. Det betyder, at vi også skal bruge en redigeringsskærm.

Så lad os oprette endnu et duplikat af masterskærmen og omdøbe den til EditScreen.

Vi kommer til at bruge den samme skærm til også at tilføje nye kunder, så lad os ændre etiketten til Nye / Rediger kunder.

Til denne skærm indsætter vi en redigeringsformular.

Ligesom den visningsformular, vi tilføjede tidligere, skal vi stadig tilføje en datakilde. Vi vælger Tabel 1 igen.

Tilføjelse af et felt afhænger af de data, du har, og den slutbruger, du har i tankerne. For eksempel vil en kundes pasnummer ikke rigtig ændre sig. Så du vil måske udelade det fra formularen.

For nu, lad os tilføje alt. Denne gang vil du se, at der er pladser under hvert felt.

Disse rum kan også redigeres. For eksempel, under DateJoined, har vi ikke rigtig brug for tiden. Vi mangler kun datoen.

Du vil også bemærke, at felterne ikke har mellemrum. Det er en ting, vi også kan ændre. Vi kan sige Fornavn i stedet for Fornavn.

Vi vil behandle disse ændringer senere. Indtil videre skal vi sikre os, at detaljerne om den kunde, vi vælger fra skærmbilledet Vis kunder, vises på denne redigeringsformularskærm.

Med Form2 fremhævet, lad os gå til egenskaben Items og sidestille det med Gallery2.Selected.

Nu viser den detaljerne for en af ​​vores kunder på formularen.

Når vi begynder at redigere, skal vi bruge en knap til at klikke på for at indsende ændringerne. Så lad os tilføje en knap gennem båndet Indsæt.

Mærk knappen og skriv Send.

Formularer har tre tilstande - rediger, ny og vis. I øjeblikket er denne formular i redigeringstilstand. Det betyder, at vi kan gå til et hvilket som helst af disse felter og ændre indtastningerne.

I modsætning hertil er detaljeskærmen teknisk set et udstillingsgalleri. Det er derfor, hvis du ser på egenskaberne i højre rude, giver det os ikke mulighed for at redigere, selvom dette også er en formular.

Visningsformularen ligner, hvordan denne redigeringsskærm vil fungere, hvis den er i visningstilstand. Den låser alle elementerne, så ingen af ​​dem kan redigeres.

Det er derfor, hvis vi skal ændre nogen af ​​posterne i vores galleri, har vi brug for, at vores formular er i redigeringstilstand. Vi skal også bruge indsend-knappen i bunden for at være funktionel, så den rent faktisk indsender formularen og opdaterer de underliggende poster.

Gør indsend-knappen funktionel

For at låse en handling ind, hver gang vi klikker på indsend-knappen, skal vi gå til egenskaben OnSelect og skrive SubmitForm på formellinjen.

SubmitForm er en funktion, der samler alle opdateringerne i formularen og indsender disse ændringer. Det tager også selve formularen, som vi ønsker at indsende, som i dette tilfælde er Form2.

Lad os se, hvad der sker, nu hvor formlen er blevet låst. I øjeblikket dukker Coy Newells placering op som USA.

Lad os ændre det til Canada og klikke på send.

Nu, når vi går tilbage til detaljeskærmen, viser den Canada som lokationen.

Lad os gå tilbage til redigeringsskærmen, og denne gang skal vi ændre efternavnet. Så i stedet for Newell, lad os ændre dette til Smith og klikke på send.

Igen, hvis vi går til detaljeskærmen, ser vi, at ændringerne også er blevet foretaget her.

Hvis vi går til visningskundeskærmen, viser det også, at Coy Newell nu er Coy Smith, og placeringen er nu Canada i stedet for USA.

Dette viser, at mens vi arbejder, bliver tingene opdateret i baggrunden og ændrer data på alle de skærme, der er knyttet til det, vi arbejder på i øjeblikket. Dette gør det meget nemmere at ændre nogen af ​​de oplysninger, vi har.

Navigation mellem redigeringsskærmen og detaljeskærmen

Nu hvor vi har en redigeringsskærm, vil vi gerne have midlerne til at lande på den side, der kommer fra detaljeskærmen. Så lad os tilføje redigeringsikonet.

Igen vil vi ændre farven, så den er ensartet med alle de andre elementer.

Med ikonet fremhævet, vil vi vælge egenskaben OnSelect, bruge funktionen Naviger og henvise til skærmen, hvor vi vil have dette ikon til at føre, som er redigeringsskærmen. Lad os ikke tilføje en skærmovergang denne gang.

Nu ønsker vi også at kunne gå tilbage til detaljeskærmen, når vi er færdige med at indsende de ændringer, vi har foretaget her i redigeringsskærmen. Så lad os tilføje tilbage-ikonet og bruge den samme formel, men denne gang går vi tilbage til DetailScreen.

Med den ekstra navigation bliver det nemmere for slutbrugere at gå fra en skærm til en anden, når vores app er udgivet.

Oprettelse af en ny formularskærm i MS Power Apps

Nu hvor vi har skærmbilledet til redigeringsformular, bør vi også tillade brugere at tilføje poster, der endnu ikke findes i galleriet. Denne gang vil vi ikke tilføje en ny formular. I stedet vil vi bruge den eksisterende, siden vi mærkede den sidste skærm Nye / Rediger kunder.

Vi nævnte tidligere, at formularer i Power Apps giver dig mulighed for ikke kun at gå i redigerings- og visningstilstand, men også at gå i ny tilstand.

Grundlæggende betyder det, at gå i ny tilstand, at alle tekstbokse er tomme. Hvis vi skriver noget i boksene og trykker på send, tilføjer det posten i stedet for at redigere en eksisterende post.

Så det, vi skal være i stand til at gøre, er at ændre tilstanden for denne formular fra redigering til ny, derefter fra ny til redigering afhængigt af behovet.

Lad os starte fra startskærmen, som vi oprettede i. Som du kan se, har vi allerede en knap her til at tilføje nye kunder.

I øjeblikket fører denne knap ikke til nogen skærm endnu. Så lad os fremhæve knappen, gå til OnSelect og bruge Naviger-funktionen til at få den til at føre til EditScreen.

Nu vil vi lande på redigeringsskærmen, hver gang vi klikker på den knap fra startsiden.

Problemet er, at denne skærm stadig har alle de detaljer, som vi redigerede før. Da vi tilføjer en ny kunde, vil vi hellere have en tom skærm.

Så lad os gå tilbage til startskærmen for at tilføje en anden funktion kaldet NewForm. NewForm sætter først formularen i ny tilstand, før vi lander på den.

Denne funktion har brug for den faktiske form, som vi ønsker at skifte til ny tilstand, så vi refererer til Form2.

Bemærk, at vi brugte et semikolon mellem de to funktioner. Grundlæggende dikterer et semikolon rækkefølgen for, hvordan disse funktioner kører. Det kører NewForm-funktionen først, og når det er gjort, er det den eneste gang, det kører Naviger-funktionen.

Nu hvor vi har rettet formlen, vil et klik på knappen Tilføj ny kunde føre os til en tom formular.

Skift mellem ny formular og rediger formular i MS Power Apps

Lad os gå tilbage til vores galleri og klikke på rekorden for Viki Darling.

Lad os sige, at vi vil redigere nogle af felterne her. Så vi klikker på redigeringsikonet.

Problemet er, at vi lander på en ny formular og ikke en redigeringsformular. Det er fordi vi forlod dette i ny form, da vi oprettede navigationen til knappen Tilføj ny kunde.

Så denne gang ønsker vi, at redigeringsikonet skifter formularen til redigeringstilstand, før vi lander på den skærm. For at få det til at ske, vil vi bruge den samme formel, som vi gjorde for den nye formular, men vi vil bruge funktionen EditForm i stedet.

Funktionen EditForm ændrer formularen, der refereres til, fra dens nuværende tilstand til redigeringstilstand. Når vi har det på plads, når vi klikker på redigeringsikonet fra detaljeskærmen, lander vi nu på redigeringsskærmen i redigeringstilstand.

Dette betyder også, at når vi indsender knappen Send, vil den opdatere den eksisterende post i stedet for at tilføje en ny post.

Brug af Back-funktionen

Nu hvor vi har de formularer, vi har brug for, lad os dobbelttjekke vores navigation for at sikre, at vores slutbrugere lander på de rigtige skærme.

Lad os sige, at vi er på startskærmen og beslutter at tilføje en ny kunde. Vi klikker på knappen, der fører os til en tom formular. Men så ændrer vi mening og klikker på tilbage-knappen.

Men når vi gør det, fører det os ikke tilbage til startskærmen. I stedet fører det os til detaljeskærmen.

For at finde ud af, hvad der skete, lad os gå til ikonet bagpå og se på handlingen knyttet til det. Det viser sig, at vi som standard har indstillet tilbage-knappen til at navigere til detaljeskærmen.

Det, vi ønsker, skal ske her, er, at vi lander til den forrige skærm, vi var på, før vi landede her. Det betyder, at i stedet for at bruge Naviger-funktionen og henvise til en bestemt skærm, skal vi skifte til Tilbage-funktionen.

Denne funktion kræver ikke, at vi refererer til nogen skærm. Dens adfærd ændrer sig afhængigt af hvilken skærm vi kom fra. Det betyder, at uanset om vi kom fra startskærmen eller detaljeskærmen, vil et klik på tilbage-funktionen nu føre os til den sidste skærm, vi besøgte.

Konklusion

Med detalje-, redigerings- og nye formularskærme på plads tager vores app langsomt form og er næsten klar til at blive publiceret. Dette er det fantastiske ved Power Apps. Uanset om vi vælger at starte med en skabelon eller oprette en app fra bunden, er alt ligetil og nemt nok at oprette.

Vi så også, hvor vigtigt det er at sikre, at navigationen mellem siderne fungerer godt. Dette spiller en afgørende rolle i at sikre, at vores app er intuitiv nok for slutbrugere, når den først går live.

Alt det bedste,

Henrik