Hoofdstuk 3: Een low-code prototype bouwen

Notitie

In hoofdstuk 2 wordt verwezen naar de mobiele app die wordt gebruikt door de servicetechnici en monteurs, en de bureaublad-app die wordt gebruikt door on-premises personeel. De volgende hoofdstukken gaan over het ontwerp, de implementatie en de uitrol van de mobiele apps die met Power Apps zijn gebouwd. De bureaublad-apps worden als een oefening aan de lezer overgelaten.

Kiana staat sceptisch tegenover low-code oplossingen en Power Apps. Maar zij en Maria besluiten samen een app te bouwen om de servicetechnici te helpen bij het controleren van de voorraad (en indien nodig bij het bestellen van onderdelen), bij het raadplegen van de kennisbank en het controleren van hun volgende afspraak terwijl ze niet op kantoor zijn maar onderweg voor servicebezoeken. Kiana en Maria zijn van plan deze ervaring te gebruiken om te ontdekken hoe ze besturingselementen kunnen toevoegen en formules kunnen gebruiken in Power Apps.

Hoewel het bouwen van een eerste, low-code prototype typisch de taak van een citizen developer is, besluit Kiana aandacht te besteden aan het proces om te begrijpen hoe de app is opgebouwd. Kiana heeft deze informatie nodig om Maria te helpen bij het integreren van de real-world gegevensbronnen, web-API's en andere vereiste services in de app.

Item 1: voorraadbeheer onderweg

Maria's oorspronkelijke doel is om een canvas-app te bouwen die een lijst met onderdelen bevat en de gebruiker in staat stelt om de details van elk onderdeel te bekijken. Uiteindelijk moet de gebruiker ook een onderdeel kunnen bestellen; deze eerste versie van de app zal echter gewoon een prototype zijn en zal nog niet aan een back-end worden gekoppeld. Nadat ze feedback heeft gekregen van Caleb, de belangrijkste servicetechnicus, werkt Maria met Kiana samen aan de integratie van de canvas-app met het voorraadsysteem dat on-premises wordt uitgevoerd.

Maria is vertrouwd met alle ins en outs van het bestaande voorraadbeheersysteem en begrijpt de informatie die het bevat. Maria begint met het maken van een Excel-werkmap die tabellen bevat waarin modelgegevens zijn opgenomen met details voor enkele voorbeeldonderdelen. De velden in de tabel zijn ID, Name, CategoryID, Price, Overview, NumberInStock en Image (een URL die verwijst naar een afbeelding van het onderdeel). Deze werkmap kan worden gebruikt om de canvas-app te bouwen en te testen om er zeker van te zijn dat de vereiste gegevens correct worden weergegeven. Maria slaat deze werkmap op in een OneDrive-account met de naam BoilerParts.xlsx.

Notitie

U vindt een kopie van deze werkmap in de map Assets in de Git-repository voor deze handleiding.

Als u een relationele databaseontwerper bent, ziet u dat de Excel-werkmap een gedenormaliseerde weergave van de gegevens biedt. In de relationele database CategoryID bijvoorbeeld wordt hoogstwaarschijnlijk met een numerieke ID verwezen naar een aparte tabel met de details van de categorie, inclusief de naam.

Notitie

De URL's in de kolom Image zijn momenteel slechts tijdelijke aanduidingen. In de voltooide app worden deze URL's vervangen door de adressen van echte afbeeldingsbestanden.

Voer de volgende stappen uit om de app te maken met Power Apps.

1. Aanmelden bij Power Apps.

2. Selecteer op de pagina Start onder Beginnen met gegevens de optie Excel Online.

   

3. Selecteer op de pagina VerbindingenOneDrive for Business en vervolgens Maken.

   

4. Selecteer de pagina OneDrive for Business het bestand BoilerParts.xlsx.

   

5. Selecteer de tabel in het Excel-bestand (Maria heeft de tabel gemaakt met de standaardnaam Table1) en selecteer vervolgens Verbinden.

   

6. Wacht terwijl Power Apps de app genereert.

   

7. Als de app is gegenereerd, ziet u het scherm Bladeren waarin de velden CategoryID, ID en Image uit elke rij van de onderdelentabel in de werkmap worden weergegeven.

   

8. De velden die momenteel worden weergegeven, zijn niet erg handig voor een monteur die een product wil selecteren. Selecteer in het deelvenster waarin het scherm Bladeren wordt weergegeven, het label Heat Exchanger in de eerste rij met gegevens. Selecteer in de formulebalk de eigenschap Text in de vervolgkeuzelijst. Wijzig de waarde van deze eigenschap in ThisItem.Name. De tekst in het eerste veld van elke rij verandert om de onderdeelnaam weer te geven.

   Notitie

   In de volgende afbeelding is het label Heat Exchanger dat oorspronkelijk in het formulier werd weergegeven, gewijzigd in de productnaam 3.5 W/S Heater.

   

9. Herhaal de vorige stap voor de labels ID en Image. Verander de eigenschap Text van het veld ID in CategoryID en de eigenschap Text van het veld Image in Overview. Het scherm Bladeren ziet er nu uit als de volgende afbeelding. Een servicetechnicus zal dit waarschijnlijk veel handiger vinden voor het selecteren van onderdelen.

   

