Kapitel 3: Opbygning af en prototype med lav kode

Bemærk

Kapitel 2 refererer til den mobilapp, der bruges af teknikerne og teknikerne, og den app til stationære computere, de lokale miljømedarbejdere bruger. I følgende kapitler fokuseres der på design, implementering og udrulning af de mobilapps, der er indbygget i Power Apps. Skrivebordsappene efterlades som en opgave til læseren.

Kiana er skeptisk i løsninger med lave koder og Power Apps. Men Kiana og Maria beslutter sig for at oprette en app sammen for at hjælpe feltteknikerne med at kontrollere lageret (og evt. ordredele), søge i videnbasen og kontrollere deres næste aftale, mens de er væk fra kontoret på serviceopkald. Kiana og MAria planlægger at bruge denne erfaring til at undersøge, hvordan du kan tilføje kontrolelementer og bruge formler i Power Apps.

Selvom det typisk er en udvikleropgave at bygge en indledende lavkode-prototype, beslutter Kiana at være opmærksom på processen for at forstå, hvordan appen er opbygget. Kiana skal bruge disse oplysninger for at hjælpe Maria med at integrere de virkelige datakilder, web-API'er og andre påkrævede tjenester i appen.

Punkt 1: Feltlagerstyring

Det første mål er at oprette en lærredapp, der viser en liste over dele, og som giver brugeren mulighed for at se detaljerne i alle dele. Til sidst skal brugeren også kunne bestille en del. Men denne første version af appen vil ganske enkelt være en prototype, og den vil ikke være klar til en back end-bruger endnu. Når hun har fået feedback fra Caleb, den tekniske kundetekniker, skal Maria med Kiana om at integrere lærredappen med det lagersystem, der kører det lokale miljø.

Maria kender det eksisterende lagerstyringssystem og forstår de oplysninger, der findes i det. Maria starter med at oprette en Excel-projektmappe, der indeholder tabeller med detaljerede oplysninger om visse eksempeldele. Felterne i tabellen er ID, Navn, Kategori-id, Pris, Oversigt, NumberInStock og Billede (en url-adresse, der henviser til et billede af delen). Denne projektmappe kan bruges til at oprette og teste lærredappen for at sikre, at de påkrævede data vises korrekt. Maria gemmer projektmappen på en OneDrive-konto med navnet BoilerParts.xlsx.

Bemærk

Du kan finde en kopi af projektmappen i mappen Aktiver i Git-lageret i denne vejledning.

Hvis du er relationsdatabasedesigner, vil du se, at Excel-projektmappen indeholder en denormaliseret visning af dataene. I en relationsdatabase er CategoryID f.eks. sandsynligvis et numerisk id, der refererer til en separat tabel, der indeholder detaljerne i kategorien, herunder navnet.

Bemærk

URL-adresserne i kolonnen Billede er i øjeblikket kun pladsholdere. I den færdige app erstattes disse URL-adresser med adresserne på rigtige billedfiler.

Følg disse trin for at oprette appen med Power Apps.

1. Log på Power Apps.

2. Vælg Excel Online under Start fra data på siden Start.

   

3. Vælg OneDrive for Business på siden Forbindelser, og vælg derefter Opret.

   

4. Vælg filen BoilerParts.xlsx på siden OneDrive for Business.

   

5. Vælg tabellen i Excel-filen (Udvisning oprettede tabellen ved hjælp af standardnavnet, Tabel1), og vælg derefter Opret forbindelse.

   

6. Vent, mens Power Apps genererer appen.

   

7. Når appen er genereret, kan du se skærmbilledet Gennemse, hvor der vises Kategori-id-, id- og billed-felter fra hver række i deletabellen i projektmappen.

   

8. De felter, der vises i øjeblikket, er ikke særligt nyttige, når det skal hjælpe en tekniker med at vælge et produkt. Vælg etiketten Heat Exchanger i første datarække i ruden med skærmbilledet Gennemse. Vælg egenskaben Text på rullelisten på formellinjen. Du kan ændre værdien for denne egenskab ThisItem.Name. Teksten i det første felt i hver række skifter, så delnavnet vises.

   Bemærk

   På følgende billede er den Heat Exchanger-etiket, der oprindeligt blev vist i formularen, ændret til produktnavnet 3.5 W/S Heater.

   

9. Gentag det forrige trin for id- og billed-etiketter. Ret Text-egenskaben for feltet Id til CategoryID, og egenskaben Text for feltet Billede til Oversigt. Skærmbilledet Gennemse skal nu ligne følgende billede, som en felttekniker med større sandsynlighed vil finde nyttige til valg af dele.

   

