Een ordergalerie maken in een canvas-app

Volg stapsgewijze instructies om een ordergalerie te maken in een canvas-app, voor het beheren van fictieve gegevens in de Northwind Traders-database. Dit onderwerp is deel van een serie waarin wordt uitgelegd hoe u een zakelijke app bouwt op relationele gegevens in Microsoft Dataverse. Voor de beste resultaten leest u de betreffende onderwerpen door in deze volgorde:

1. Een ordergalerie maken (dit onderwerp).
2. Een overzichtsformulier maken.
3. Een detailgalerie maken.

Vereisten

• Installeer de Northwind Traders-database en -apps.
• Lees het onderwerp Overzicht van de canvas-app voor Northwind Traders.

Een lege app maken

Maak een lege canvas-app en geef deze een naam zoals "Mijn Northwind-orders (canvas-app)".

De gegevens toevoegen

1. Selecteer in het linkerdeelvenster Gegevens > Gegevens toevoegen > Zoeken naar en selecteer de tabel Orders.

   

   De tabel Orders bevat veel velden van verschillende typen:

   

   Elk veld heeft een weergavenaam en een Naam, die ook wel de logische naam wordt genoemd. Beide namen verwijzen naar hetzelfde object. Over het algemeen gebruikt u de weergavenaam wanneer u een app bouwt, maar in sommige gevallen is de meer cryptische Naam vereist, zoals genoteerd in een procedure.

2. Omdat we hierna werken met schermen en besturingselementen, moet u in Power Apps Studio teruggaan naar de structuurweergave aan de linkerkant door op het pictogram met de drie gestapelde vierkanten te klikken. U kunt op elk moment terugkeren naar de Gegevensbronne door op het cilinderpictogram te klikken.

De ordergalerie maken

1. Selecteer op het tabblad Invoegen de optie Galerie > Leeg verticaal om een besturingselement van het type Galerie toe te voegen, waarin de orders worden getoond.

   

   Het besturingselement wordt op het canvas geplaatst en er verschijnt een flyoutvenster waarin wordt gevraagd met welke gegevensbron u verbinding wilt maken.

2. We kunnen hier de galerie rechtstreeks verbinding laten maken met Orders, maar in plaats daarvan willen we de sorteervolgorde van de galerie kunnen regelen. Negeer het flyoutvenster en stel in de formulebalk de eigenschap Items van de galerie in op deze formule:

   Sort( Orders, 'Order Number', Descending )
   

   De functie Sort rangschikt de lijst, zodat de nieuwste order (met het hoogste ordernummer) als eerste wordt getoond.

   

3. Na enkele ogenblikken verschijnt de weergave Resultaat onder de formulebalk. Trek de pijl links naar beneden om het resultaat van deze formule te zien. Schuif naar rechts om de kolom Order Number te zien en zorg ervoor dat het deze op de gewenste manier is gesorteerd (van hoog naar laag).

   

4. Open op het tabblad Properties aan de rechterkant de lijst Indeling:

   

5. Selecteer Titel en ondertitel in de lijst met opties.

   

   Twee besturingselementen van het type Label zijn toegevoegd in de galeriesjabloon. Standaard tonen deze besturingselementen twee kolommen van de tabel Orders. Dit gaat u hierna wijzigen. De sjabloon van de galerie wordt verticaal gerepliceerd voor elke record in de tabel.

6. Selecteer in het tabblad Eigenschappen bij de rechterrand de optie Bewerken (naast Velden).

   

7. Selecteer in het deelvenster Gegevens de optie Titel1 (of selecteer de bovenste label in de galeriesjabloon).

8. Stel in de formulebalk de eigenschap Text van het label in op deze expressie:

   "Order " & ThisItem.'Order Number'
   

   

   Het ordernummer staat bovenaan bij elk galerie-item. In de galeriesjabloon ThisItem wordt toegang verleend tot alle velden in de tabel Orders.