10. De zoekfunctie van het scherm Bladeren gebruikt standaard de velden die aanvankelijk zijn geselecteerd toen het scherm werd gegenereerd. In dit geval CategoryID, ID en Image. De resultaten zijn gesorteerd op CategoryID. Het is zinvol om dit te veranderen in de velden Name, CategoryID en Overview met de resultaten gesorteerd op Name. Selecteer het besturingselement BrowseGallery1 in het deelvenster Structuurweergave. Selecteer in de vervolgkeuzelijst aan de linkerkant van de formulebalk de eigenschap Items. Sleep de onderrand van de formulebalk naar beneden zodat de formule volledig zichtbaar is. De formule bevat de volgende uitdrukking:

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

    

11. Verander de uitdrukking Search om te verwijzen naar de velden Name, CategoryID en Overview met behulp van de volgende formule:

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

12. De titel in de koptekst van het formulier is niet nuttig en het standaardthema komt niet overeen met de huisstijl van VanArsdel. Selecteer in het scherm Bladeren het label Table1 en wijzig op de Formulebalk de eigenschap Text van het label in "Bladeren in onderdelen" (inclusief de dubbele aanhalingstekens in de waarde).

13. Selecteer op de werkbalk Thema (het kan zijn dat u de werkbalk moet uitvouwen om meer items weer te geven) en selecteer vervolgens het thema Forest. De kleuren en stijl voor het scherm Bladeren worden aangepast aan het thema.

    

Het detailscherm nuttiger maken

U hebt de basisapp gemaakt en het scherm Bladeren gewijzigd om velden weer te geven die een monteur kan gebruiken om een onderdeel te identificeren. De app bevat ook een Details-scherm waarin alle informatie voor een geselecteerd onderdeel wordt weergegeven. De velden op dit scherm worden momenteel niet in een logische volgorde weergegeven, dus u moet ze opnieuw rangschikken. U kunt ook het veld ID van dit scherm verwijderen, omdat deze informatie niet relevant is voor een monteur.

1. Schuif omlaag in het deelvenster Structuurweergave en selecteer DetailScreen1. Dit scherm bevat details over het onderdeel dat een gebruiker selecteert in het scherm Bladeren.

   

2. Selecteer in de kop van het scherm Details in het middelste deelvenster het label Table1. Wijzig in het rechterdeelvenster op het tabblad Eigenschappen de eigenschap Text in Details onderdeel.

   Notitie

   In veel gevallen kunt u dezelfde resultaten bereiken door de formulebalk te gebruiken als het deelvenster Eigenschappen. Sommige eigenschappen zijn echter alleen beschikbaar via het deelvenster Eigenschappen.

   

3. Selecteer in het deelvenster Structuurweergave onder DetailScreen1 de optie DetailForm1. Selecteer in het rechterdeelvenster op het tabblad Eigenschappen de optie Velden bewerken naast Velden. Selecteer en sleep de velden in het middelste deelvenster zodat ze in de volgende volgorde worden weergegeven, van boven naar beneden:

   • Meetcriterium
   • CategoryID
   • Overzicht
   • Prijs
   • NumberInStock
   • Image
   • Id

   

4. Selecteer het veld ID, selecteer het beletselteken dat aan de rechterkant van het veld wordt weergegeven en selecteer vervolgens Verwijderen in het vervolgkeuzemenu dat verschijnt. Met deze actie wordt het veld ID uit het formulier verwijderd.

   

5. Selecteer in het deelvenster Structuurweergave onder DetailForm1CategoryIDDataCard1. Dit element is een DataCard-besturingselement dat de naam van een veld weergeeft (de sleutel genaamd) en de waarde ervan.

   

   Selecteer in het rechterdeelvenster op het tabblad Geavanceerd de optie Ontgrendelen om eigenschappen te wijzigen. Wijzig in de sectie Gegevens het veld DisplayName in "Categorie" (inclusief de aanhalingstekens).

   Notitie

   Net als bij het tabblad Eigenschappen is een groot aantal van de eigenschappen op het tabblad Geavanceerd ook toegankelijk via de formulebalk. Als u deze eigenschappen wilt instellen, kunt u desgewenst de formulebalk gebruiken.

   

6. Herhaal de vorige stap om de sleutel voor NumberInStockDataCard1 te wijzigen in "Aantal op voorraad" (inclusief de aanhalingstekens).

7. U moet de opmaak van het veld Prijs aanpassen om de gegevens als een valutawaarde weer te geven. Selecteer in het deelvenster Structuurweergave onder DetailForm1 onder PriceDataCard1DataCardValue7. Dit is het veld dat de waarde van het veld Prijs weergeeft. Wijzig in het deelvenster DataCardValue7 aan de rechterkant op het tabblad Geavanceerd de eigenschap Text in Text(Value(Parent.Default), "[$-nl-NL]$ ###.##0,00")

   

   De uitdrukking Parent.Default verwijst naar het gegevensitem waarmee het bovenliggende besturingselement (DataCard) is verbonden. In dit geval de kolom Prijs. Met de functie Tekst wordt deze waarde opnieuw opgemaakt met behulp van de indeling die als het tweede argument is opgegeven. In dit voorbeeld is dit de lokale valuta met twee decimalen.

8. De afbeeldingsgegevenskaart moet een afbeelding van het onderdeel weergeven in plaats van de URL van het afbeeldingsbestand. Selecteer in het deelvenster Structuurweergave onder DetailForm1 onder Image_DataCard1DataCardValue3 en selecteer vervolgens Verwijderen om dit besturingselement te verwijderen.

9. Selecteer Image_DataCard1. Selecteer + Invoegen in het linkerdeelvenster. Vouw in het deelvenster InvoegenMedia uit en selecteer vervolgens Afbeelding.

   