10. Søgefunktionen i skærmbilledet Gennemse bruges som standard til de felter, der oprindeligt blev valgt, da skærmen blev oprettet - i dette tilfælde, CategoryID, ID og Billede. Resultaterne sorteres efter CategoryID. Det er en god ide at skifte til felterne Navn, Kategori-id og Oversigt, hvor resultaterne er sorteret efter Navn. Vælg kontrolelementet BrowseGallery1 i ruden Trævisning. Vælg egenskaben Items på rullelisten i venstre side af formellinjen. Træk den nederste kant af formellinjen ned, så formlen er helt synlig. Formlen indeholder følgende udtryk:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. Rediger udtrykket for Søg for at referere til felterne Navn, Kategori-id og Oversigt ved hjælp af følgende formel:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. Titlen i formularoverskriften er ikke nyttig, og standardtemaet stemmer ikke overens med VanArsdel's virksomheds udseende. Vælg Table1-etiketten i skærmbilledet Gennemse, og rediger linjen Formular, ændr egenskaben Text for etiketten til "Gennemse dele" (medtag de dobbelte anførselstegn i værdien).

13. Vælg Tema på værktøjslinjen (du skal muligvis udvide værktøjslinjen for at få vist flere elementer) og vælg derefter Område-temaet. Farverne og designet på skærmbilledet Gennemse ændres, så de stemmer overens med temaet.

    

Gøre skærmbilledet Detaljer mere nyttigt

Du har oprettet den grundlæggende app og ændret skærmbilledet Gennemse, så der vises felter, som en tekniker kan bruge til at identificere en del. Appen indeholder også skærmbilledet Detaljer, som viser alle oplysninger om den valgte del. Felterne på skærmen vises i øjeblikket ikke i en logisk rækkefølge, så du skal omarrangere dem. Du kan også slette ID-feltet fra dette skærmbillede, da oplysningerne er tilgængelige for en tekniker.

1. Rul ned i ruden Trævisning, og vælg DetailScreen1. På dette skærmbillede vises detaljer om den del, en bruger vælger, på skærmbilledet Gennemse.

   

2. Vælg Table1-etiketten i overskriften på skærmbilledet Detaljer i den midterste rude. Skift egenskaben Text til Deldetaljer under fanen Egenskaber i højre rude.

   Bemærk

   I mange tilfælde kan du opnå de samme resultater ved at bruge formellinjen som ruden Egenskaber. Men nogle egenskaber, der kun er tilgængelige via ruden Egenskaber.

   

3. Rul ned i ruden Trævisning, og vælg DetailForm1 under DetailScreen1. På fanen Egenskaber i ruden til højre skal du vælge Rediger felter ud for etiketten Felter. Markér og træk felterne i den midterste rude, så de vises i følgende rækkefølge fra top til bund:

   • Navn
   • Kategori-id
   • Oversigt
   • Pris
   • NumberInStock
   • Billede
   • Id

   

4. Vælg ID-feltet, vælg den ellipse, der vises i højre side af feltet, og vælg derefter Fjern fra den rulleliste, der vises. Du kan bruge denne handling til at fjerne ID-feltet fra formularen.

   

5. I ruden Trævisning under DetailForm1 skal du vælge CategoryID_DataCard1. Dette element er et DataCard-objekt, der viser navnet på et felt (kaldet nøglen) og dets værdi.

   

   På fanen Avanceret i ruden til højre skal du vælge Lås op for at ændre egenskaber. Skift feltet DisplayName til "Kategori" i sektionen Data (medtag anførselstegn).

   Bemærk

   Som med fanen Egenskaber er mange af egenskaberne under fanen Avanceret også tilgængelige via formellinjen. Hvis du vil angive disse egenskaber, kan du bruge formellinjen, hvis du foretrækker det.

   

6. Gentag det forrige trin for at ændre nøglen for NumberInStock_DataCard1 til "Nummer på lager" (medtag anførselstegn).

7. Du skal justere formateringen i feltet Pris, så dataene vises som en valutaværdi. I ruden Trævisning under DetailForm1 under Price_DataCard1 skal du vælge DataCardValue7. Det er det felt, hvor værdien i feltet Pris vises. I ruden DataCardValue7 til højre på fanen Avanceret skal du ændre egenskaben Text til Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Udtrykket Parent.Default henviser til det dataelement, som det overordnede kontrolelement (DataCard) er bundet til i dette tilfælde kolonnen Pris. Text-funktionen omformaterer denne værdi ved hjælp af det format, der er angivet som det andet argument. I dette eksempel er det den lokale valuta med to decimaler.

8. Billeddatakortet skal vise et billede af delen i stedet for URL-adressen til billedfilen. I ruden Trævisning under DetailForm1 under Image_DataCard1 skal du vælge DataCardValue3 og derefter Slet for at fjerne dette kontrolelement.

9. Vælg Image_DataCard1. Vælg + Indsæt i venstre rude. Udvid Medier i ruden Indsæt, og vælg derefter Billede.

   

10. Vend tilbage til ruden Trævisning, og kontrollér, at text-kontrolelementet Image1 er føjet til kontrolelementet Image_DataCard1.

    

