Kapitel 3: Skapa en lågkodsprototyp

Anteckning

Kapitel 2 refererade till den mobilapp som används av fälttekniker och ingenjörer och datorapp som används av lokal personal. Följande kapitel fokuserar på design, implementering och lansering av mobilapparna som är byggda med Power Apps. Datorappar lämnas som en övning till läsaren.

Kiana är skeptisk till lösningar med låg kod och Power Apps. Kiana och Maria bestämmer sig trots det för att skapa ett program tillsammans för att hjälpa fältteknikerna att kontrollera lager (samt beställa delar, om så behövs), fråga kunskapsbasen och kontrollera deras nästa möte medan de är borta från kontoret i samband med serviceanrop. Kiana och Maria planerar att använda den här upplevelsen för att utforska hur du lägger till kontroller och använder formeln i Power Apps.

Att skapa en inledande lågkodsprototyp är vanligtvis visserligen en uppgift för civila utvecklare, men Kiana bestämmer sig trots det för att vara uppmärksam på processen för att försäkra sig om att hon förstår hur programmet konstrueras. Kiana behöver den här informationen för att hjälpa Maria att integrera verkliga datakällor, webb-API:er och andra tjänster som krävs i programmet.

Artikel 1: Lagerhantering på fält

Marias ursprungliga syfte är att skapa ett program med en lista över delar som användaren kan visa i alla detaljer. Användaren bör också kunna beställa en del. Den här ursprungliga versionen av programmet kommer dock bara att vara en prototyp och kommer inte att ha fastnat i serverdelen ännu. Efter att ha fått feedback från Caleb, som är första fälttekniker, kommer Maria att samarbeta med Kiana för att integrera arbetsyteappen med lagersystemet som körs lokalt.

Maria är mycket bekant med det befintliga lagerhanteringssystemet och förstår den information det innehåller. Maria börjar med att skapa en Excel-arbetsbok som innehåller tabeller med låtsasinformation om vissa exempeldelar. Fälten i tabellen är ID, Namn, CategoryID, Pris, Översikt, NumberInStock och Bild (en URL som refererar till en bild av delen). Denna arbetsbok kan användas för att skapa och testa arbetsyteappen och se till att den visar rätt data på rätt sätt. Maria lagrar den här arbetsboken på ett OneDrive-konto kallat BoilerParts.xlsx.

Anteckning

Du hittar en kopia av den här arbetsboken i mappen Tillgångar i Git-lagringsplats för denna guide.

Om du är relationsdatabasdesigner har du märkt att Excel-arbetsboken har en avnormaliserad vy av dessa data. I en relationsdatabas är CategoryID troligen en numerisk identifierare som refererar till en separat tabell som innehåller information om kategorin, inklusive namnet.

Anteckning

URL:erna i kolumnen Bild är för närvarande bara platshållare. I det slutförda programmet ersätts URL:erna med adresserna till riktiga bildfiler.

Skapa programmet med Power Apps genom att följa stegen.

1. Logga in på Power Apps.

2. På sidan Start under Starta från data, välj Excel Online.

   

3. På sidan Anslutningar välj OneDrive för företag och välj sedan Skapa.

   

4. På sidanOneDrive för företag välj filen BoilerParts.xlsx.

   

5. Markera tabellen i Excel-filen (Maria skapade tabellen med standardnamnet Tabell 1) och väljer sedan Anslut.

   

6. Vänta medan Power Apps genererar programmet.

   

7. När programmet har skapats visas skärmen Bläddra med fälten CategoryID, ID och Bild från varje rad i reservdelstabellen i arbetsboken.

   

8. Fälten som visas för närvarande är inte särskilt användbara om du vill hjälpa en tekniker att välja en produkt. I fönstret där skärmen Bläddra visas markerar du etiketten för Värmeväxlare på den första dataraden. Markera egenskapen Text i listrutan i formelfältet. Ändra värdet för egenskapen till ThisItem.Name. Texten i det första fältet på varje rad växlas för att visa delnamnet.

   Anteckning

   I följande bild har etiketten Värmeväxlare som ursprungligen visades i formuläret ändrats till produktens namn 3,5 W/S värmare.

   

9. Upprepa föregående steg för etiketterna ID och Bild. Ändra egenskapen Text för fältet ID till CategoryID och egenskapen Text för fältet Bild till Översikt. Skärmen Bläddra ska nu se ut som följande bild, som en fältingenjör är mer benägna att hitta användbar för att välja delar.

   