10. Ga terug naar het deelvenster Structuurweergave en controleer of het tekstbesturingselement Image1 is toegevoegd aan het besturingselement Image_DataCard1.

    

11. Selecteer in het deelvenster StructuurweergaveImage_DataCard1. Wijzig in het rechterdeelvenster op het tabblad GeavanceerdHoogte in 500, zodat er voldoende ruimte is om een afbeelding weer te geven.

    

12. Selecteer in het deelvenster StructuurweergaveImage1. Stel de volgende eigenschappen in:

    • Image: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Width: 550
    • Height: 550

    Notitie

    De weergegeven afbeelding is momenteel leeg omdat de URL in de Excel-werkmap slechts een tijdelijke aanduiding is. U lost dit probleem op en haalt een echte URL op als u de app in een later hoofdstuk aan een web-API koppelt.

De app bevat ook een Bewerken-scherm, waarmee een gebruiker de informatie voor een onderdeel kan wijzigen. Het is niet de bedoeling dat een technicus de details van een onderdeel kan wijzigen, nieuwe onderdelen kan maken of onderdelen uit de catalogus kan verwijderen.

1. Selecteer in het deelvenster StructuurweergaveEditScreen1. Selecteer de knop met het beletselteken en selecteer vervolgens Verwijderen om dit scherm te verwijderen.

   

2. Selecteer in het deelvenster StructuurweergaveDetailsScreen1. In Power Apps Studio wordt een foutmelding voor dit scherm weergegeven. Deze fout treedt op omdat DetailsScreen1 uitdrukkingen bevat die verwijzen naar het scherm EditScreen1, dat niet meer bestaat.

3. Selecteer in de kop van DetailsScreen1 het potloodpictogram (IconEdit1). De eigenschap OnSelect voor dit besturingselement bevat de uitdrukking EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Als het pictogram Bewerken wordt geselecteerd, wordt deze uitdrukking uitgevoerd en wordt geprobeerd te verplaatsen naar het scherm EditScreen1.

   

4. Selecteer in het deelvenster StructuurweergaveIconEdit1 en selecteer vervolgens Verwijderen. Dit pictogram is niet meer vereist.

5. Selecteer IconDelete1 en selecteer vervolgens Verwijderen. Dit pictogram wordt gebruikt om het huidige onderdeel te verwijderen en is ook niet vereist.

   

6. U ziet dat de tekst Details onderdeel is verdwenen uit de schermkop en dat in plaats daarvan in Power Apps Studio een foutmelding wordt weergegeven. Dit is gebeurd omdat de breedte van het labelbesturingselement dat de tekst weergeeft, wordt berekend. Selecteer in het deelvenster StructuurweergaveLblAppName2. Controleer de eigenschap Width. De waarde van deze eigenschap is het resultaat van de uitdrukking Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Wijzig de uitdrukking voor de eigenschap Width in Parent.Width - Self.X. De fout moet verdwijnen en de tekst Details onderdeel moet opnieuw verschijnen in de schermkop.

8. Selecteer in het deelvenster StructuurweergaveBrowseScreen1. In dit scherm wordt ook een foutmelding weergegeven. Met het pictogram + op de werkbalk (IconNewItem1) kan de gebruiker een nieuw onderdeel toevoegen. De eigenschap OnSelect voor dit pictogram verwijst naar het scherm EditScreen1.

   

9. Selecteer IconNewItem1 en selecteer vervolgens Verwijderen. Net als voorheen verdwijnt de tekst in de koptekst van het scherm en wordt er om dezelfde reden een foutmelding weergegeven.

10. Selecteer in het deelvenster Structuurweergave onder BrowseScreen1LblAppName1. Wijzig de uitdrukking voor de eigenschap Width door de verwijzing naar IconNewItem1.Width te verwijderen. De nieuwe uitdrukking moet Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width zijn.

    

11. Er is nog steeds een probleem met de koptekst. Hoewel de tekst Bladeren in onderdelen opnieuw is verschenen, wordt er een fout weergegeven en bevinden de pictogrammen voor vernieuwen en sorteren zich op de verkeerde plaats. Selecteer in het deelvenster Structuurweergave de optie IconSortUpDown1. Vind de eigenschap X voor dit besturingselement. Deze eigenschap bepaalt de horizontale positie van het pictogram in de koptekst. Het wordt momenteel berekend op basis van de breedte van het besturingselement IconNewItem1.

    

12. Wijzig de uitdrukking voor de eigenschap X in Parent.Width - Self.Width.

13. Selecteer in het deelvenster StructuurweergaveIconRefresh1. Wijzig de uitdrukking voor de eigenschap X in Parent.Width - IconSortUpDown1.Width - Self.Width. De fouten moeten allemaal verdwijnen.

De app opslaan en testen

Nu kunt u de app opslaan en testen.

1. Selecteer Bestand>Opslaan als.

2. Selecteer onder Opslaan alsThe cloud, voer de naam VanArsdelApp in en selecteer vervolgens Opslaan.

   

3. Selecteer de pijl-terug om terug te keren naar het scherm Start.

   

4. Selecteer F5 om een voorbeeld van de app te bekijken. Selecteer op de pagina Bladeren in onderdelen de punthaak naar rechts (>) die zich rechts van een onderdeel bevindt. Het scherm Details voor het onderdeel wordt weergegeven.

   