11. I ruden Trævisning vælges Image_DataCard1. Skift Højde til 500 i højre rude på fanen Avanceret, så der er tilstrækkelig plads til, at der kan vises et billede.

    

12. I ruden Trævisning vælges Image1. Angiv følgende egenskaber:

    • Billede: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Width: 550
    • Højde: 550

    Bemærk

    Det viste billede er i øjeblikket tomt, fordi URL-adressen i Excel-projektmappen kun er en pladsholder. Du kan læse dette problem og hente en rigtig webadresse, når du binder appen til en web-API i et senere kapitel.

Appen indeholder også et Redigér-skærmbillede, som gør det muligt for en bruger at ændre oplysningerne for en del. En tekniker skal ikke kunne ændre detaljerne for en del, oprette nye dele eller slette dele fra kataloget.

1. I ruden Trævisning vælges EditScreen1. Vælg ellipseknappen, og vælg derefter Slet for at fjerne dette skærmbillede.

   

2. I ruden Trævisning vælges DetailsScreen1. Bemærk, at Power Apps Studio viser en fejlmeddelelse til dette skærmbillede. Denne fejl opstår, fordi DetailsScreen1 indeholder udtryk, der refererer til skærmbilledet EditScreen1, som ikke længere findes.

3. Vælg blyantikonet (IconEdit1) i overskriften på DetailsScreen1. Egenskaben OnSelect for dette kontrolelement indeholder udtrykket EditForm(EditForm1); Naviger(EditScreen1, ScreenTransition.None). Når ikonet Rediger er valgt, køres dette udtryk, og der gøres forsøg på at gå til skærmbilledet EditScreen1.

   

4. Vælg IconEdit1 i ruden Trævisning, og vælg derefter Slet. Dette ikon er ikke længere påkrævet.

5. Vælg IconDelete1, og vælg derefter Slet. Dette ikon bruges til at slette den aktuelle del, og det er heller ikke påkrævet.

   

6. Bemærk, at teksten Deldetaljer ikke kan læses i skærmoverskriften, og at der i stedet viser Power Apps Studio en fejlmeddelelse. Det er sket, fordi bredden på det label-kontrolelement, der viser teksten, er beregnet. I ruden Trævisning vælges LblAppName2. Undersøg egenskaben Width. Værdien for denne egenskab er resultatet af udtrykket Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Rediger udtrykket for egenskaben Width til Parent.Width - Self.X. Fejlen bør forsvinde, og teksten med Deldetaljer skal vises igen i skærmoverskriften.

8. I ruden Trævisning vælges BrowseScreen1. På dette skærmbillede vises også en fejlmeddelelse. Ikonet + på værktøjslinjen (IconNewItem1) giver brugeren mulighed for at tilføje en ny del. Egenskaben OnSelect for dette ikon henviser til skærmbilledet EditScreen1.

   

9. Vælg IconNewItem1, og vælg derefter Slet. Som før forsvinder teksten i overskriften for skærmen, og der vises en fejlmeddelelse af samme årsag.

10. Rul ned i ruden Trævisning, og vælg LblAppName1 under BrowseScreen1. Rediger udtrykket for egenskaben Width ved at fjerne referencen til IconNewItem1.Width. Det nye udtryk skal være Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Der er stadig et problem med overskriften. Selvom teksten i Gennemse dele vises igen, vises der en fejl, og ikonerne til opdatering og sortering er det forkerte sted. I ruden Trævisning vælges IconSortUpDown1. Find egenskaben X for dette kontrolelement. Denne egenskab bestemmer den vandrette placering af ikonet i overskriften. Den beregnes i øjeblikket på baggrund af bredden på kontrolelementet IconNewItem1.

    

12. Rediger udtrykket for egenskaben X til Parent.Width - Self.X.

13. I ruden Trævisning vælges IconRefresh1. Rediger udtrykket for egenskaben X til Parent.Width - IconSortUpDown1.Width - Self.Width. Fejlene bør alle forsvinde.

Opret og gem appen

Nu kan du gemme og teste appen.

1. Vælg Fil>Gem som.

2. Vælg Gem som vælges Skyen, og navnet VanArsdelApp angives, og derefter vælges Gem.

   

3. Vælg Pil tilbage for at vende tilbage til Start-skærmen.

   

4. Vælg F5 for at få vist et eksempel på appen. På siden Gennemse dele skal du vælge den rette klammeparentes (>) til højre for en del på siden. Skærmbilledet Detaljer for den del vises.

   

5. Vælg den venstre klammeparentes (<) i skærmoverskriften Detaljer for at vende tilbage til skærmbilledet Gennemse.

6. Angiv tekst i feltet Søg på skærmbilledet Gennemse dele. Når du skriver, filtreres elementerne, så de kun vises med den tilsvarende tekst i felterne Navn, CategoryID eller Oversigt.

   

7. Luk vinduet med forhåndsversionen, og vend tilbage til Power Apps Studio.