10. Sökfunktionen på skärmen Bläddra används som standard i de fält som valdes när skärmen skapades—i det här fallet CategoryID och ID och Bild. Resultatet sorteras efter CategoryID. Det är meningsfullt att växla detta till fälten Namn, CategoryID och Översikt, med resultat sorterade efter Namn. Välj kontrollen BrowseGallery1 i rutan Trädvy. I rullgardinsmenyn till vänster i formelfältet väljer du egenskapen Items. Dra formelfältets nedre kant nedåt så att formeln blir helt synlig. Formeln innehåller följande uttryck:

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

    

11. Ändra uttrycket Sök refererar till fälten Namn, CategoryID och Översikt med hjälp av följande formel:

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

12. Rubriken i formulärhuvudet är inte användbar och standardinställningen stämmer inte överens med VanArsdels företagsimage. På skärmen Bläddra, välj etiketten Table1 och i fältet Formel ändra egenskapen Text för etiketten "Bläddra delar" (ta med dubbla citattecken i värdet).

13. I verktygsfältet, välj Tema (du kan behöva expandera verktygsfältet för att visa fler objekt) och välj temat Skog. Färgerna och stilen på skärmen Bläddra ändras så att de stämmer överens med temat.

    

Gör informationsskärmen mer användbar

Du har skapat grundappen och ändrat skärmen Bläddra för att visa fält som en tekniker kan använda för att identifiera en del. Appen innehåller även en skärmen information som visar all information för en vald del. Fälten på den här skärmen visas för närvarande inte i en logisk sekvens, så du bör ordna om dem. Du kan också ta bort ID-fältet från den här skärmen eftersom den här informationen är irrelevant för en tekniker.

1. Bläddra nedåt i trädvyrutan och välj DetailScreen1. På den här skärmen visas information om den del som en användare väljer på skärmen Bläddra.

   

2. I rubriken för Detaljer i det mittersta fönstret, välj etikett Table1. I högra rutan, välj fliken Egenskaper ändra egenskapen Text till delinformation.

   Anteckning

   I många fall kan du uppnå samma resultat genom att använda formelfältet som rutan Egenskaper. Vissa egenskaper som endast är tillgängliga via rutan Egenskaper.

   

3. I rutan Trädvy, under DetailScreen1 och välj DetailForm1. I den högra rutan, på fliken Egenskaper, välj Redigera fält bredvid Fält. I mittenfönstret markerar du och drar fälten så att de visas i följande ordning, från början till nedersta:

   • Namn
   • CategoryID
   • Översikt
   • Pris
   • NumberInStock
   • Image
   • ID

   

4. Välj ID-fältet, markera den ellips som visas till höger om fältet och välj Ta bort från den nedrullningsbara menyn som visas. Den här åtgärden tar bort ID-fältet från formuläret.

   

5. I rutan Trädvy under DetailForm1, välj CategoryID_DataCard1. Det här elementet är DataCard-kontroll som visar namnet på ett fält (kallas nyckel) och dess värde.

   

   I högra rutan, välj fliken Avancerat, välj Lås upp för att ändra egenskaper. I avsnittet Data, ändra fältet DisplayName till "Kategori" (ta med citattecken).

   Anteckning

   Precis som på fliken Egenskaper är även många av egenskaperna på fliken Avancerat tillgängliga via formelfältet. Om du vill ange dessa egenskaper kan du använda formelfältet om du vill.

   

6. Upprepa föregående steg om du vill ändra nyckel för NumberInStock_DataCard1 till "Antal i lager" (ta med citattecken).

7. Du måste justera formateringen i fältet Pris så att data visas som ett valutavärde. I rutan Trädvy, under DetailForm1, under Price_DataCard1, välj DataCardValue7. Det här är fältet som visar värdet för fältet Pris. I fönstret DataCardValue7 till höger, på fliken Avancerat, ändra egenskapen Text till Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Uttrycket Parent.Default refererar till det dataobjekt som den överordnade kontrollen (DataCard) är bunden—i det här fallet kolumnen Pris. Funktionen Text omformaterar detta värde med det format som anges som det andra argumentet; i detta exempel är detta den lokala valutan med två decimaler.

8. Bilddatakort bör visa en bild av delen i stället för URL-adressen för bildfilen. I rutan Trädvy, under DetailForm1, under Bild_DataCard1, välj DataCardValue3 och välj Ta bort om du vill ta bort kontrollen.

9. Välj Image_DataCard1. I den vänstra rutan väljer du + infoga. I rutan Infoga, expandera Media och välj sedan Bild.

   

10. Gå tillbaka till rutan Trädvy och kontrollera att textkontrollen Image1 har lagts till i kontrollen Bild_DataCard1.

    

11. I fönstret Trädvy väljer du Image_DataCard1. I den högra rutan, på fliken Avancerat, ändra Höjd till 500, så att det finns tillräckligt med utrymme för att en bild ska visas.

    