5. Selecteer de punthaak naar links (<) in de koptekst van het scherm Details om terug te keren naar het scherm Bladeren.

6. Voer in het scherm Bladeren in onderdelen tekst in het vak Zoeken in. Terwijl u typt, worden de items gefilterd om alleen de items weer te geven met overeenkomende tekst in de velden Name, CategoryID en Overview.

   

7. Sluit het voorbeeldvenster en keer terug naar Power Apps Studio.

Item 2: kennisbank onderweg

Voor toegang tot de kennisbank stellen Maria en Caleb (de technicus) een eenvoudige interface voor waarin de gebruiker een zoekterm kan invoeren en de app dan alle kennisbankartikelen toont waarin de term wordt genoemd. Maria weet dat voor dit proces Azure Cognitive Search zal moeten worden gebruikt, maar dat het niet nodig is om te weten hoe dit programma werkt. Daarom besluit Maria alleen de basisgebruikersinterface beschikbaar te maken en later met Kiana samen te werken om de daadwerkelijke functionaliteit toe te voegen.

Maria besluit om een nieuw scherm te maken op basis van de sjabloon Lijst die beschikbaar is in Power Apps Studio.

1. Selecteer in Power Apps Studio op de werkbalk van het scherm StartNieuw scherm en selecteer vervolgens Lijst.

   

2. Selecteer in de schermkoptekst het label waarin de tekst [Title] wordt weergegeven. Wijzig de eigenschap Text in "Query" (inclusief de aanhalingstekens).

   

3. Selecteer in de schermkopkoptekst het plusteken (+) en selecteer vervolgens Verwijderen. Het pictogram + is bedoeld om de gebruiker in staat te stellen meer items aan de lijst toe te voegen. De kennisbank is alleen beschikbaar voor zoekopdrachten, waardoor deze functie niet nodig is.

   

   Als dit pictogram wordt verwijderd, wordt een fout in de koptekst veroorzaakt vanwege de manier waarop de locatie en breedte van de andere items worden berekend. U zag dit eerder bij het voorraadbeheerscherm en de oplossing is hetzelfde, zoals beschreven in de volgende stappen.

4. Schuif in het deelvenster Structuurweergave omlaag naar de sectie Screen1 en selecteer LblAppName3. Wijzig de eigenschap Width in de formule Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. Selecteer in het deelvenster StructuurweergaveIconSortUpDown2. Wijzig de eigenschap X in de formule Parent.Width - IconSortUpDown2.Width.

6. Selecteer in het deelvenster StructuurweergaveIconRefresh2. Wijzig de eigenschap X in Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Hiermee worden alle fouten met het scherm opgelost.

7. Selecteer Bestand>Opslaan.

8. Voer in het vak Versienotitie de tekst Knowledgebase-UI toegevoegd in en selecteer vervolgens Opslaan.

9. Ga terug naar het scherm Start en selecteer F5 om een voorbeeld van het nieuwe scherm te bekijken. Het zou er als de volgende afbeelding uit moeten zien.

   

   Als u het pictogram > naast een van de dummy-items selecteert, werkt de detailfunctionaliteit momenteel niet. U lost dit later op wanneer u Azure Cognitive Search in de app integreert.

10. Sluit het voorbeeldvenster en keer terug naar Power Apps Studio.

Item 3: Planning en notities onderweg

Maria werkt samen met Malik, de receptionist, om de interface te ontwerpen voor planning onderweg en het afsprakengedeelte van de app. Malik verschaft een Excel-werkmap met enkele voorbeeldgegevens die Maria kan gebruiken om het afsprakenscherm samen te stellen. De werkmap bevat een tabel met de volgende kolommen:

• ID (de afspraak-ID)
• Klant-ID (een unieke ID voor de klant)
• Klantnaam
• Klantadres
• Probleemdetails (een tekstbeschrijving van het probleem dat de klant ondervindt)
• Contactnummer
• Status
• Afspraakdatum
• Tijdstip van afspraak
• Notities (een tekstbeschrijving met eventuele notities toegevoegd door de monteur)
• Afbeelding (een foto van het apparaat, ofwel in werkende staat na reparatie of als aanvullende foto voor de notities van de monteur)

Notitie

Net als bij de gegevens van het voorraadbeheer onderweg biedt deze werkmap een gedenormaliseerde weergave van de gegevens. In het bestaande afsprakensysteem worden deze gegevens opgeslagen in aparte tabellen met afspraakgegevens en klantgegevens.

Maria slaat dit bestand op in een OneDrive-account met de naam Appointments.xlsx. Omdat ze zich herinnert dat ze eerder de standaardnaam voor de tabel in de werkmap heeft gebruikt en de titel moest wijzigen in de verschillende schermen die werden gegenereerd, hernoemt Maria de tabel in de werkmap in Afspraken.

Notitie

Deze werkmap is beschikbaar in de map Assets van de Git-repository voor deze handleiding.

Maria wil het afsprakengedeelte van de app rechtstreeks vanuit het Excel-bestand opbouwen. Maria besluit een soortgelijke aanpak te volgen als die van de functionaliteit voor vooraadbeheer onderweg. Het enige verschil is dat de monteur deze keer afspraken mag maken en bewerken.

Maria besluit de afsprakenschermen in eerste instantie als een aparte app te bouwen. Op deze manier kan Maria Power Apps Studio gebruiken om een groot deel van de app automatisch te genereren. Met Power Apps Studio kunt u momenteel geen extra schermen genereren via een gegevensverbinding in een bestaande app. Nadat de schermen zijn gemaakt en getest, kopieert Maria ze naar de app voor voorraadbeheer en kennisbank onderweg.