Punkt 2: Feltvidenbase

Hvis brugeren skal have adgang til videnbasen, bruger den en simpel brugergrænseflade, hvor brugeren angiver en søgeord, og i appen vises alle artikler i videnbasen, der omtaler begrebet. Maria ved, at denne proces vil omfatte Azure Cognitive Search, men der er ikke brug for - eller ønsker - at forstå, hvordan den fungerer. Derfor beslutter Maria sig for på et senere tidspunkt at give den grundlæggende brugergrænseflade og arbejde sammen med Kiana for at tilføje den faktiske funktionalitet.

Det besluttes, at der skal oprettes et nyt skærmbillede baseret på den skabelon Liste, der findes i Power Apps Studio.

1. På Power Apps Studio Start-skærmværktøjslinjen vælges Ny skærm, og derefter vælges Liste.

   

2. Vælg den etiket, hvor teksttitlen vises, i [Overskrift]. Rediger egenskaben Text til "Forespørgsel" (inkluder anførselstegn).

   

3. Vælg plustegnet (+) i skærmoverskriften, og vælg derefter Slet. Ikonet + skal gøre det muligt for brugeren at føje flere elementer til listen. Vidensbasen er kun til forespørgsel, så denne funktion er ikke nødvendig.

   

   Bemærk, at hvis du fjerner dette ikon, opstår der en fejl i overskriften på grund af den måde, som placeringen og bredden på de andre elementer beregnes på. Du så det tidligere med skærmbilledet lagerstyring, og løsningen er den samme som beskrevet i følgende trin.

4. Rul ned til sektionen Screen1 i ruden LblAppName3, og vælg Trævisning. Skift egenskaben Width til formlen Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. I ruden Trævisning vælges IconSortUpDown2. Rediger egenskaben X til formlen Parent.Width - IconSortUpDown2.Width.

6. I ruden Trævisning vælges IconRefresh2. Rediger egenskaben X til formlen Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Derved løses alle fejl ved hjælp af skærmen.

7. Vælg Fil>Gem.

8. I feltet Versionsnote angives teksten Tilføjet videnbase UI og der vælges Gem.

9. Vend tilbage til Start, og vælg F5 for at få vist et eksempel på det nye skærmbillede. Den bør se ud som nedenstående billede.

   

   Bemærk, at hvis du vælger ikonet > ud for et af dummy-objekterne, fungerer funktionaliteten med detaljer ikke i øjeblikket. Du tager fat i dette senere, når du integrerer Azure Cognitive Search i appen.

10. Luk vinduet med forhåndsversionen, og vend tilbage til Power Apps Studio.

Punkt 3: Feltplanlægning og noter

Maria arbejder sammen med Malik, kontorreceptionisten, som designer grænsefladen til den del af appen, der skal bruges til planlægning og aftaler i marken. Malik finder en Excel-projektmappe med eksempeldata, som Maria kan bruge til at bygge aftaleskærmbilledet. Projektmappen indeholder en tabel med følgende kolonner:

• ID (aftalens id)
• Kunde-id (et entydigt id for kunden)
• Kundenavn
• Kundeadresse
• Problemdetaljer (en tekstbeskrivelse af det problem, kunden oplever)
• Nummer på kontakt
• Status
• Aftaledato
• Aftaletidspunkt
• Noter (en tekstbeskrivelse, hvor eventuelle noter tilføjes af teknikeren)
• Billede (et billede af anlægget mens det fungerer efter reparation, eller som et ekstra billede, der viser operatørens noter)

Bemærk

På samme måde som med data om administration af feltlageret indeholder denne projektmappe en denormaliseret visning af dataene. I det eksisterende aftalesystem gemmes disse data i separate tabeller, der indeholder aftaledata og kundedata.

Maria gemmer denne fil en OneDrive-konto med navnet Appointments.xlsx. Når hun husker, at hun tidligere har brugt standardnavnet til tabellen i projektmappen og har skullet ændre titlen på de forskellige skærmbilleder, der blev oprettet, omdøber Maria tabellen i projektmappen til Aftaler.

Bemærk

Denne projektmappe findes i mappen Aktiver i Git-lageret til denne vejledning.

Maria ønsker at oprette en aftalesektion i appen direkte fra Excel-filen. Maria beslutter sig for at følge en lignende fremgangsmåde som for funktionaliteten for lagerstyring i felten med den undtagelse, at denne gang kan teknikeren oprette og redigere aftaler.

Maria beslutter i første omgang at oprette aftaleskærmbillederne som en separat app. På denne måde kan Maria bruge Power Apps Studio til at oprette meget af appen automatisk. Power Apps Studio kan i øjeblikket ikke lade dig oprette flere skærmbilleder fra en dataforbindelse i en eksisterende app. Når Maria har oprettet og testet skærmene, kopierer hun dem til appen Field Inventory og appen Videnbase.

Bemærk