12. I fönstret Trädvy väljer du skärmen Image1. Ange följande egenskaper:

    • Bild: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Bredd: 550
    • Höjd: 550

    Anteckning

    Den bild som visas är för närvarande tom eftersom URL:en i Excel-arbetsboken endast är en platshållare. Du kommer att lösa problemet och hämta en riktig URL när du binder programmet till ett webb-API i ett senare kapitel.

Appen innehåller även en skärm för Redigering som gör att användaren kan ändra informationen för en del. En tekniker bör inte kunna ändra detaljinformation för en del, skapa nya delar eller ta bort delar från katalogen.

1. I fönstret Trädvy väljer du skärmen EditScreen1. Markera den ellips-knappen och välj sedan Radera för att ta bort denna skärm.

   

2. I fönstret Trädvy väljer du skärmen DetailsScreen1. Observera att Power Apps Studio visar ett felmeddelande för den här skärmen. Felet beror på att DetailsScreen1 innehåller uttryck som refererar till EditScreen1 som inte längre finns.

3. I rubriken på DetailsScreen1, välj (IconEdit1). Egenskapen OnSelect för den här kontrollen innehåller uttrycket EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). När ikonen Redigera är markerad körs det här uttrycket och försök att gå till EditScreen1 screen.

   

4. I rutan Trädvy, välj IconEdit1 och välj sedan Ta bort. Denna ikon krävs inte längre.

5. Välj IconDelete1 och välj sedan Ta bort. Den här ikonen används för att ta bort den aktuella delen och är inte heller nödvändig.

   

6. Lägg märke till texten Delinformation har försvinner från skärmrubriken och Power Apps Studio i stället visas ett felmeddelande. Detta beror på att bredden på Etikett-kontrollen som visar texten är beräknad. I fönstret Trädvy väljer du skärmen LblAppName2. Undersök egenskapen Bredd. Värdet för den här egenskapen är resultatet av uttrycket Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Ändra uttrycket för egenskapen Bredd till Parent.Width - Self.X. Felet bör försvinna och delinformationen text ska visas i skärmhuvudet.

8. I fönstret Trädvy väljer du skärmen BrowseScreen1. På den här skärmen visas också ett felmeddelande. Ikonen + verktygsfältet (IconNewItem1) gör att användaren kan lägga till en ny del. Egenskapen OnSelect för den här ikonen refererar till skärmen EditScreen1.

   

9. Välj IconNewItem1 och välj sedan Ta bort. Precis som tidigare försvinner texten i sidhuvudet för skärmen och ett felmeddelande visas och av samma orsak.

10. I rutan Trädvy, under BrowseScreen1 och välj LblAppName1. Ändra uttrycket för egenskapen Bredd genom att ta bort referensen till IconNewItem1.Width. Det nya uttrycket ska vara Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Det finns fortfarande ett problem med rubriken. Även Bläddra delar text har dykt upp igen, ett fel visas och uppdaterings- och sorteringsikonerna är på fel plats. I fönstret Trädvy väljer du skärmen IconSortUpDown1. Leta upp egenskapen X för den här kontrollen. Den här egenskapen bestämmer den vågräta placeringen av ikonen i sidhuvudet. Den beräknas för närvarande utifrån bredden på kontrollen IconNewItem1.

    

12. Ändra uttrycket för egenskapen X till Parent.Width - Self.Width.

13. I fönstret Trädvy väljer du skärmen IconRefresh1. Ändra uttrycket för egenskapen X till Parent.Width - IconSortUpDown1.Width - Self.Width. Alla felen bör försvinna.

Spara och testa programmet

Nu kan du spara och testa programmet.

1. Välj Fil > Spara som.

2. Under Spara som, välj Molnet ange namnet VanArsdelApp och välj Sedan.

   

3. Välj bakåtpilen för att återgå till skärmen Starta.

   

4. Välj F5 om du vill förhandsgranska programmet. På sidan Bläddra delar väljer du hakparentes på höger sida (>) till höger om en del. Skärmen Detaljer för delen visas.

   

5. Välj vänster hakparentes (<) i skärmrubriken Detaljer om du vill gå tillbaka till skärmen Bläddra.

6. På skärmen Bläddra delar ange text i rutan Sök. När du skriver filtreras objekten så att endast de med matchande text visas i fälten Namn, CategoryID eller Översikt.

   

7. Stäng förhandsgranskningsfönstret och återgå till Power Apps Studio.

Objekt 2: fältkunskapsbasen