Notitie

Een alternatieve benadering is om de tabel Afspraken in het Excel-bestand als een tweede gegevensbron aan de bestaande app toe te voegen en vervolgens de schermen voor afspraken met de hand samenstellen. Maria heeft ervoor gekozen om de nieuwe schermen uit de werkmap te genereren en de schermen te kopiëren. Maria is nu meer vertrouwd met de concepten van kopiëren en plakken dan met het handmatig bouwen van schermen, en zal geleidelijk aan leren hoe ze schermen helemaal vanaf het begin kan maken tijdens het bouwen van deze app.

De afspraken-app maken

1. Selecteer op de menubalk van Power Apps Studio de optie Bestand.

   

2. Selecteer Nieuw in het linkerdeelvenster. Selecteer in het hoofdvenster het vak OneDrive for Business - Telefoonindeling.

   

3. Selecteer in het deelvenster VerbindingenAppointments.xlsx.

   

4. Selecteer in het Excel-bestand de tabel Afspraken en selecteer vervolgens Verbinden.

   

5. Wacht terwijl de app wordt gegenereerd. Wanneer de nieuwe app verschijnt, bevat deze de schermen Bladeren, Details en Bewerken waarin het standaardthema wordt gebruikt.

   

6. Selecteer in het deelvenster Structuurweergave in de sectie BrowseScreen1 onder BrowseGallery1Image1 en selecteer vervolgens Verwijderen. In het scherm Bladeren worden alleen afspraken weergegeven, maar geen afbeeldingen die eraan zijn gekoppeld.

   

   Merk op dat wanneer het besturingselement Image1 wordt verwijderd, hiermee verschillende fouten op het scherm worden veroorzaakt omdat de breedte en locatie van het besturingselement Title1 beide verwijzen naar het besturingselement Afbeelding. U lost deze problemen in de volgende stap op.

7. Selecteer in het deelvenster Structuurweergave onder BrowseGallery1Title1. Wijzig de waarde in de eigenschap X in 16. Wijzig de formule in de eigenschap Width in Parent.TemplateWidth - 104. Hiermee worden de fouten voor het scherm opgelost.

8. Selecteer in het deelvenster Structuurweergave onder BrowseGallery1Body1. Met dit besturingselement worden momenteel de contacttelefoongegevens van de klant weergegeven. Wijzig de waarde in de eigenschap Text in ThisItem.'Klantnaam' (inclusief de enkele aanhalingstekens).

   

   De details in de naam van het scherm Bladeren geven nu de naam van de klant weer.

9. Selecteer in het deelvenster StructuurweergaveBrowseGallery1. Onderzoek met de formulebalk de uitdrukking in de eigenschap Items. Met het besturingselement wordt gezocht naar afspraken met behulp van de datum, tijd en het contactnummer van de afspraak. Wijzig deze formule om de klantnaam te zoeken in plaats van het contactnummer:

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

   Merk op dat de afspraken zijn gerangschikt op datum en vervolgens op tijd (de eerste twee weergegeven velden).

10. Verwijder in het deelvenster StructuurweergaveIconNewItem1. Alleen on-premises medewerkers kunnen nieuwe afspraken voor technici en monteurs boeken. Deze actie resulteert in fouten in het formulier omdat de breedte en positie van andere besturingselementen in de koptekst verwijzen naar het pictogram dat u zojuist hebt verwijderd.

11. Selecteer in het deelvenster StructuurweergaveLblAppName1. Wijzig de formule voor de eigenschap Width. in Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. Selecteer in het deelvenster StructuurweergaveIconRefresh1. Wijzig de waarde voor de eigenschap X in Parent.Width - IconSortUpDown1.Width - Self.Width.

13. Selecteer in het deelvenster StructuurweergaveiconSortUpDown1. Wijzig de waarde voor de eigenschap X in Parent.Width - Self.Width.

14. Selecteer in het deelvenster StructuurweergaveBrowseScreen1 en selecteer vervolgens het beletselteken (...). Selecteer in het vervolgkeuzemenu dat verschijnt Naam wijzigen en wijzig de naam van het scherm in BrowseAppointments.

    

15. Verander met dezelfde methode de naam van het besturingselement BrowseGallery1 in BrowseAppointmentsGallery.

Hiermee is het scherm Bladeren voltooid.

Het detailscherm maken

U kunt nu uw aandacht richten op het scherm Details.

1. Schuif omlaag in het deelvenster Structuurweergave naar de sectie DetailScreen1. U kunt zien dat de details in alfabetische volgorde worden weergegeven op basis van veldnamen en sommige handige informatie, zoals het veld Notities, wordt helemaal niet weergegeven.

   

2. Selecteer in het deelvenster StructuurweergaveDetailForm1. Selecteer in het rechterdeelvenster op het tabblad Eigenschappen de optie Velden bewerken naast Velden. Selecteer in het middelste deelvenster elk van de volgende velden en selecteer vervolgens Verwijderen:

   • Afspraakdatum
   • Tijdstip van afspraak
   • Klant-id
   • Id

3. Selecteer + Veld toevoegen en voeg de volgende velden toe:

   • Notities
   • Details van probleem
   • -Status

   

4. Sleep elk veld zodat de velden in de volgende volgorde worden weergegeven, van boven naar beneden:

   • Klantnaam
   • Klantadres
   • Contactnummer
   • Details van probleem
   • Status
   • Aantekeningen
   • Image

