Een detailgalerie maken in een canvas-app

Artikel
03/16/2023

Volg stapsgewijze instructies om een detailgalerie 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:

Een ordergalerie maken.
Een overzichtsformulier maken.
Een detailgalerie maken (dit onderwerp).

Schermgebieden definiëren

Vereisten

Voordat u van start gaat met dit onderwerp, moet u de database installeren zoals eerder beschreven in dit onderwerp. Vervolgens moet u ofwel de ordergalerie en het overzichtsformulier maken, of de app Northwind Orders (Canvas) - Begin Part 3 openen, die al die galerie en dat formulier bevat.

Nog een titelbalk maken

Selecteer bovenaan het scherm het besturingselement Label dat als titelbalk fungeert, kopieer het door op Ctrl-C te drukken en plak het door op Ctrl-V te drukken:
Wijzig het formaat van de kopie de kopie en verplaats deze, zodat het net onder het overzichtsformulier verschijnt.
Verwijder de tekst uit de kopie op een van de volgende manieren:
- Dubbelklik op de tekst om deze te selecteren en druk vervolgens op Delete.
- Stel de eigenschap Text van het label in een lege tekenreeks ("").

Een galerie toevoegen

Voeg een besturingselement Galerie toe met de indeling Leeg verticaal:

De nieuwe galerie, waarin de orderdetails worden getoond, verschijnt in de linkerbovenhoek.
Sluit het fly-out dialoogvenster voor de gegevensbron, wijzig het formaat en verplaats de detailgalerie naar de rechterbenedenhoek, onder de nieuwe titelbalk:
Stel de eigenschap Items van de detailgalerie in op deze formule:
```
Gallery1.Selected.'Order Details'
```
Als er een fout optreedt, controleer dan of de ordergalerie de naam Galerie1 heeft. Dit kunt u zien in het deelvenster Structuurweergave vlakbij de linkerrand. Als die galerie een andere naam heeft, wijzig die naam dan in Galerie1.

U hebt zojuist de twee galerieën aan elkaar gekoppeld. Wanneer de gebruiker een order selecteert in de ordergalerie, identificeert die selectie een record in de tabel Orders. Als die order een of meer regelitems bevat, wordt de record in de tabel Orders gekoppeld aan een of meer records in de tabel Orderdetails en worden gegevens uit die records weergegeven in de detailgalerie. Dit gedrag weerspiegelt de een-op-veel-relatie die voor u is gemaakt tussen de tabellen Orders en Orderdetails. De formule die u hebt opgegeven, 'doorloopt' die relatie door middel van puntnotatie:

Productnamen weergeven

Selecteer in de detailgalerie Een item toevoegen vanaf het tabblad Invoegen om de galeriesjabloon te selecteren.

Let erop dat u de galeriesjabloon selecteert in plaats van de galerie zelf. Het selectiekader moet zich iets binnen de galeriegrens bevinden, waarschijnlijk iets minder dan de galeriehoogte. Wanneer u besturingselementen in deze sjabloon invoegt, worden ze voor elk item in de galerie herhaald.
Ga naar het tabblad Invoegen en voeg een label in de detailgalerie in.

Het label moet in de galerie verschijnen; als dit niet het geval is, probeer het dan opnieuw, maar let er dan op dat u de galeriesjabloon selecteert voordat u het label invoegt.
Stel de eigenschap Text van het nieuwe label in op deze formule:
```
ThisItem.Product.'Product Name'
```
Als er geen tekst verschijnt, selecteer dan de pijl voor Order 0901 onderin de ordergalerie.
Pas het formaat van het label aan zodat de volledige tekst wordt weergegeven:

Deze uitdrukking komt van een record in de tabel Orderdetails. De record wordt in ThisItem overgebracht naar de tabel Orderproducten via een veel-op-een-relatie:

De kolom Productnaam (en andere kolommen die u gaat gebruiken) worden geëxtraheerd:

Productafbeeldingen weergeven