9. Selecteer in het deelvenster Gegevens de optie Subtitel1 (of selecteer de onderste label in de galeriesjabloon):

   

10. Stel in de formulebalk de eigenschap Text van het label in op deze expressie:

    ThisItem.Customer.Company
    

    

    Nadat u deze formule heeft ingevoerd, kan er even een rode kronkelende lijn voor een fout worden weergegeven. De fout zou moeten verdwijnen als u iets buiten de formulebalk selecteert en dan de cursor weer terugzet in de formulebalk. Als de fout zich blijft voordoen of als u geen waarde ziet, selecteert u het tabblad Weergave, selecteert u Gegevensbronnen en vernieuwt u vervolgens de tabel Orders door het weglatingsteken (...) rechts van de naam van de gegevensbron te selecteren.

    Wanneer u ThisItem.Customer opgeeft, maakt u gebruik van een veel-op-een-relatie tussen de tabellen Orders en Klanten en haalt u de klantrecord op die aan elke order is gekoppeld. Uit de klantrecord haalt u gegevens die worden weergegeven in de kolom Company.

    U kunt alle Relaties van de tabel Orders weergeven voor andere tabellen, inclusief de tabel Klant:

    

11. Sluit het deelvenster Gegevens door te klikken op het pictogram voor sluiten (X) in de rechterbovenhoek.

De status van elke bestelling tonen

In deze procedure voegt u ruimte toe in de galerie voor een label en configureert u deze om de status van elke bestelling in een andere kleur weer te geven, op basis van de gegevens.

1. Maak in de galeriesjabloon het eerste label, Titel1, smaller:

   

2. Herhaal de vorige stap met het tweede label, Ondertitel1:

   

3. Selecteer met de galeriesjabloon (of een besturingselement in de sjabloon) Etiket op het tabblad Invoegen:

   

4. Verplaats het nieuwe label naar een plaats rechts van het label Titel1:

   

5. Stel de eigenschap Text van het nieuwe label in op deze expressie:

   ThisItem.'Order Status'
   

   

   In de tabel Orders bevat het veld Orderstatus een waarde uit de keuze Orderstatus. Een keuze is vergelijkbaar met een opsomming in andere programmeerprogramma´s. Elke set opties is gedefinieerd in de database, dus gebruikers kunnen alleen de opties specificeren die in de set zitten. De keuze Orderstatus is ook algemeen, niet lokaal. U kunt deze dus in andere tabellen gebruiken:

   

   Elke optie in een set heeft een naam die wordt weergegeven als u deze in een label weergeeft. Deze namen kunt u lokaliseren en de app herkent altijd dezelfde optie, of u nu als Engelse gebruiker Apple selecteert, als Franse gebruiker Pomme of als Spaanse gebruiker Manzana. Om deze reden kunt u geen formule maken die voor een optie afhankelijk is van een hardgecodeerde string, zoals later blijkt in dit onderwerp.

   In formules moet u Orders Status plaatsen tussen enkele aanhalingstekens, omdat het een spatie bevat. Die naam werkt echter op dezelfde manier als elke andere naam in Power Apps, zoals Customer of Bedrijf.

6. Op het tabblad Start vergroot u de lettergrootte van het statuslabel tot 20 punten en lijnt u de tekst rechts uit:

   

7. Stel in de formulebalk de eigenschap Color van het statuslabel in op deze formule:

   Switch( ThisItem.'Order Status',
       'Orders Status'.Closed, Green,
       'Orders Status'.New, Black,
       'Orders Status'.Invoiced, Blue,
       'Orders Status'.Shipped, Purple
   )
   

   

   Power Apps voorkomt dat u een formule maakt die afhankelijk is van een hardgecodeerde tekenreeks voor elke optie in een set, omdat dergelijke formules ongepaste resultaten kunnen opleveren als de optienamen vertaald zijn. In plaats daarvan bepaalt de functie Switch de kleur op basis van de tekenreeks die op het label verschijnt, op basis van de instellingen van de gebruiker.

   Nu deze formule is gedefinieer, verschijnen verschillende statuswaarden in verschillende kleuren, zoals de vorige afbeelding laat zien.