En alternativ fremgangsmåde er at føje tabellen Aftaler i Excel-filen som endnu en datakilde til den eksisterende app og derefter oprette skærmbillederne for aftaler. Maria har valgt at oprette de nye skærme fra projektmappen og kopiere skærmbillederne. Maria er i øjeblikket mere fortrolig med begreberne kopi og sæt ind end at bygge skærme manuelt og hun vil efterhånden lære at oprette skærmbilleder fra bunden, efterhånden som processen med at bygge denne app skrider frem.

Sådan oprettes aftaleappen

1. I menulinjen Power Apps Studio vælges Filer.

   

2. Vælg Ny i venstre rude. I hovedfeltet vælges feltet OneDrive for Business - Telefonlayout.

   

3. Vælg Appointments.xlsx i ruden Forbindelser.

   

4. Vælg tabellen Aftaler i Excel-filen, og vælg derefter Opret forbindelse.

   

5. Vent, mens appen genereres. Når den nye app vises, indeholder den skærmene Gennemse, Detaljer og Rediger ved hjælp af standardtemaet.

   

6. Vælg Image1 i sektionen BrowseScreen1 under BrowseGallery1 i ruden Trævisning, og vælg derefter Slet. Skærmbilledet Gennemse skal blot vise aftaler og ikke de billeder, der er knyttet til dem.

   

   Bemærk, at hvis du fjerner kontrolelementet Image1, opstår der flere fejl på skærmen, fordi både bredden og placeringen af kontrolelementet Title1 refererer til Billede-kontrolelementet. Du kan løse disse problemer i følgende trin.

7. Rul ned i ruden Trævisning, og vælg Title1 under BrowseGallery1. Ret værdien i egenskaben X til 16. Rediger formlen i egenskaben Width til Parent.TemplateWidth - 104. Derved løses alle fejl ved hjælp af skærmen.

8. Rul ned i ruden Trævisning, og vælg Body1 under BrowseGallery1. I dette kontrolelement vises detaljerne om kundens kontaktpersontelefon i øjeblikket. Ret værdien i egenskaben Text til ThisItem.'Customer Name' (inkluder de enkelte anførselstegn).

   

   I oplysningerne på skærmbilledenavnet Gennemse vises nu kundenavnet.

9. I ruden Trævisning vælges BrowseGallery1. Brug formellinjen til at undersøge udtrykket i egenskaben Items. Kontrolelementet søger efter aftaler ved hjælp af aftaledato, klokkeslæt og kontaktnummer. Rediger denne formel for at søge i kundenavnet i stedet for kontaktnummeret:

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   Bemærk, at aftalerne bestilles efter dato og klokkeslæt (de første to felter vises).

10. I ruden Trævisning slettes IconNewItem1. Kun det lokale miljø medarbejdere kan reservere nye aftaler for teknikere. Bemærk, at denne handling resulterer i fejl i formularen, fordi bredden og placeringen af andre kontrolelementer i overskriften refererer til det ikon, du netop har fjernet.

11. I ruden Trævisning vælges LblAppName1. Rediger formlen for egenskaben Width. til Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. I ruden Trævisning vælges IconRefresh1. Rediger værdien for egenskaben X til Parent.Width - IconSortUpDown1.Width - Self.Width.

13. I ruden Trævisning vælges iconSortUpDown1. Rediger værdien for egenskaben X til Parent.Width - Self.X.

14. Vælg BrowseScreen1 i ruden Trævisning, og vælg derefter ellipseknappen (...). Vælg Omdøb på den rulleliste, der vises, og rediger navnet på skærmen til BrowseAppointments.

    

15. Brug samme teknik til at ændre navnet på kontrolelementet BrowseGallery1 til BrowseAppointmentsGallery.

Skærmbilledet Gennemse er fuldført.

Sådan oprettes skærmbilledet med detaljer

Du kan nu vende din opmærksomhed mod skærmbilledet Detaljer.

1. Rul ned i ruden Trævisning, og vælg DetailScreen1. Du kan se, at detaljerne vises i alfabetisk rækkefølge efter feltnavne, og nogle nyttige oplysninger, f.eks. feltet Noter, vises slet ikke.

   

2. I ruden Trævisning vælges DetailForm1. På fanen Egenskaber i ruden til højre skal du vælge Rediger felter ud for etiketten Felter. Markér hvert af følgende felter i den midterste rude, og vælg derefter Slet:

   • Aftaledato
   • Aftaletidspunkt
   • Kunde-id
   • Id

3. Vælg + Tilføj felt, og tilføj følgende felter:

   • Noter
   • Problemdetaljer
   • Status

   

4. Træk de enkelte felter, så de vises i følgende rækkefølge, fra top til bund:

   • Kundenavn
   • Kundeadresse
   • Nummer på kontakt
   • Problemdetaljer
   • Status
   • Bemærkninger
   • Image

5. I ruden Trævisning vælges Notes_DataCard1. Rediger egenskaben Height til 320.

   