För åtkomst till kunskapsbasen använder Maria och Caleb (teknikern) ett enkelt gränssnitt där användaren går in i en sökterm och i programmet visas alla kunskapsbasartiklar som benämns. Maria vet att den här processen kommer att innefatta Azure Cognitive Search, men hon behöver inte—eller vill inte ens —förstå hur den fungerar. Därför bestämmer sig Maria för att bara tillhandahålla det grundläggande användargränssnittet och samarbeta med Kiana senare för att lägga till de faktiska funktionerna.

Maria bestämmer sig för att skapa en ny skärm utifrån mallen Lista som är tillgänglig i Power Apps Studio.

1. På verktygsfältet för skärmen Power Apps Studio Start, välj Ny skärm och välj sedan Lista.

   

2. Välj den etikett som visar texten i skärmhuvudet [Title]. Ändra egenskapen Text till "Fråga" (ta med citattecken).

   

3. Välj plustecknet i skärmhuvudet (+) och välj sedan Ta bort. Ikonen + är avsedd att göra det möjligt för användaren att lägga till fler objekt i listan. Kunskapsbasen är endast tillgänglig med frågor, så den här funktionen behövs inte.

   

   Observera att om du tar bort den här ikonen uppstår ett fel i sidhuvudet på grund av hur de övriga objektens plats och bredd beräknas. Du såg detta tidigare med lagerhanteringsskärmen och lösningen är densamma enligt beskrivningen i följande steg.

4. I rutan Trädvy, bläddra ned till avsnittet Screen1 och välj LblAppName3. Ändra egenskapen Bredd till formeln Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. I fönstret Trädvy väljer du skärmen IconSortUpDown2. Ändra egenskapen X till formeln Parent.Width - IconSortUpDown2.Width.

6. I fönstret Trädvy väljer du skärmen IconRefresh2. Ändra egenskapen X till Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Alla fel som visas på skärmen bör åtgärdas.

7. Välj Fil > Spara.

8. I rutan Versionsanteckning, ange texten Tillagt gränssnitt för kunskapsbas och välj sedan Spara.

9. Gå tillbaka till skärmen Start och välj F5 om du vill förhandsgranska den nya skärmen. Det bör se ut som följande bild.

   

   Observera att om du väljer ikonen > bredvid några poster fungerar inte detaljeringsfunktionen för tillfället. Du kommer att lösa det här senare när du integrerar Azure Cognitive Search i programmet.

10. Stäng förhandsgranskningsfönstret och återgå till Power Apps Studio.

Objekt 3: Fältschemaläggning och anteckningar

Maria arbetar med Malik, kontorets receptionist för att utforma gränssnittet för fältschemaläggning och avtalade tider i programmet. Malik förser en Excel-arbetsbok med exempeldata som Maria kan använda för att skapa skärmen för avtalade tider. Arbetsboken innehåller en tabell med följande kolumner:

• ID (ID för avtalad tid)
• Kund-ID (en unik identifierare för kunden)
• Kundnamn
• Kundadress
• Probleminformation (en textbeskrivning av det problem kunden upplever)
• Kontaktnummer
• Status
• Datum för avtalad tid
• Avtalad tid
• Anteckningar (en textbeskrivning med eventuella anteckningar som lagts till av teknikern)
• Bild (ett foto av produkten, antingen i arbetsskick efter reparation eller som för bild för teknikerns anteckningar)

Anteckning

Precis som med fältinventeringshanteringsdata visar den här arbetsboken en avnormaliserad vy över dessa data. I det befintliga systemet för avtalade tider lagras dessa data i separata tabeller med data för avtalade tider och kunddata.

Maria lagrar den här filen på ett OneDrive-konto med namnet Appointments.xlsx. Maria kommer ihåg att standardnamnet för tabellen tidigare använts i arbetsboken och att rubriken fick ändras på de olika skärmarna som skapades. Hon byter därför namn på tabellen i arbetsboken till Avtalade tider.

Anteckning

Den här arbetsboken finns i mappen Tillgångar i Git-lagringsplats för denna guide.

Maria vill skapa avsnittet om avtalade tider i programmet direkt från Excel-filen. Maria bestämmer sig för att följa en liknande metod som för funktionen för fältlagerhantering, förutom att teknikern den här gången kan skapa och redigera avtalade tider.

Maria bestämmer sig för att först skapa skärmarna för avtalade tider som ett separat program. På så sätt kan Maria använda Power Apps Studio för att automatiskt generera stora delar av programmet. Power Apps Studio låter dig inte skapa fler skärmar från en dataanslutning i ett befintligt program för tillfället. När hon har skapat och testat skärmarna kopierar Maria dem till programmet för fältinventering och kunskapsbas.

Anteckning