Totaalbedrag van elke order weergeven

1. Selecteer het eerste item in de galerie, dat is de galeriesjabloon:

   

2. Selecteer op het tabblad Invoegen de optie Label om een ander label toe te voegen:

   

3. Verplaats het nieuwe label, zodat het onder het statuslabel verschijnt:

   

4. Stel in de formulebalk de eigenschap Text van het nieuwe label in op deze formule:

   Text( Sum( ThisItem.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
   

   

   In deze formule worden met de functie Som de records opgeteld in de tabel Orderdetails die zijn gekoppeld aan elke record in de tabel Order via een een-op-veel-relatie. Deze regelitems vormen samen de orders. U gebruikt dezelfde één-op-veel-relatie om de regelitems rechtsonder op het scherm weer te geven en te bewerken.

   Deze formule geeft een blauwe onderstreping en een delegeringswaarschuwing weer, omdat Dataverse geen ondersteuning biedt voor het delegeren van complexe statistische functies (bijvoorbeeld de som van een vermenigvuldiging). U kunt deze informatie negeren, omdat geen enkele order in dit voorbeeld meer dan 500 regelitems bevat. Indien dat nodig mocht zijn voor een andere app, kunt u die limiet verhogen in App-instellingen.

   De functie Text in deze formule voegt een valutasymbool toe en noteert het resultaat met scheidingstekens voor duizendtallen en decimalen. Zoals geschreven bevat de formule de taalcode voor Amerikaans Engels ([$-en-US]) en een dollarteken ($). Als u de taalcode verwijdert, wordt deze vervangen door een code op basis van uw taalinstellingen en toont het label de juiste notatie voor die code. Als u het dollarsymbool weglaat, wordt in het label het juiste valutasymbool weergegeven op basis van de instellingen van de gebruiker. U kunt echter een ander symbool forceren door het dollarteken te vervangen door het symbool dat u verkiest.

5. Op het tabblad Start wijzigt u de lettergrootte van het nieuwste label tot 20 punten en lijnt u de tekst ervan rechts uit:

   

6. Verplaats de galerie naar de linkerrand van het scherm en maak de galerie smaller om ruimte vrij te maken.

7. Maak de galerie hoger, zodat deze bijna net zo groot is als het scherm, maar laat bovenaan een beetje ruimte over voor de titelbalk die u aan het begin van de volgende onderwerp toevoegt:

   

Overzicht

Om samen te vatten: u bent begonnen met het bouwen van een canvas-app met één scherm door de ordergalerie toe te voegen, die de volgende elementen bevat:

• Een expressie om het ordernummer weer te geven: "Orders " & ThisItem.OrderNumber
• Een veld in een veel-op-veel-relatie: ThisItem.Customer.Company
• Een label met de naam van een optie in een set: ThisItem.'Order Status'
• Een label dat van formaat verandert op basis van de optie in een set waarvan het label wordt weergegeven: Switch( ThisItem.'Order Status', 'Orders Status'.Closed, Green, ...
• Een complexe verzamelfunctie voor een een-op-veel-relatie: Sum( ThisItem.'Order Details', Quantity * 'Unit Price' )

Volgend onderwerp

In het volgende onderwerp voegt u een besturingselement van het type Formulier bewerken toe, om een samenvatting weer te geven en te bewerken van de order die de gebruiker selecteert in de galerie die u zojuist hebt gemaakt.

Het overzichtsformulier maken

Notitie

Laat ons uw taalvoorkeuren voor documentatie weten! Beantwoord een korte enquête. (houd er rekening mee dat deze in het Engels is)

De enquête duurt ongeveer zeven minuten. Er worden geen persoonlijke gegevens verzameld (privacyverklaring).