6. I ruden Trævisning slettes IconDelete1. Teknikere skal ikke kunne fjerne aftaler fra systemet.

7. Vælg LblAppName2, og udskift egenskaben Width med Parent.Width - Self.X - IconEdit1.Width.

8. Skift navnet på DetailsScreen1 til AppointmentDetails ved hjælp af den teknik, der er beskrevet tidligere.

Redigere redigeringsskærmen

Det sidste skærmbillede, du skal se på, er Redigér-skærmbilledet.

1. I ruden Trævisning vælges EditScreen1.

2. Vælg EditForm1 i sektionen EditScreen1 i ruden Trævisning. På fanen Egenskaber i ruden til højre skal du vælge Rediger felter ud for etiketten Felter.

3. Fjerne følgende felter:

   • Kundeadresse
   • Id
   • Kunde-id
   • Aftaledato
   • Aftaletidspunkt

4. Tliføje følgende felter:

   • Problemdetaljer
   • Status
   • Noter

5. Træk de enkelte felter, så de vises i følgende rækkefølge, fra top til bund:

   • Kontaktnavn
   • Kundenummer
   • Problemdetaljer
   • Status
   • Noter
   • Billede

6. Markér feltet Kundenavn, og udvid det for at få vist egenskaberne. Skift Kontroltypen til Visning af tekst. Denne ændring gør kontrolelementet skrivebeskyttet. Det er praktisk at se kundens navn på Redigér-redigeringsskærmbilledet, men en tekniker bør ikke kunne ændre det.

   

7. Markér feltet Kontaktnummer, og udvid det for at få vist egenskaberne. Skift Kontroltypen til Visning af tekst. Dette felt skal også være skrivebeskyttet.

8. Markér feltet Noter, udvid det, og rediger Kontroltype til Rediger tekst med flere linjer. Denne indstilling gør det muligt for teknikeren at tilføje detaljerede noter, der kan strække sig over flere linjer.

9. Markér feltet Status, udvid det, og rediger Kontroltype til Tilladte værdier.

10. I ruden Trævisning vælges Status_DataCard5. På fanen Egenskaber i ruden til højre skal du vælge Lås op for at ændre egenskaber. Rul ned til egenskaben AllowedValues, og skift teksten til ["Fast", "Dele bestilt", "Uløst"] (medtag de firkantede klammeparenteser). Feltteknikeren kan kun angive Status til en af disse definerede værdier.

    

11. Omdøb EditScreen1 til EditAppointment i ruden Trævisning.

Nu kan du gemme og teste appen.

1. Vælg Fil>Gem som.

2. Under Gem som vælges Skyen, og navnet VanArsdelAppointment angives, og derefter vælges Gem.

3. Vælg Pil tilbage i Power Apps Studio-værktøjslinej for at vende tilbage til Start-skærmen.

4. Vælg F5 for at få vist et eksempel på appen. På siden Aftaler vælges >-ikonet ved siden af en aftale. Skærmbilledet Detaljer for aftalen vises. Vælg Rediger i overskriften for at opdatere aftalen. Kontrollér følgende:

   • Felterne kundenavn og kontaktnummer er skrivebeskyttet.
   • Statusfeltet er begrænset til værdierne på rullelisten.
   • Du kan angive noter på flere linjer.
   • Du kan overføre en billedfil til billedfeltet.

   Bemærk

   En forbedring, som du tilføjer senere, giver dig mulighed for at tage et billede med din telefon fra appen og føje det til billedfeltet.

   

Kombinere skærmbillederne i en enkelt app

Maria har udviklet to apps, men hun vil kombinere dem til en enkelt app. For at gøre dette kopierer Maria skærmbillederne for aftaleappen til appen field inventory management og knowledge base på følgende måde:

1. Åbn et nyt browservindue, og log på Power Apps Studio med dine kontooplysninger.

2. Vælg Apps i venstre rude, vælg VanArdselApp og vælg derefter Rediger.

   

3. I værktøjslinjen vælges Ny skærm, og derefter Blank. Du kan bruge denne handling til at føje et nyt skærmbillede til den app, hvor du vil kopiere kontrolelementerne til skærmbilledet Gennemse for appen VanArsdelAppointments.

   

4. Det nye skærmbillede får navnet Screen2. Omdøb det til BrowseAppointments i ruden Trævisning.

5. Gentag det forrige trin to gange for at tilføje yderligere to tomme skærmbilleder (Screen3 og Screen4).

6. Omdøb Screen3 som AppointmentDetails, og omdøb Screen4 som EditAppointment.

7. I venstre værktøjslinje på Power Apps Studio vælges ikonet Data. Vælg Tilføj data i ruden Data. I rullelisten Vælg en datakilde i feltet Søg angives OneDrive, og der vælges OneDrive for Business.

   

8. Vælg Excel-filen Appointments.xlsx, og vælg derefter Aftaler og Opret forbindelse.