5. Selecteer in het deelvenster StructuurweergaveNotes_DataCard1. Wijzig de eigenschap Height in 320.

   

6. Verwijder in het deelvenster StructuurweergaveIconDelete1. Monteurs mogen geen afspraken uit het systeem verwijderen.

7. Selecteer LblAppName2 en wijzig de eigenschap Width in Parent.Width - Self.X - IconEdit1.Width.

8. Verander met behulp van de eerder beschreven methode de naam van DetailsScreen1 in AppointmentDetails.

Het bewerkingsscherm bewerken

Het laatste scherm om naar te kijken is voorlopig het scherm Bewerken.

1. Selecteer in het deelvenster StructuurweergaveEditScreen1.

2. Selecteer in het deelvenster Structuurweergave in de sectie EditScreen1EditForm1. Selecteer in het rechterdeelvenster op het tabblad Eigenschappen de optie Velden bewerken naast Velden.

3. Verwijder de volgende velden:

   • Klantadres
   • Id
   • Klant-id
   • Afspraakdatum
   • Tijdstip van afspraak

4. Voeg de volgende velden toe:

   • Details van probleem
   • Status
   • Notities

5. Sleep elk veld zodat de velden in de volgende volgorde worden weergegeven, van boven naar beneden:

   • Naam van contactpersoon
   • Klantnummer
   • Details van probleem
   • Status
   • Notities
   • Image

6. Selecteer het veld Klantnaam en vouw het uit om de eigenschappen ervan te bekijken. Verander Type besturingselement in Tekst weergeven. Deze wijziging maakt het besturingselement alleen-lezen; het is handig om de naam van de klant in het scherm Bewerken te zien, maar een monteur mag de naam niet veranderen.

   

7. Selecteer het veld Contactnummer en vouw het uit om de eigenschappen ervan te bekijken. Verander Type besturingselement in Tekst weergeven. Dit veld moet ook alleen-lezen zijn.

8. Selecteer het veld Notities, vouw het uit en wijzig het Type besturingselement in Tekst van meerdere regels bewerken. Met deze instelling kan de monteur gedetailleerde notities toevoegen die meerdere regels kunnen beslaan.

9. Selecteer het veld Status, vouw het uit en wijzig het Type besturingselement in Toegestane waarden.

10. Selecteer in het deelvenster StructuurweergaveStatus_DataCard5. Selecteer in het rechterdeelvenster op het tabblad Eigenschappen de optie Ontgrendelen om eigenschappen te wijzigen. Scrol omlaag naar de eigenschap Toegestane waarden en wijzig de tekst in ["Vast", "Bestelde onderdelen", "Niet-opgelost"] (inclusief de vierkante haken). De servicetechnicus kan de Status alleen op een van deze gedefinieerde waarden instellen.

    

11. Verander in het deelvenster Structuurweergave de naam van EditScreen1 in EditAppointment.

Nu kunt u de app opslaan en testen.

1. Selecteer Bestand>Opslaan als.

2. Selecteer onder Opslaan alsThe cloud, voer de naam VanArsdelAppointments in en selecteer vervolgens Opslaan.

3. Selecteer de pijl-terug op de werkbalk van Power Apps Studio om terug te keren naar het scherm Start.

4. Selecteer F5 om een voorbeeld van de app te bekijken. Selecteer op de pagina Afspraken het pictogram > naast een afspraak. Het scherm Details voor de afspraak moet verschijnen. Selecteer in de koptekst Bewerken om de afspraak bij te werken. Controleer het volgende:

   • De velden voor de naam van de klant en het contactnummer zijn alleen-lezen.
   • Het statusveld is beperkt tot de waarden in de vervolgkeuzelijst.
   • U kunt notities invoeren die meerdere regels beslaan.
   • U kunt een afbeeldingsbestand uploaden naar het afbeeldingsveld.

   Notitie

   Met een uitbreiding die u later toevoegt, kunt u vanuit de app een foto maken met uw telefoon en deze toevoegen aan het afbeeldingsveld.

   

De schermen in één app combineren

Maria heeft twee apps gebouwd, maar wil ze in één app combineren. Hiervoor kopieert Maria de schermen voor de afspraken-app als volgt naar de app voor voorraadbeheer en kennisbank onderweg:

1. Open een nieuw browservenster en meld u aan bij Power Apps Studio met uw accountgegevens.

2. Selecteer in het linkerdeelvenster Apps, selecteer VanArdselApp en selecteer vervolgens Bewerken.

   

3. Selecteer op de werkbalk Nieuw scherm en selecteer vervolgens Leeg. Met deze actie wordt een nieuw scherm aan de app toegevoegd waarnaar u de besturingselementen voor het scherm Bladeren kopieert voor de app VanArsdelAppointments.

   

4. Het nieuwe scherm krijgt de naam Screen2. Verander in het deelvenster Structuurweergave de naam in BrowseAppointments.

5. Herhaal de vorige stap nog twee keer om twee lege schermen toe te voegen (Screen3 en Screen4).

6. Verander de naam Screen3 in AppointmentDetails en verander de naam Screen4 in EditAppointment.

7. Selecteer op de linkerwerkbalk van Power Apps Studio het pictogram Gegevens. Selecteer in het deelvenster GegevensGegevens toevoegen. Voer in de vervolgkeuzelijst Een gegevensbron selecteren in het veld ZoekenOneDrive in en selecteer vervolgens OneDrive for Business.

   