En annan metod är att lägga till tabellen Avtalade tider i Excel-filen som en andra datakälla till den befintliga programmet och sedan lägga till skärmarna för avtalade tider för hand. Maria valde att skapa de nya skärmarna från arbetsboken och kopiera skärmarna. Maria är för tillfället mer bekant med begreppen kopiera och klistra in än att skapa skärmar manuellt, och kommer gradvis att lära sig att skapa skärmar från grunden allt eftersom processen med att skapa programmet fortskrider.

Så här skapar du programmet avtalade tider

1. I menyfältet Power Apps Studio , välj Arkiv.

   

2. I den vänstra rutan väljer du Ny. I huvudfönstret markerar du rutan OneDrive för företag - telefonlayout.

   

3. I rutan Anslutningar, välj Appointments.xlsx.

   

4. I Excel-filen och välj tabellen Avtalade tider och välj Anslut.

   

5. Vänta medan programmet genereras. När den nya programmet visas innehåller den en skärm Bläddra, en skärm Detaljer och skärmen Redigera med standardskärmen.

   

6. I rutan Trädvy i avsnittet BrowseScreen1 under BrowseGallery1, välj Image1 och välj sedan Ta bort. Skärmen Bläddra ska avtalade tider och inte bilder som är associerade med dem listas.

   

   Observera att om du tar bort kontrollen Image1 orsakar flera fel på skärmen eftersom bredden och platsen för kontrollen Title1 refererar till kontrollen Bild. Du åtgärdar de här problemen i följande steg.

7. I rutan Trädvy, under BrowseGallery1 och välj Title1. Ändra värdet för egenskapen X till 16. Ändra formeln i egenskapen Bredd till Parent.TemplateWidth - 104. Alla fel som visas på skärmen bör åtgärdas.

8. I rutan Trädvy, under BrowseGallery1 och välj Body1. Den här kontrollen visar för närvarande kontakttelefoninformationen för kunden. Ändra värdet i egenskapen Text till ThisItem.'Customer Name' (inkludera enkla citattecken).

   

   Nu visas kundnamnet i informationen i skärmen Bläddra.

9. I fönstret Trädvy väljer du skärmen BrowseGallery1. Använd formelfältet och undersök uttrycket i egenskapen Items. Kontrollen söker efter avtalade tider med datum, tid och kontaktnummer. Ändra formeln så att kundnamnet genomsöks i stället för kontaktnumret:

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

   Observera att avtalade tider ordnas efter datum och tid (de två första fälten visas).

10. I fönstret Trädvy ta bort IconNewItem1. Endast lokal personal kan boka nya avtalade tider för tekniker och tekniker. Observera att den här åtgärden resulterar i fel i formuläret eftersom bredden och placeringen för andra kontroller i sidhuvudet refererar till ikonen du just tagit bort.

11. I fönstret Trädvy väljer du skärmen LblAppName1. Ändra formeln för egenskapen Bredd. till Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. I fönstret Trädvy väljer du skärmen IconRefresh1. Ändra värdet för egenskapen X till Parent.Width - IconSortUpDown1.Width - Self.Width.

13. I fönstret Trädvy väljer du skärmen iconSortUpDown1. Ändra värdet för egenskapen X till Parent.Width - Self.Width.

14. I rutan Trädvy, välj BrowseScreen1 och välj sedan den ellipsknappen (...). I listrutan som visas, välj Byt namn och ändra namnet på skärmen till BrowseAppointments.

    

15. Ändra namnet på kontrollen BrowseGallery1 till BrowseAppointmentsGallery.

Det slutförs skärmen Bläddra.

Så här skapar du informationsskärmen

Nu kan du ägna din uppmärksamhet åt skärmen Detaljer.

1. Bläddra nedåt i trädvyrutan till avsnittet DetailsScreen1. Du kan se att informationen visas i alfabetisk ordning efter fältnamn, och en del användbar information—t.ex. fältet Anteckningar—visas inte alls.

   

2. I fönstret Trädvy väljer du skärmen DetailForm1. I den högra rutan, på fliken Egenskaper, välj Redigera fält bredvid Fält. I mittenfönstret markerar du var och en av följande fält och väljer sedan Ta bort:

   • Datum för avtalad tid
   • Avtalad tid
   • Kund-ID
   • ID

3. Välj + Lägg till fält och lägg till följande fält:

   • Kommentarer
   • Probleminformation
   • Status

   

4. Dra varje fält så att de visas i följande ordning, från början till nedersta:

   • Kundnamn
   • Kundadress
   • Kontaktnummer
   • Probleminformation
   • Status
   • Kommentarer
   • Image

5. I fönstret Trädvy väljer du Notes_DataCard1. Ändra egenskapen Höjd till 320.

   