9. Skift til det browservindue, der viser appen VanArsdelAppointments.

10. Vælg Tema på værktøjslinjen (du skal muligvis udvide værktøjslinjen for at få vist flere elementer) og vælg derefter Område-temaet. Dette er det samme tema, der bruges i appen VanArsdel.

11. Vælg ikonet Trævisning på venstre værktøjslinje, vælg skærmbilledet BrowseAppointments, og vælg derefter Ctrl+A. Du kan bruge denne handling til at vælge alle kontrolelementer på skærmen.

12. Vælg Ctrl+C for at kopiere disse kontrolelementer til Udklipsholder.

13. Skift til det browservindue, der viser appen VanArsdelApp.

14. Vælg ikonet Trævisning på venstre værktøjslinje, og vælg derefter skærmbilledet BrowseAppointments.

15. Vælg Ctrl+V for at indsætte kontrolelementerne på den valgte skærm.

    Bemærk

    Undertiden vises skærmoverskriften en anelse for lav ned. Du kan løse dette problem ved at vælge kontrolelementerne IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 og RectQuickActionBar1_1 i ruden Trævisning (hold Skift nede, mens du klikker på for at vælge mere end ét kontrolelement ad gangen), og brug derefter muse- eller piletasterne til at flytte dem op i ruden med designvisningen.

16. Skift tilbage til det browservindue, der viser appen VanArsdelAppointments, og vælg og kopiér derefter kontrolelementerne i skærmbilledet AppointmentDetails til Udklipsholder (Ctrl+A efterfulgt af Ctrl+C).

17. Vend tilbage til det browservindue, der viser VanArsdelApp, vælg skærmbilledet AppointmentDetails, og indsæt derefter kontrolelementerne (Ctrl+V). Juster placeringen af kontrolelementerne i skærmoverskriften, hvis det er nødvendigt.

    Bemærk

    Du får vist en fejl, der rapporteres i headeren på skærmbilledet AppointmentDetails. Denne fejl opstår, fordi skærmen refererer til kontrolelementer i skærmbilledet EditAppointment, som endnu ikke er kopieret. Denne fejl løses ved hjælp af de næste trin.

18. Skift tilbage til det browservindue, der viser appen VanArsdelAppointments, og vælg og kopiér derefter kontrolelementerne i skærmbilledet EditAppointment til Udklipsholder.

19. Vend tilbage til det browservindue, der viser appen VanArsdelApp, vælg skærmbilledet EditAppointment, og indsæt derefter kontrolelementerne. Igen, flyt kontrolelementerne i skærmoverskriften, hvis det er nødvendigt.

20. Vælg skærmbilledet AppointmentDetails i ruden Trævisning, og kontrollér, at den fejl, der er angivet tidligere, nu er klar.

21. I ruden Trævisning vælges BrowseScreen1. Omdøb dette skærmbillede som BrowseParts.

22. Omdøb skærmbilledet DetailsScreen1 som PartDetails.

23. Omdøb skærmbilledet Screen1 til Videnbase.

    Bemærk

    Det er en god ide at omdøbe skærmbilleder, så de afspejler deres funktion i stedet for at bruge de standardnavne, der oprettes af Power Apps Studio - især hvis der er flere skærmbilleder i en app. Derved kan du undgå forvirring på et senere tidspunkt, hvis appen ændres af en anden udvikler.

Tilføjelse af en startskærm til appen

Den sidste fase er at føje en Start-skærm til appen. På Start-skærmen kan teknikeren flytte mellem de forskellige dele af appen (lagerstyring, videnbase og aftaler).

1. Vælg Ny skærm i appen på værktøjslinen i appen VanArsdelApp, og vælg derefter Blank.

2. Omdøb Screen2 til Start i ruden Trævisning.

3. Vælg Indsæt på værktøjslinjen. Udvid Medier på listen over kontrolelementer, og vælg derefter Billede. Kontrolelementet føjes til skærmen.

   

4. Indstil Z-placeringen for kontrolelementet til 16, og Y-placeringen til 22. Rediger Bredde til 605 og Højde til 127. Skift billedplacering til Udfyld.

   

5. Mens du stadig er under fanen Egenskaber, skal du vælge + Tilføj en billedfil på rullelisten Billede og derefter overføre VanArsdelLogo.png til kontrolelementet.

   Bemærk

   Billedfilen findes i mappen Aktiver i Git-lageret til denne vejledning.

   

6. Tilføj fire kontrolelementer med Tekstmærkat til formularen på listen over kontrolelementer, og anbring dem, så de er stablet ind under VanArsdel-logoet.

   

7. Markér det øverste kontrolelement Tekstmærkat. Skift egenskaben Text til Næste aftale under fanen Egenskaber i højre rude. Angiv Skriftstørrelsen til 30, og brug farvevælgeren til at angive skriftfarven til grøn (så den stemmer overens med logoet).

   