8. Selecteer het Excel-bestand Appointments.xlsx, selecteer de tabel Afspraken en selecteer vervolgens Verbinden.

9. Schakel over naar het browservenster waarin de app VanArsdelAppointments wordt weergegeven.

10. Selecteer op de werkbalk Thema (het kan zijn dat u de werkbalk moet uitvouwen om meer items weer te geven) en selecteer vervolgens het thema Forest. Dit is hetzelfde thema dat wordt gebruikt door de VanArsdel-app.

11. Selecteer op de linkerwerkbalk het pictogram Structuurweergave, selecteer het scherm BrowseAppointments en selecteer vervolgens Ctrl+A. Met deze actie worden alle besturingselementen in het scherm geselecteerd.

12. Selecteer Ctrl+C om deze besturingselementen naar het klembord te kopiëren.

13. Keer terug naar het browservenster waarin de app VanArsdelApp wordt weergegeven.

14. Selecteer op de linkerwerkbalk het pictogram Structuurweergave en selecteer vervolgens het scherm BrowseAppointments.

15. Selecteer Ctrl+V om de besturingselementen in het scherm te plakken.

    Notitie

    Soms lijkt de schermkop iets te laag. Om dit probleem op te lossen, selecteert u de besturingselementen IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 en RectQuickActionBar1_1 in het deelvenster Structuurweergave (houd Shift ingedrukt terwijl u klikt om meerdere besturingselementen tegelijk te selecteren) en gebruik vervolgens de muis of pijltoetsen om deze omhoog te verplaatsen in het deelvenster van de ontwerpweergave.

16. Schakel terug naar het browservenster waarin de app VanArsdelAppointments wordt weergegeven en selecteer en kopieer vervolgens de besturingselementen in het scherm AppointmentDetails naar het klembord (Ctrl+A gevolgd door Ctrl+C).

17. Keer terug naar het browservenster waarin de app VanArsdelApp wordt weergegeven, selecteer het scherm AppointmentDetails en plak vervolgens de besturingselementen (Ctrl+V). Pas indien nodig de positie van de besturingselementen in de schermkop aan.

    Notitie

    U ziet een foutmelding in de koptekst van het scherm AppointmentDetails. Deze fout treedt op omdat het scherm verwijst naar besturingselementen in het scherm EditAppointment, die nog niet zijn gekopieerd. Met de volgende stappen moet deze fout worden opgelost.

18. Schakel terug naar het browservenster waarin de app VanArsdelAppointments wordt weergegeven en selecteer en kopieer vervolgens de besturingselementen in het scherm EditAppointment naar het klembord.

19. Keer terug naar het browservenster waarin de app VanArsdelApp wordt weergegeven, selecteer het scherm EditAppointment en plak vervolgens de besturingselementen. Verplaats opnieuw de besturingselementen in de schermkop indien nodig.

20. Selecteer in het deelvenster Structuurweergave het scherm AppointmentDetails en controleer of de eerder aangegeven fout nu is verdwenen.

21. Selecteer in het deelvenster Structuurweergave het scherm BrowseScreen1. Hernoem dit scherm als BrowseParts.

22. Hernoem het scherm DetailsScreen1 als PartDetails.

23. Hernoem het scherm Screen1 als Knowledgebase.

    Notitie

    Het is raadzaam de naam van schermen te wijzigen om de functie ervan weer te geven in plaats van de standaardnamen te gebruiken die door Power Apps Studio zijn gegenereerd, vooral als een app meerdere schermen bevat. Dit kan helpen verwarring te voorkomen als de app later wordt gewijzigd door een andere ontwikkelaar.

Een startscherm toevoegen aan de app

De laatste fase bestaat eruit een Startscherm aan de app toe te voegen. Met het Startscherm kan de monteur schakelen tussen de verschillende delen van de app (voorraadbeheer, kennisbank en afspraken).

1. Selecteer in de app VanArsdelApp op de werkbalk Nieuw scherm en selecteer vervolgens Leeg.

2. Wijzig in het deelvenster Structuurweergave de naam van Screen2 in Start.

3. Selecteer Invoegen op de werkbalk. Vouw in de lijst met besturingselementen Media uit en selecteer vervolgens Afbeelding. Het besturingselement wordt aan het scherm toegevoegd.

   

4. Stel de positie X van het besturingselement in op 16 en de positie Y op 22. Wijzig de Breedte in 605 en de Hoogte in 127. Verander de Afbeeldingspositie in Vullen.

   

5. Selecteer terwijl u zich bevindt op het tabblad Eigenschappen in de vervolgkeuzelijst Afbeelding+ Een afbeeldingsbestand toevoegen en upload vervolgens de afbeelding VanArsdelLogo.png naar het besturingselement.

   Notitie

   Het afbeeldingsbestand is beschikbaar in de map Assets van de Git-repository voor deze handleiding.

   

6. Voeg vanuit de lijst met besturingselementen vier Tekstlabel-besturingselementen toe aan het formulier en plaats deze zodat ze gestapeld zijn onder het VanArsdel-logo.

   

7. Selecteer het bovenste Tekstlabel-besturingselement. Stel in het rechterdeelvenster op het tabblad Eigenschappen de eigenschap Text in op Volgende afspraak. Stel Tekengrootte in op 30 en gebruik de kleurkiezer om de lettertypekleur in te stellen op groen (passend bij het logo).

   