6. I fönstret Trädvy ta bort IconDelete1. Tekniker bör inte kunna ta bort avtalade tider från systemet.

7. Välj LblAppName2 och ändra egenskapen Bredd till Parent.Width - Self.X - IconEdit1.Width.

8. Använd den tidigare beskrivna tekniken för att ändra namnet på DetailsScreen1 till AppointmentDetails.

För att redigera redigeringsskärmen

Den sista skärmen att titta på för tillfället är skärmen Redigera.

1. I fönstret Trädvy väljer du skärmen EditScreen1.

2. I rutan Trädvy view i avsnittet EditScreen1, välj EditForm1. I den högra rutan, på fliken Egenskaper, välj Redigera fält bredvid Fält.

3. Ta bort följande fält:

   • Kundadress
   • ID
   • Kund-ID
   • Datum för avtalad tid
   • Avtalad tid

4. Lägg till följande fält:

   • Probleminformation
   • Status
   • Kommentarer

5. Dra varje fält så att de visas i följande ordning, från början till nedersta:

   • Kontaktnamn
   • Kundnummer
   • Probleminformation
   • Status
   • Kommentarer
   • Image

6. Välj fältet Kundnamn och expandera det så att dess egenskaper visas. Ändra kontrolltyp till Visa text. Den här ändringen gör kontrollen skrivskyddade. Det är användbart att visa kundens namn på skärmen Redigera, men en tekniker bör inte kunna ändra det.

   

7. Välj fältet Kontaktnummer och expandera det så att dess egenskaper visas. Ändra kontrolltyp till Visa text. Fältet bör också vara skrivskyddade.

8. Markera fältet Anteckningar, expandera det och ändra Kontrolltypen till Redigera flerradstext. Den här inställningen gör att teknikern kan lägga till detaljerade anteckningar som kan sträcka sig över flera rader.

9. Markera fältet Status, expandera det och ändra Kontrolltypen till Tilldelade värden.

10. I fönstret Trädvy väljer du Status_DataCard5. I högra rutan, välj fliken Egenskaper, välj Lås upp för att ändra egenskaper. Bläddra ned till egenskapen AllowedValues och ändra texten till ["Fast", "Beställda delar", "Olösta"] (ta med hakparenteser). Fältteknikern kan endast ange Status till ett av dessa definierade värden.

    

11. I rutan Trädvy, byt namn på EditScreen1 till EditAppointment.

Nu kan du spara och testa programmet.

1. Välj Fil > Spara som.

2. Under Spara som, välj Molnet ange namnet VanArsdelAppointments och välj Spara.

3. Välj bakåtpilen i Power Apps Studio för att återgå till skärmen Starta.

4. Välj F5 om du vill förhandsgranska programmet. På sidan Avtalade tider markerar du ikonen > bredvid en avtalad tid. På skärmen Detaljer för den avtalade tiden ska visas. I sidhuvudet, välj Redigera till uppdatera den avtalade tiden. Verifiera följande:

   • Fälten kundnamn och kontaktnummer är skrivskyddade.
   • Statusfältet är begränsat till värdena i listrutan.
   • Du kan ange anteckningar som sträcker sig över flera rader.
   • Du kan överföra en bildfil till bildfältet.

   Anteckning

   En förbättring som du lägger till senare gör att du kan ta en bild med telefonen från programmet och lägga till den i bildfältet.

   

Kombinera skärmarna till ett enda program

Maria har skapat två program, men vill kombinera dem till ett enda program. För att kunna göra detta kopierar Maria skärmarna för programmet för avtalade tider till programmet för fältlagerhantering och kunskapsbas enligt följande:

1. Öppna ett nytt webbläsarfönster och logga in på Power Apps Studio med din kontoinformation.

2. I den vänstra rutan, välj Appar, välj VanArdselApp och välj Redigera.

   

3. I verktygsfältet, välj Ny skärm och välj Tom. Den här åtgärden lägger till en ny skärm i programmet där du kopierar kontrollerna för skärmen Bläddra för programmet VanArsdelAppointments.

   

4. Den nya skärmen får namnet Screen2. I rutan Trädvy byt namn på BrowseAppointments.

5. Upprepa föregående steg två gånger till om du vill lägga till ytterligare två tomma skärmar (Screen3 och Screen4).

6. Byt namn på Screen3 till AppointmentDetails och byt namn på Screen4 till EditAppointment.

7. I det vänstra verktygsfältet Power Apps Studio, välj ikonen Data. I fönstret Data välj Lägg till data. I listrutan Välj en datakälla, fältet Sök, ange OneDrive och välj OneDrive för företag.

   