8. Markér nr. to kontrolelement Tekstmærkat. Ret værdien i egenskaben Text til First(Appointments).'Customer Name' (inkluder de enkelte anførselstegn). Denne formel henter kundenavnet fra første række i aftaletabellen.

   

   Bemærk

   Denne formel fungerer i øjeblikket blot som en pladsholder. Du skal ændre etiketten senere, så den næste aftale for teknikeren hentes, i stedet for altid at vise den første.

9. Markér det tredje kontrolelement for Tekstmærkat, og angiv egenskaben Text til First(Appointments).'Appointment Date'.

10. Indstil egenskaben Text for det fjerde kontrolelement til First(Appointments).'Appointment Time'. Angiv egenskaben Font size til 30.

11. Tilføj et Rectangle-kontrolelement på listen over kontrolelementer. Angiv følgende egenskaber for dette kontrolelement:

    • Visningstilstand: Vis
    • X: 0
    • Y: 632
    • Width: 635
    • Højde: 1

    Dette kontrolelement fungerer som en visuel separator midt på skærmen.

12. Tilføj tre Knap-kontrolelementer på skærmen, som er arrangeret lodret og jævnt placeret under separatoren. Angiv egenskaben Text for den øverste knap til Aftaler, egenskaben Text for den midterste knap til Dele og egenskaben Text for den nederste knap til Videnbase.

    

13. Vælg knappen Appointments. Rediger udtrykket i handlingen OnSelect til formlen Naviger(BrowseAppointments, ScreenTransition.Samme). Denne handling ændrer visningen til aftaleskærmbilledet, når brugeren vælger knappen.

    

14. Angiv handlingen OnSelect for knappen Dele, der skal Navigate(BrowseParts, ScreenTransition.Fade).

15. Angiv handlingen OnSelect for knappen Videnbase, der skal Navigate(Knowledgebase, ScreenTransition.Fade).

Ud over at navigere fra start-skærmen til de andre skærmbilleder i systemet skal skærmbillederne Aftaler, Dele og Videnbase gøre det muligt for brugeren at vende tilbage til Start-skærmen. Maria beslutter sig for at føje tilbage-knapper til disse skærmbilleder.

1. I ruden Trævisning vælges BrowseParts.

2. Vælg kontrolelementet RectQuickActionBar1 for at give det fokus.

3. Vælg Indsæt menuen, og vælg Tilføj ikon. Flyt ikonet til venstre for kontrolelementet RectQuickActionBar1. Bemærk, at ikonet viser en del af etiketten Gennemse dele.

   

4. Skift navnet på det nye ikonkontrolelement til IconReturn1 i menuen Trævisning.

5. Rediger formlen i handlingen OnSelect til udtrykket Back(ScreenTransition.Fade). Back-funktionen navigerer brugeren til det forrige skærmbillede, de har besøgt.

6. Skift under fanen Egenskaber ikonet egenskaber til <Venstre.

7. Vælg etiketten Gennemse dele i skærmoverskriften. Skift egenskaben X til IconReturn1.Width + 20. Etiketten Gennemse dele bør ikke længere være delvist skjult.

   

8. Når du følger den proces, der beskrives i trin 16-22, skal du føje et ikon med navnet IconReaction2 til kontrolelementet RectQuickActionBar3 i skærmbilledet Videnbase.

9. Føj på samme måde et ikon med navnet IconReturn3 til kontrolelementet RectQuickActionBar1_1 i skærmbilledet BrowseAppointments.

10. I ruden Trævisning vælges App. Skift egenskaben StartScreen til udtrykket Startside. Denne handling sikrer, at Start-skærmen vises, når appen starter:

    

    Bemærk

    Hvis du ikke angiver, hvilket skærmbillede der skal vises, når appen startes, bruges det skærmbillede, der vises øverst i ruden Trævisning. Hvis du vil flytte et skærmbillede til starten af listen, skal du højreklikke på skærmen i ruden i Trævisning og vælge Flyt op, indtil den er øverst.

Til sidst kan du teste appen.

1. Vælg Fil>Gem. Angiv Komplet version med startskærmbilledet i feltet Versionsnoter, og vælg derefter Gem.

2. Vælg pil tilbage for at vende tilbage til Start-skærmen, og vælg derefter F5 for at køre appen.

3. Kontrollér, at Start-skærmen for appen vises.

4. Vælg Aftaler. Skærmbilledet for aftaler vises.

5. Vælg Pil tilbage for at vende tilbage til Start-skærmen.

6. Vælg Dele. Delebrowseren vises.

7. Vælg Pil tilbage for at vende tilbage til Start-skærmen.

8. Vælg Videnbase. Skærmbilledet med forespørgsel i videnbasen vises.

9. Vælg Pil tilbage for at vende tilbage til Start-skærmen.

10. Luk vinduet med forhåndsversionen, og vend tilbage til Power Apps Studio.

Nu er flowet færdigt.

TidligereNæste