8. Selecteer het tweede Tekstlabel-besturingselement. Wijzig de waarde van de eigenschap Text in First(Appointments).'Klantnaam' (inclusief de aanhalingstekens). Met deze formule wordt de klantnaam opgehaald uit de eerste rij in de tabel met afspraken.

   

   Notitie

   Momenteel fungeert deze formule alleen als tijdelijke aanduiding. U wijzigt het label later om de volgende afspraak voor de monteur op te halen, in plaats van altijd de eerste weer te geven.

9. Selecteer het derde Tekstlabel-besturingselement en stel de eigenschap Text in op First(Appointments).'Appointment Date'.

10. Stel de eigenschap Text van het vierde labelbesturingselement in op First(Appointments).'Appointment Time'. Stel de eigenschap voor Tekengrootte in op 30.

11. Voeg uit de lijst met besturingselementen een besturingselement voor Rechthoek toe. Stel de volgende eigenschappen voor dit besturingselement in:

    • Weergavemodus: Weergave
    • X: 0
    • Y: 632
    • Width: 635
    • Height: 1

    Dit besturingselement fungeert als een visueel scheidingsteken in het midden van het scherm.

12. Voeg drie Knop-besturingselementen aan het scherm toe, verticaal gerangschikt en gelijkmatig verdeeld onder het scheidingsteken. Stel de eigenschap Text voor de bovenste knop in op Appointments, de eigenschap Text voor de middelste knop op Parts en de eigenschap Text voor de onderste knop op Knowledgebase.

    

13. Selecteer de knop Afspraken. Wijzig de uitdrukking in de actie OnSelect in de formule Navigate(BrowseAppointments, ScreenTransition.Fade). Met deze actie wordt de weergave overgeschakeld naar het afsprakenscherm wanneer de gebruiker de knop selecteert.

    

14. Stel de actie OnSelect voor de knop Parts in op Navigate(BrowseParts, ScreenTransition.Fade).

15. Stel de actie OnSelect voor de knop Knowledgebase in op Navigate(Knowledgebase, ScreenTransition.Fade).

Naast navigatie vanuit het scherm Start naar de andere schermen in het systeem, moet er voor de schermen Appointments, Parts en Knowledgebase een manier zijn om de gebruiker in staat te stellen terug te keren naar het scherm Start. Maria besluit om terug-knoppen aan deze schermen toe te voegen.

1. Selecteer in het deelvenster Structuurweergave het scherm BrowseParts.

2. Selecteer het besturingselement RectQuickActionBar1 om het de focus te geven.

3. Selecteer het menu Invoegen en selecteer Pictogram toevoegen. Verplaats het pictogram naar links van het besturingselement RectQuickActionBar1. Merk op dat het pictogram een deel van het label Bladeren in onderdelen verbergt.

   

4. Wijzig in het menu Structuurweergave de naam van het nieuwe pictogrambesturingselement in IconReturn1.

5. Wijzig de formule voor de actie OnSelect in de uitdrukking Back(ScreenTransition.Fade). Met de functie Terug navigeert de gebruiker naar het vorige scherm dat is bezocht.

6. Wijzig op het tabblad Eigenschappen de pictogrameigenschap in < Left.

7. Selecteer in de schermkop het label Bladeren in onderdelen. Wijzig de eigenschap X in IconReturn1.Width + 20. Het label Bladeren in onderdelen mag niet langer gedeeltelijk verborgen zijn.

   

8. Voeg in navolging van het proces dat wordt beschreven in stap 16 tot en met 22 een pictogram toe met de naam IconReturn2 aan het besturingselement RectQuickActionBar3 in het scherm Knowledgebase.

9. Voeg op dezelfde manier een pictogram met de naam IconReturn3 toe aan het besturingselement RectQuickActionbar1_1 in het scherm BrowseAppointments.

10. Selecteer in het deelvenster Structuurweergave het object App. Wijzig de eigenschap StartScreen in de expressie Home. Dit zorgt ervoor dat het scherm Start wordt weergegeven wanneer de app wordt gestart:

    

    Notitie

    Als u niet opgeeft welk scherm moet worden weergegeven wanneer de app wordt gestart, wordt het scherm gebruikt dat boven aan het deelvenster Structuurweergave wordt weergegeven. Om een scherm naar het begin van de lijst te verplaatsen, klikt u met de rechtermuisknop op het scherm in het deelvenster Structuurweergave en selecteert u Omhoog verplaatsen totdat het bovenaan staat.

Eindelijk kunt u de app testen.

1. Selecteer Bestand>Opslaan. Voer in het vak VersienotitiesVolledige versie met startscherm in en selecteer vervolgens Opslaan.

2. Selecteer de pijl-terug om terug te keren naar het scherm Start en selecteer vervolgens F5 om de app uit te voeren.

3. Controleer of het scherm Start voor de app wordt weergegeven.

4. Selecteer Appointments. Het afsprakenscherm moet worden weergegeven.

5. Selecteer de pijl-terug om terug te keren naar het scherm Start.

6. Selecteer Parts. De onderdelenbrowser moet worden weergegeven.

7. Selecteer de pijl-terug om terug te keren naar het scherm Start.

8. Selecteer Knowledgebase. Het zoekopdrachtscherm voor de kennisbank moet worden weergegeven.

9. Selecteer de pijl-terug om terug te keren naar het scherm Start.

10. Sluit het voorbeeldvenster en keer terug naar Power Apps Studio.

De prototype-app is nu voltooid.

VorigeVolgende