Ga naar het tabblad Invoegen en voeg een besturingselement van het type Afbeelding in de detailgalerie in:
Wijzig het formaat en verplaats de afbeelding en het label zodat ze naast elkaar staan.

Tip

Voor meer fijnmazige controle over de grootte en de positie van een besturingselement, begint u met het formaat ervan te wijzigen of het te verplaatsen zonder op de Alt-toets te drukken. Vervolgens gaat u verder met het wijzigen van het formaat of het verplaatsen van het besturingselement terwijl u de Alt-toets ingedrukt houdt:
Stel de eigenschap Image van de afbeelding in op deze formule:
```
ThisItem.Product.Picture
```
Ook hier verwijst de uitdrukking naar een product dat is gekoppeld aan dit orderdetail en wordt het veld Picture geëxtraheerd om weer te geven.
Maak de galeriesjabloon lager, zodat zodat meer dan één record Order Detail tegelijk wordt weergegeven:

Aantallen en kosten van producten weergeven

Ga naar het tabblad Invoegen en voeg een ander label toe in de detailgalerie, wijzig het formaat ervan en zet het nieuwe label rechts naast de productinformatie.
Stel de eigenschap Text van het nieuwe label in op deze expressie:
```
ThisItem.Quantity
```
Met deze formule wordt informatie rechtstreeks uit de tabel Orderdetails gehaald (geen relatie vereist).
Ga naar het tabblad Start en wijzig de uitlijning van dit besturingselement in Rechts:
Ga naar het tabblad Invoegen en voeg een ander label toe in de detailgalerie, wijzig het formaat ervan en zet het nieuwe label rechts naast het label met aantallen.
Stel de eigenschap Text van het nieuwe label in op deze formule:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Als u de taalcode ([$ -en-US]) niet opneemt, wordt het voor u toegevoegd op basis van uw taal en regio. Als u een andere taalcode gebruikt, moet u de $ direct na de afsluitende rechte haak (]) verwijderen. Voeg daarna uw eigen valutasymbool in op die positie.
Ga naar het tabblad Start en wijzig de uitlijning van dit besturingselement in Rechts:
Ga naar het tabblad Invoegen en voeg een ander label toe in de detailgalerie, wijzig het formaat ervan en zet het nieuwe label rechts naast de stuksprijs.
Stel de eigenschap Text van het nieuwe label in op deze formule:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Ook hier geldt: als u de taalcode ([$ -en-US]) niet opneemt, wordt het voor u toegevoegd op basis van uw taal en regio. Als u een andere taalcode gebruikt, moet u de $ direct na de afsluitende rechte haak (]) verwijderen. Voeg daarna uw eigen valutasymbool in op die positie.
Ga naar het tabblad Start en wijzig de uitlijning van dit besturingselement in Rechts:

U bent nu klaar met het toevoegen van besturingselementen aan de detailgalerie.
Selecteer in het deelvenster Structuurweergave Scherm1 om ervoor te zorgen dat de detailgalerie niet meer is geselecteerd.

Tekst toevoegen aan de nieuwe titelbalk

Ga naar het tabblad Invoegen en plaats een ander label op het scherm:
Wijzig het formaat en plaats het nieuwe label boven de afbeeldingen van de producten in de tweede titelbalk en verander de tekstkleur in wit op het tabblad Start.
Dubbelklik op de tekst van het label en typ vervolgens Product:
Kopieer en plak het productlabel, wijzig het formaat en plaats de kopie boven de kolom met aantallen.
Dubbelklik op de tekst van het nieuwe label en typ vervolgens Aantal:
Kopieer en plak het aantallabel, wijzig het formaat en plaats de kopie boven de kolom met de stuksprijs.
Dubbelklik op de tekst van het nieuwe label en typ vervolgens Stuksprijs:
Kopieer en plak het label voor de stuksprijs, wijzig het formaat en plaats de kopie boven de kolom met de totaalprijs.
Dubbelklik op de tekst in het nieuwe label en typ vervolgens Totaal:

Ordertotalen weergeven

Maak de detailgalerie korter om ruimte te maken voor de ordertotalen onderin het scherm:
Kopieer en plak de titelbalk in het midden van het scherm en verplaats de kopie vervolgens naar de onderkant van het scherm:
Kopieer en plak het productlabel vanuit de middelste titelbalk en verplaats de kopie vervolgens naar de onderste titelbalk, net links van de kolom Aantal.
Dubbelklik op de tekst van het nieuwe label en typ vervolgens deze tekst:
Ordertotalen:
Kopieer en plak het ordertotalenlabel, wijzig het formaat en plaats de kopie rechts van het ordertotalenlabel.
Stel de eigenschap Text van het nieuwe label in op deze formule:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Deze formule geeft een delegeringswaarschuwing weer, maar u kunt deze negeren omdat geen enkele order meer dan 500 producten zal bevatten.
Stel op het tabblad Start de tekstuitlijning van het nieuwe label op Rechts:
Kopieer en plak dit labelbesturingselement, wijzig het formaat en plaats de kopie onder de kolom Totaal.
Stel de eigenschap Text van de kopie in op deze formule:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Deze formule geeft een delegeringswaarschuwing weer, maar u kunt deze negeren omdat geen enkele order meer dan 500 producten zal bevatten.

Ruimte toevoegen voor nieuwe details

In elke galerie kunt u gegevens weergeven, maar u kunt deze niet bijwerken of records toevoegen. Onder de detailgalerie voegt u een gebied toe waar de gebruiker een record kan configureren in de tabel Orderdetails en voegt u die record toe aan een order.

Maak de detailgalerie korter om voldoende om ruimte te maken voor een bewerkingsruimte voor één item onder die galerie.

In deze ruimte voegt u besturingselementen toe, zodat de gebruiker een orderdetail kan toevoegen:
Ga naar het tabblad Invoegen, voeg een label in, wijzig het formaat en plaats het onder de detailgalerie.
Dubbelklik op de tekst in het nieuwe label en druk op Delete.
Stel op het tabblad Start de opvulkleur van het nieuwe label in op lichtblauw:

Een product selecteren

Ga naar het tabblad Invoegen en selecteer Besturingselementen > Keuzelijst met invoervak:

Het besturingselement Keuzelijst met invoervak verschijnt in de linkerbovenhoek.
Selecteer in het flyoutvenster de gegevensbron Orderproducten.
Selecteer op het tabblad Eigenschappen voor de keuzelijst met invoervak de optie Bewerken (naast Velden) om het deelvenster Gegevens te openen. Zorg ervoor dat Primary text en SearchField zijn ingesteld op nwind_productname.

U geeft de logische naam op, omdat het deelvenster Gegevens in dit geval nog geen weergavenamen ondersteunt:
Sluit het deelvenster Gegevens.
Ga naar het tabblad Eigenschappen aan de rechterkant, schuif naar beneden, schakel Meervoudige selectie toestaan uit en zorg ervoor dat Zoeken toestaan is ingeschakeld:
Wijzig het formaat en verplaats de keuzelijst met invoervak naar het lichtblauwe gebied, net onder de kolom met de productnaam in de detailgalerie:

In deze keuzelijst met invoervak geeft de gebruiker een record op in de tabel Product voor de record Orderdetails die de app maakt.
Terwijl u de Alt-toets ingedrukt houdt, selecteert u de pijl-omlaag van de keuzelijst met invoervak.

Tip

Door de Alt-toets ingedrukt te houden, kunt u communiceren met de besturingselementen in Power Apps Studio zonder de voorbeeldmodus te openen.
Selecteer het gewenste product in de lijst met producten.

Een productafbeelding toevoegen

Ga naar het tabblad Invoegen en selecteer Media > Afbeelding:

Het besturingselement Afbeelding verschijnt in de linkerbovenhoek:
Pas het formaat aan en verplaats de afbeelding naar het lichtblauwe gebied onder de andere productafbeeldingen en naast de keuzelijst met invoervak.
Stel de eigenschap Image van de afbeelding in op:
```
ComboBox1.Selected.Picture
```
U gebruikt dezelfde truc als toen u de foto van de medewerker in het overzichtsformulier hebt weergegeven. De eigenschap Selected van de keuzelijst met invoervak retourneert de volledige record van het product dat de gebruiker selecteert, inclusief het veld Image.

Een vak voor aantallen toevoegen

Ga naar het tabblad Invoegen en selecteer Tekst > Tekstinvoer:

Het besturingselement Tekstinvoer verschijnt in de linkerbovenhoek:
Wijzig het formaat en plaats het tekstinvoervak rechts naast de keuzelijst met invoervak, onder de kolom Aantal in de detailgalerie:

Met behulp van dit tekstinvoervak specificeert de gebruiker het veld Aantal van de record Order Details.
Stel de eigenschap Default van dit besturingselement in op "":
Ga naar het tabblad Start en stel de tekstuitlijning van dit besturingselement in op Rechts:

De eenheid en de totaalprijzen weergeven

Ga naar het tabblad Invoegen en voeg een besturingselement van het type Label bewerken toe:

Het label verschijnt in de linkerbovenhoek van het scherm:
Wijzig het formaat en plaats het label rechts van het tekstinvoerbesturingselement en stel de eigenschap Text van het label in op deze formule:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Dit besturingselement toont de Catalogusprijs van de tabel Orderproducten. Deze waarde bepaalt het veld Unit Price in de record Order Details.

Notitie

Voor dit scenario is de waarde alleen-lezen, maar in andere scenario's kan het nodig zijn dat de app-gebruiker de waarde kan wijzigen. Gebruik in dat geval een besturingselement Tekstinvoer en stel de eigenschap Default daarvan in op List Price.
Ga naar het tabblad Start en stel de tekstuitlijning van het adviesprijslabel in op Rechts:
Kopieer en plak het adviesprijslabel, wijzig het formaat en plaats de kopie rechts van het adviesprijslabel.
Stel de eigenschap Text van het nieuwe label in op deze formule:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Dit besturingselement toont de totaalprijs op basis van de aantallen die de app-gebruiker heeft opgegeven en de adviesprijs van het product dat de app-gebruiker heeft geselecteerd. Deze waarde is puur informatief voor de app-gebruiker.
Dubbelklik op het tekstinvoerbesturingselement voor aantal en typ vervolgens een getal.

Het label voor de Totaalprijs berekent de waarde opnieuw en toont de nieuwe waarde:

Een pictogram Toevoegen toevoegen

Ga naar het tabblad Invoegen en selecteer Pictogrammen > Toevoegen:

Het pictogram verschijnt in de linkerbovenhoek van het scherm.
Wijzig het formaat en verplaats dit pictogram naar de rechterrand van het lichtblauwe gebied. Stel vervolgens de eigenschap OnSelect van het pictogram in op deze formule:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
Over het algemeen maakt de functie Patch records en werkt ze bij. De specifieke argumenten in deze formule bepalen de exacte wijzigingen die de functie zal aanbrengen.
- Met het eerste argument wordt de gegevensbron opgegeven (in dit geval de tabel Orderdetails) waarin met de functie een record wordt bijgewerkt of gemaakt.
- Met het tweede argument wordt opgegeven dat de functie een record maakt met de standaardwaarden voor de tabel Orderdetails tenzij anders is aangegeven in het derde argument.
- Het derde argument geeft aan dat vier kolommen in de nieuwe record waarden van de gebruiker bevatten.
  - De kolom Order bevat het nummer van de order die de gebruiker in de galerie heeft geselecteerd.
  - De kolom Product bevat de naam van het product dat de gebruiker heeft geselecteerd in de keuzelijst met invoervak voor producten.
  - De kolom Aantal bevat de waarde die de gebruiker heeft opgegeven in het tekstinvoervak.
  - De kolom Stuksprijs bevat de adviesprijs van het product dat de gebruiker heeft geselecteerd voor dit orderdetail.