8. Välj Excel-filen Appointments.xlsx, välj tabellen Avtalade tider och välj Anslut.

9. Växla till webbläsarens fönster som visar programmet VanArsdelAppointments.

10. I verktygsfältet, välj Tema (du kan behöva expandera verktygsfältet för att visa fler objekt) och välj temat Skog. Samma sak gäller för programmet VanArsdel.

11. I det vänstra verktygsfältet markerar du ikonen Trädvy, välj skärmen BrowseAppointments och sedan Ctrl+A. Med den här åtgärden markeras alla kontroller på skärmen.

12. Markera Ctrl+C om du vill kopiera kontrollerna till Urklipp.

13. Återgå till webbläsarens fönster som visar programmet VanArsdelApp.

14. I det vänstra verktygsfältet markerar du ikonen Trädvy, välj skärmen BrowseAppointments.

15. Välj Ctrl + V för att klistra in kontrollerna på skärmen.

    Anteckning

    Ibland ser skärmrubriken något för låg ut. Du åtgärdar problemet genom att välja kontrollerna IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 och RectQuickActionBar1_1 i rutan Trädvy (håll ned Shift medan du klickar för att markera mer än en kontroll åt gången) och använd sedan mus- eller piltangenterna för att flytta dem uppåt i designfönstret.

16. Växla tillbaka till webbläsarfönstret som visar programmet VanArsdelAppointments och välj och kopiera kontrollerna i skärmen AppointmentDetails till urklipp (Ctrl+A följt av Ctrl+C).

17. Gå tillbaka till webbläsarfönstret där programmet VanArsdelApp visas, välj skärmen AppointmentDetails och klistra in kontrollerna (Ctrl+V). Justera placeringen av kontrollerna i skärmrubriken om det behövs.

    Anteckning

    Ett fel visas i sidhuvudet på skärmen AppointmentDetails. Det här felet beror på att skärmen refererar till kontroller på skärmen EditAppointment, som ännu inte har kopierats. Felet bör åtgärdas i nästa steg.

18. Växla tillbaka till webbläsarfönstret som visar programmet VanArsdelAppointments och välj och kopiera kontrollerna i skärmen EditAppointment till Urklipp.

19. Gå tillbaka till webbläsarfönstret där programmet VanArsdelApp visas, välj skärmen EditAppointment och klistra in kontrollerna. Flytta kontrollerna i skärmrubriken om det behövs.

20. I rutan Trädvy, välj skärmen AppointmentDetails och kontrollera att det tidigare angivna felet nu har försvunnit.

21. I fönstret Trädvy väljer du skärmen BrowseScreen1. Byt namn på den här skärmen som BrowseParts.

22. Byt namn på skärmen DetailsScreen1 till PartDetails.

23. Byt namn på skärmen Screen1 som Kunskapsbasen.

    Anteckning

    Det är bra att byta namn på skärmarna så att de återspeglar deras funktion i stället för att använda standardnamnen som genereras av Power Apps Studio, särskilt om ett program innehåller flera skärmar. Detta kan hjälpa till att undvika förvirring senare om programmet ändras av en annan utvecklare.

Lägga till en startskärm i programmet

Det sista steget är att lägga till skärmen Start i programmet. Skärmen Start gör att teknikern kan förflytta sig mellan de olika delarna i programmet (lagerhantering, kunskapsbas och avtalade tider).

1. I programmet VanArsdelApp i verktygsfältet, välj Ny skärm och välj Tom.

2. I fönstret Trädvy byter du namn på Screen2 till Start.

3. I verktygsfältet, välj Infoga. I listan med kontroller, visa Media och välj sedan Bild. Kontrollen läggs till på skärmen.

   

4. Ställ in X-position för kontrollen till 16 och Y-position till 22. Ändra Bredd till 605 och Höjd till 127. Ändra Bildpositionen till Fylla i.

   

5. Medan du fortfarande är på fliken Egenskaper i listrutan Bild, välj + Lägg till en bildfil och överför sedan bilden VanArsdelLogo.png till kontrollen.

   Anteckning

   Bildfilen finns i mappen Tillgångar i Git-lagringsplats för denna guide.

   

6. I listan med kontroller lägger du till fyra kontroller för Textetikett i formuläret och placerar dem så att de staplas under VanArsdel-logotypen.

   

7. Markera kontrollen för kontrollen Textetikett. I högra rutan, välj fliken Egenskaper ange egenskapen Text till Nästa avtalade tid. Ange Teckenstorlek till 30 och använd färgväljaren för att ställa in teckensnittsfärgen till grön (för att matcha logotypen).

   