Notitie

U kunt formules maken die gegevens uit elke kolom gebruiken (in de tabel Orderproducten) voor het product dat de app-gebruiker selecteert in de keuzelijst met invoervak waarin producten worden weergegeven. Wanneer de gebruiker een record selecteert in de tabel Orderproducten, verschijnt niet alleen de productnaam in die keuzelijst, maar ook de eenheidsprijs van het product op een label. Elke opzoekwaarde in een canvas-app verwijst naar een volledige record, niet alleen naar een primaire sleutel.

Met de functie Vernieuwen wordt ervoor gezorgd dat de tabel Orders de record weergeeft die u zojuist hebt toegevoegd aan de tabel Orderdetails. De functie Reset wist de gegevens voor product, aantal en stuksprijs, zodat de gebruiker gemakkelijker een ander orderdetail voor dezelfde order kan creëren.
Druk op F5 en selecteer vervolgens het pictogram Toevoegen.

De order geeft de informatie weer die u hebt opgegeven:
(optioneel) Voeg nog een item toe aan de order.
Druk op Esc om de voorbeeldmodus af te sluiten.

Een orderdetail verwijderen

Selecteer in het midden van het scherm de sjabloon van de detailgalerie:
Ga naar het tabblad Invoegen en selecteer Pictogrammen > Prullenbak:

Het Prullenbak-pictogram verschijnt in de linkerbovenhoek van de galeriesjabloon.
Wijzig het formaat en verplaats dit het Prullenbak-pictogram naar de rechterzijde van de detailgaleriesjabloon. Stel vervolgens de eigenschap OnSelect van het pictogram in op deze formule:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Op dit moment kunt u een record niet rechtstreeks uit een relatie verwijderen, dus met de functie Verwijderen wordt een record rechtstreeks uit de gerelateerde tabel verwijderd. ThisItem specificeert de record die moet worden verwijderd, overgenomen uit dezelfde record in de detailgalerie waar het prullenbakpictogram verschijnt.

Nogmaals, in de bewerking worden gegevens in de cache gebruikt. De functie Vernieuwen informeert de tabel Orders dus dat de app een van de gerelateerde tabellen heeft gewijzigd.
Druk op F5 om de voorbeeldmodus te openen en selecteer vervolgens het prullenbakpictogram naast elke Order Details-record die u uit de bestelling wilt verwijderen.
Probeer verschillende orderdetails aan uw orders toe te voegen en daaruit te verwijderen:

Conclusie

Samengevat: u hebt nog een galerie toegevoegd om orderdetails en besturingselementen weer te geven waarmee u een orderdetail in de app kunt toevoegen en verwijderen. U hebt de volgende elementen gebruikt:

Een tweede galeriebesturingselement, gekoppeld aan de ordergalerie via een één-op-veel-relatie: Gallery2.Items = Gallery1.Selected.'Order Details'
Een veel-op-een-relatie van de tabel Orderdetails naar de tabel Orderproducten: ThisItem.Product.'Product Name' en ThisItem.Product.Picture
De functie Choices om een lijst met producten te krijgen: Choices( 'Order Details'.Product' )
De eigenschap Selected van een keuzelijst met invoervak als de complete veel-op-één gerelateerde record: ComboBox1.Selected.Picture en ComboBox1.Selected.'List Price'
De functie Patch om een Order Details-record te maken: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
De functie Remove om een Order Details-record te verwijderen: Remove( 'Order Details', ThisItem )

Deze reeks onderwerpen is een korte uitleg van het gebruik van Dataverse-relaties en keuzes in een canvas-app voor educatieve doeleinden. Voordat u een app voor productie vrijgeeft, moet u ook nog duiken in de onderwerpen veldvalidatie, foutafhandeling en vele andere factoren.

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).

Delen via