8. Markera den andra kontrollen Textetikett. Ändra värdet i egenskapen Text till First(Appointments).'Customer Name' (inkludera citattecken). Den här formeln hämtar kundnamnet från den första raden i tabellen med avtalade tider.

   

   Anteckning

   För tillfället fungerar formeln bara som platshållare. Du ändrar etiketten senare så att nästa avtalad tid för teknikern hämtas, i stället för att alltid visa den första.

9. Markera den tredje kontrollen för Textetikett och ange egenskapen Text till First(Appointments).'Appointment Date'.

10. Ange egenskapen Text för den fjärde kontrollen till First(Appointments).'Appointment Date'. Ange egenskapen Teckenstorlek till 30.

11. Lägg till en kontroll Rectangle från listan med kontroller. Ange följande egenskaper för den här kontrollen:

    • Visningsläge: Visning
    • X: 0
    • Y: 632
    • Bredd: 635
    • Höjd: 1

    Kontrollen fungerar som en visuell avgränsare mitt på skärmen.

12. Lägg till tre kontroller för knapp på skärmen, ordnade stående och jämnt placerade nedanför avgränsaren. Ange egenskapen Text för den översta knappen Avtalade tider, Text för mittenknappen till egenskapen Delar och egenskapen Text för den nedre knappen Kunskapsbasen.

    

13. Välj knappen Avtalade tider. Ändra uttrycket i åtgärden OnSelect till formeln Navigate(BrowseAppointments, ScreenTransition.Fade). Den här åtgärden förser användaren med att visa skärmen för avtalade tider när användaren väljer knappen.

    

14. Ange åtgärden OnSelect för knappen Delar till Navigate(BrowseParts, ScreenTransition.Fade).

15. Ange åtgärden OnSelect för knappen Kunskapsbasen till Navigate(Knowledgebase, ScreenTransition.Fade).

Förutom att navigera från skärmen Start till de andra systemet kommer Avtalade tider, Delar och Kunskapsbas göra det möjligt för användaren att gå tillbaka till skärmen Start. Maria bestämmer sig för att lägga till bakåtknappar till skärmarna.

1. I fönstret Trädvy väljer du skärmen BrowseParts.

2. Välj kontrollen RectQuickActionBar1 så att den fokuserar på den.

3. Välj Infoga-menyn och välj ikonen Lägg till. Flytta ikonen till vänster om kontrollen RectQuickActionBar1. Observera att ikonen utgör en del av etiketten bläddringsdelar.

   

4. På menyn Trädvy, ändra namnet på den nya ikonkontrollen till IconReturn1.

5. Ändra formeln för åtgärden OnSelect till uttrycket Back(ScreenTransition.Fade). Funktionen Tillbaka navigerar användaren till den föregående skärmen som han eller hon har besökt.

6. På fliken Egenskaper, ändra ikonegenskapen till < Vänster.

7. I skärmrubriken, välj etiketten Bläddra delar. Ändra värdet för X till IconReturn1.Width + 20. Etiketterna för Bläddra delar bör inte längre döljas delvis.

   

8. När du följer processen som beskrivs i steg 16 till 22 lägger du till en ikon med namnet IconReturn2 till kontrollen RectQuickActionBar3 i skärmen Kunskapsbasen.

9. Lägg till en ikon med namnet IconReturn3 till kontrollen RectQuickActionBar1_1 på skärmen BrowseAppointments.

10. I fönstret Trädvy väljer du objektet Program. Ändra egenskapen StartScreen till uttrycket Start. Detta säkerställer att skärmen Start visas när programmet startar:

    

    Anteckning

    Om du inte anger vilken skärm som ska visas när programmet startar används skärmen som visas högst upp i rutan Trädvyn. Om du vill flytta en skärm till början av listan högerklickar du på skärmen i rutan Trädvy och väljer Flytta upp tills den är högst upp.

Slutligen kan du testa programmet.

1. Välj Fil > Spara. I rutan Versionanteckningar, ange Komplett version med startskärmen och välj Spara.

2. Välj bakåtpilen för att gå tillbaka till skärmen start och välj sedan F5 för att köra programmet.

3. Kontrollera att programmets skärm start visas.

4. Välj Avtalade tider. Skärmen för avtalade tider ska visas.

5. Välj bakåtpilen för att återgå till skärmen Starta.

6. Välj Delar. Delarnas webbläsare ska visas.

7. Välj bakåtpilen för att återgå till skärmen Starta.

8. Välj Kunskapsbas. Frågeskärmen i kunskapsbasen ska visas.

9. Välj bakåtpilen för att återgå till skärmen Starta.

10. Stäng förhandsgranskningsfönstret och återgå till Power Apps Studio.

Prototypappen är nu klar.

Föregående Nästa