De indeling van een gegevensformulier begrijpen in Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

Met PowerApps kunt u gemakkelijk formulieren maken die er mooi uitzien en efficiënt te gebruiken zijn.In PowerApps, you can easily create forms that are attractive and efficient to use. Neem bijvoorbeeld dit eenvoudige verkooporderformulier:For example, consider this basic form for recording sales orders:

Voorbeeld van verkooporderformulier

In deze zelfstudie nemen we de stappen door die nodig zijn om dit formulier te maken.In this tutorial, we'll walk through the steps to create this form. We kijken ook naar een paar geavanceerde onderwerpen, zoals het dynamisch schalen van velden om de beschikbare ruimte te vullen.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Voordat u begintBefore you start

Als u niet vertrouwd bent met PowerApps (of apps alleen automatisch hebt gegenereerd), moet u een volledig nieuwe app bouwen voordat u in dit onderwerp duikt.If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. Door een volledig nieuwe app te bouwen raakt u vertrouwd met vereiste concepten, zoals het toevoegen van gegevensbronnen en besturingselementen, die in dit onderwerp worden genoemd, maar niet verder uitgelegd.By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. Maak een volledig nieuwe tablet-app.Create a tablet app from scratch.

    Alles wat in dit onderwerp wordt besproken, geldt ook voor de telefoonindeling, maar telefoon-apps hebben vaak maar één verticale kolom.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Voeg de entiteit Sales order in de Common Data Service toe als gegevensbron voor de app.Add the Sales order entity in the Common Data Service as a data source for the app.

    Buiten deze zelfstudie kunt u elke gegevensbron gebruiken, met inbegrip van de SharePoint-lijsten en Excel-tabellen.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Voeg een verticaal besturingselement Galerie toe en stel de eigenschap Items in op 'Verkooporder'.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (optioneel) Wijzig de Lay-out van de galerie om alleen de Titel en subtitel weer te geven zodat deze overeenkomen met de voorbeelden in deze zelfstudie.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Lijst met verkooporders

  4. Tik of klik in de galerie op SO004.In the gallery, click or tap SO004.

    Lijst met verkooporders

    Dit record wordt weergegeven in het formulier dat u bouwt door stappen verderop in dit onderwerp te volgen.This record will appear in the form that you build by following steps later in this topic.

Titelbalk toevoegenAdd a title bar

  1. Voeg een leeg scherm toe waar u het formulier moet plaatsen.Add a blank screen where you'll put the form.

    Buiten deze zelfstudie kunt u de besturingselementen Galerie en Formulier bewerken op hetzelfde scherm plaatsen, maar u hebt meer werkruimte als u ze op afzonderlijke schermen plaatst.Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. Voeg een Labelbesturingselement toe bovenaan het nieuwe scherm en stel de eigenschap Text in op deze expressie:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Verkooporder " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    Het label toont het ordernummer van het record dat u hebt geselecteerd in de galerie.The label shows the sales-order number of the record that you selected in the gallery.

  3. (optioneel) Maakt het label als volgt op:(optional) Format the label as follows:

    1. Stel de eigenschap Align in op Center.Set its Align property to Center.

    2. Stel de eigenschap Size in op 20.Set its Size property to 20.

    3. Stel de eigenschap Fill in op Navy.Set its Fill property to Navy.

    4. Stel de eigenschap Color in op White.Set its Color property to White.

    5. Stel de eigenschap Width in op Parent.Width.Set its Width property to Parent.Width.

    6. Stel de eigenschappen X en Yin op 0.Set its X and Y properties to 0.

      Titelbalk

Een formulier toevoegenAdd a form

  1. Voeg een besturingselement Formulier bewerken toe, verplaats het en wijzig de grootte tot het het volledige scherm onder het label vult.Add an Edit form control, and then move and resize it to fill the screen under the label.

    In de volgende stap maakt u verbinding tussen het besturingselement en de gegevensbron Verkooporder met behulp van het rechterdeelvenster, niet de formulebalk.In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. Als u de formulebalk gebruikt, worden standaard geen velden weergegeven in het formulier.If you use the formula bar, the form won't show any fields by default. U kunt altijd alle gewenste velden weergeven door een of meer selectievakjes in het rechterdeelvenster te selecteren.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. Klik of tik in het rechterdeelvenster op de Pijl-omlaag naast Geen gegevensbron geselecteerd en klik of tik vervolgens op Verkooporder.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Een standaardreeks velden uit de gegevensbron Verkooporder wordt weergegeven in een eenvoudige indeling met drie kolommen.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Veel zijn er echter leeg, en het kan even duren voor ze op hun uiteindelijke posities staan.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Stel de eigenschap Item van het formulier in op Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    Het formulier toont het record dat u hebt geselecteerd in de galerie, maar de standaardreeks velden komt mogelijk niet overeen met wat u in uw uiteindelijke product wilt.The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. Verberg elk van deze velden in het rechterdeelvenster door het selectievakje uit te schakelen:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • VerkoopordernummerSales order ID
    • AccountAccount
    • VerkoperSales person
    • AccountcontactAccount contact
  5. Verplaats het veld Orderstatus door het naar links te slepen en het vervolgens neer te zetten aan de andere kant van het veld Klantorderreferentie.Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    Het scherm moet lijken op het volgende voorbeeld:Your screen should resemble this example:

    Verkooporder in een basisindeling met drie kolommen

Selecteer een gegevenskaartSelect a data card

Elk weergegeven veld heeft een bijbehorende gegevenskaart op het formulier.Each field displayed has a corresponding data card on the form. Deze kaart omvat een set besturingselementen voor de titel van het veld, een invoervak, een ster (die wordt weergegeven als het veld vereist is) en een validatiefoutbericht.This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

U kunt ook rechtstreeks op het formulier kaarten selecteren.You can also select cards directly on the form. Als u een kaart selecteert, wordt erboven een zwart bijschrift weergegeven.When a card is selected, a black caption appears above it.

Geselecteerde gegevenskaart

Notitie

Om een kaart te verwijderen (niet alleen te verbergen), selecteert u deze en drukt u vervolgens op Delete.To delete a card (not just hide it), select it, and then press Delete.

Kaarten in kolommen rangschikkenArrange cards in columns

Standaard hebben formulieren in tablet-apps drie kolommen, en die in telefoonapps hebben er één.By default, forms in tablet apps have three columns, and those in phone apps have one. U kunt niet alleen het aantal kolommen in een formulier opgeven, maar ook of alle kaarten binnen de kolomgrenzen moeten passen.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

In deze afbeelding is het aantal kolommen in het formulier gewijzigd van drie naar vier met het selectievakje Uitlijnen op kolommen geselecteerd.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. De kaarten in het formulier zijn automatisch gerangschikt om in de nieuwe indeling te passen.The cards in the form were arranged automatically to fit the new layout.

Verkooporder in basisindeling met vier kolommen

Formaat van kaarten aanpassen in meerdere kolommenResize cards across multiple columns

Afhankelijk van de gegevens op elke kaart wilt u misschien dat sommige kaarten in één kolom passen en andere kaarten meerdere kolommen in beslag nemen.Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. Als een kaart meer gegevens bevat dan u wilt weergeven in één kolom, kunt u de kaart breder maken door deze te selecteren en vervolgens de handgreep op de rechter- of linkerrand van het selectievakje te slepen.If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. Terwijl u de greep sleept, wordt de kaart uitgelijnd op kolomgrenzen.As you drag the handle, the card will "snap" to column boundaries.

Als u ervoor wilt zorgen dat uw ontwerp flexibeler is, maar een bepaalde structuur behoudt, kunt u het aantal kolommen verhogen naar 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Met deze wijziging kunt u eenvoudig configureren dat elke kaart het volledige formulier, de helft van het formulier, een derde, een kwart, een zesde, enzovoorts bedekt.With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. Laten we dit in actie zien.Let's see this in action.

  1. Stel in het formulier in het rechterdeelvenster het aantal kolommen in op 12.In the right-hand pane, set the number of columns in the form to 12.

    Aantal kolommen specificeren

    Het formulier verandert niet zichtbaar, maar u hebt meer uitlijnpunten als u de linker- of rechtergreep sleept.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Wijzig de breedte van de kaart Orderdatum door de rechterhandgreep naar het eerstvolgende uitlijnpunt aan de rechterkant te slepen.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    De kaart bedekt vier van 12 kolommen van het formulier (of 1/3 van het formulier), in plaats van slechts drie van de 12 kolommen van het formulier (of 1/4 van het formulier).The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). Wanneer u een kaart uitbreidt met één uitlijnpunt, bedekt de kaart een extra 1/12 van het formulier.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Het formaat van een kaart wijzigen met slepen en neerzetten

  3. Herhaal de vorige stap met de kaarten Bestelstatus en Klantorderreferentie.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Drie kaarten in de eerste rij

  4. Pas het formaat van de kaarten Naam en Beschrijving aan, zodat er zes kolommen (of 1/2) van het formulier worden bedekt.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. We laten de eerste twee regels van het bezorgadres over de hele breedte van het formulier lopen:Make the first two lines of the delivery address stretch entirely across the form:

Dat is alles.All done. Ons formulier is klaar, met een combinatie van rijen met verschillende aantallen kolommen:We have our desired form, mixing rows with different numbers of columns:

Verkooporder in indeling met 12 kolommen met aangepaste veldgrootte

Besturingselementen in een kaart bewerkenManipulate controls in a card

Het bezorgadres bevat verschillende soorten gegevens die we visueel willen groeperen voor de gebruiker.The delivery address comprises several pieces of information that we want to visually group together for the user. Elk veld blijft deel uitmaken van de eigen gegevenskaart, maar we kunnen de besturingselementen binnen de kaart manipuleren, zodat ze beter bij elkaar passen.Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  1. Selecteer de kaart Eerste regel van het bezorgadres, selecteer het label in deze kaart en verwijder vervolgens de eerste drie woorden uit de tekst.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Tekst van eerste regel van afleveradres wijzigen

  2. Selecteer de kaart Tweede regel van het bezorgadres, selecteer het label in deze kaart en verwijder vervolgens alle tekst.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Het kan verleidelijk zijn om gewoon het labelbesturingselement verwijderen en in de meeste gevallen kan dat ook prima.It may be tempting to simply remove the label control and, in many cases, that will work fine. De kans bestaat echter dat er formules in het formulier afhankelijk zijn van de aanwezigheid van dit besturingselement.But formulas might depend on that control being present. Een veiligere aanpak is om de tekst te verwijderen of de eigenschap Visible van het besturingselement in te stellen op false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Tekst van tweede regel van afleveradres wijzigen

  3. Verplaats in dezelfde kaart het invoervak over het label om de afstand tussen de eerste en tweede regel van het adres te verkleinen.In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    De hoogte van de kaart wordt kleiner als de inhoud ervan minder ruimte inneemt.The height of the card shrinks when its contents take up less space.

    Tekst van tweede regel van afleveradres wijzigen

Dan gaan we nu verder met de derde adresregel.Now let's turn our attention to the third line of the address. Net als bij de andere adresregels, gaan we de tekst van de labels voor deze kaarten inkorten en plaatsen we het Tekstinvoervak rechts van elk label.Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. Dit zijn de stappen voor de kaart Staat:Here are the steps for the State card:

StapStep BeschrijvingDescription ResultaatResult
11 Selecteer de kaart Staat zodat er selectiegrepen worden weergegeven rond de kaart.Select the State card so that grab handles appear around it. Een kaart selecteren
22 Selecteer het label in de kaart zodat er rondom selectiegrepen worden weergegeven.Select the label within this card so that grab handles appear around it. Een besturingselement selecteren binnen een kaart
33 Plaats de cursor rechts van de tekst en verwijder vervolgens het gedeelte dat we niet nodig hebben.Place the cursor to the right of the text, and then delete the portion that we don't need. De tekst in een besturingselement binnen een kaart wijzigen
44 Gebruik de selectiegrepen aan de zijkant om het formaat van het labelbesturingselement aan te passen aan de nieuwe tekstgrootte.Using the grab handles on the sides, size the label control to fit the new text size. Het formaat van een besturingselement binnen een kaart wijzigen
55 Selecteer het besturingselement voor tekstinvoer binnen deze kaart.Select the text input control within this card. Een ander besturingselement selecteren binnen de kaart
66 Gebruik de selectiegrepen aan de zijkanten om het formaat van het tekstinvoerbesturingselement aan te passen.Using the grab handles on the sides, size the text input control to the size that you want. Het formaat van een besturingselement binnen een kaart wijzigen
77 Sleep het tekstinvoervak omhoog en rechts van het labelbesturingselement en zet het tekstinvoervak vervolgens neer.Drag the text input box up and to the right of the label control, and then drop the text input box. Een besturingselement verplaatsen binnen een kaart
De kaart Staat is nu klaar.Our modifications to the State card are now complete. De kaart 'State' is nu klaar

De derde adresregel ziet er nu zo uit:The result for the complete third address line:

Afleveradres met een meer beknopte derde regel

Houd er rekening mee dat veel van de kaarten standaard dynamische formules gebruiken voor hun eigenschappen.Note that many of the cards start out with dynamic formulas for their properties. Het besturingselement voor tekstinvoer waarvoor we hierboven de grootte en positie hebben aangepast, had bijvoorbeeld een eigenschap Width op basis van de breedte van het bovenliggende besturingselement.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Als u een besturingselement verplaatst of het formaat aanpast, worden deze dynamische formules vervangen door statische waarden.When you move or resize a control, these dynamic formulas are replaced with static values. Desgewenst kunt u de dynamische formules herstellen met behulp van de formulebalk.If you want, you can restore the dynamic formulas by using the formula bar.

Kaarten niet uitlijnen op kolommenTurning off Snap to columns

Soms is het handig om nog meer controle te hebben dan mogelijk is met het standaardaantal kolommen van 12.Sometimes you'll want finer control than the standard 12 columns can provide. Voor deze gevallen kunt u Uitlijnen op kolommen uitschakelen en de kaarten handmatig positioneren.For these cases, you can turn off Snap to columns and then position cards manually. Het formulier wordt nog steeds uitgelijnd op 12 kolommen, maar u kunt ook de Alt-toets ingedrukt houden om de positie en grootte van een kaart handmatig te wijzigen.The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

In ons voorbeeld hebben de vier onderdelen die de derde adresregel vormen, allemaal exact dezelfde breedte.In our example, the four components that make up the third line of the address all have exactly the same width. Maar dit hoeft niet per se de beste indeling te zijn, aangezien plaatsnamen vaak langer zijn dan de afkortingen van staten en het Tekstinvoervak voor land/regio kort is vanwege de lengte van het label.But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

Schakel Uitlijnen op kolommen in het rechterdeelvenster uit om deze ruimte te optimaliseren en houd vervolgens de Alt-toets ingedrukt terwijl u deze kaarten dimensioneert en plaatst.To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. Zolang u de Alt-toets ingedrukt houdt, worden bij alle besturingselementen zwarte bijschriften weergegeven.Whenever you hold down the Alt key, all controls show black captions. Dit gedrag is zo ontworpen om u de namen van besturingselementen te tonen.This behavior is by design to show you control names.

Positie en grootte aanpassen met de Alt-toets ingedrukt

Na zorgvuldige positionering van de kaarten, hebben de velden allemaal de juiste grootte, met een gelijke horizontale afstand tussen de velden:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Derde regel van afleveradres met handmatig geplaatste velden

Kortom, wat zijn de verschillen tussen het wel of niet Uitlijnen op kolommen?In summary, what are the differences when Snap to columns is on versus off?

GedragBehavior Uitlijnen op kolommen AANSnap to columns On Uitlijnen op kolommen UITSnap to columns Off
Formaatwijziging door uitlijnen opResize snaps to Aantal geselecteerde kolommen:Number of columns you select:
(1, 2, 3, 4, 6 of 12)1, 2, 3, 4, 6, or 12
12 kolommen12 columns
Automatische uitlijning kan worden onderdruktResize snap can be overriden NeeNo Ja, met de Alt-toetsYes, with Alt key
De indeling van kaarten wordt automatisch aangepast tussen de rijen (hierover later meer)Cards automatically re-layout between rows (more on this later) JaYes NeeNo

Breedte en hoogte instellenSet width and height

Net als met alles in PowerApps, wordt de indeling van het formulier bepaald door eigenschappen in de besturingselementen van een kaart.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Zoals al beschreven, kunt u de waarden van deze eigenschappen wijzigen door besturingselementen naar verschillende locaties te slepen of selectiegrepen te slepen om de grootte van besturingselementen aan te passen.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Maar u ontdekt ook situaties waarin u deze eigenschappen beter wilt begrijpen en zelf preciezer wilt manipuleren, vooral wanneer u met behulp van formules dynamische formulieren maakt.But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

Basisindeling: X, Y en WidthBasic Layout: X, Y, and Width

De eigenschappen X en Y bepalen de positie van kaarten.The X and Y properties control the position of cards. Wanneer we met besturingselementen op het canvas werken, geven deze eigenschappen een absolute positie aan.When we work with controls on the raw canvas, these properties provide an absolute position. Op een formulier hebben deze eigenschappen een andere betekenis:In a form, these properties have a different meaning:

  • X: volgorde binnen een rij.X: Order within a row.
  • Y: rijnummer.Y: Row number.

Vergelijkbaar met besturingselementen op het canvas, bepaalt de eigenschap Width de minimale breedte van de kaart (verderop meer hierover).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Laten we eens kijken naar de eigenschappen X, Y en Width van de kaarten op ons formulier:Let's take a look at the X, Y, and Width properties of the cards in our form:

X- en Y-coördinaten op verkooporderformulier

Overlopende rijenOverflowing rows

Wat gebeurt er als de kaarten op een rij te breed zijn voor de rij?What happens if the cards on a row are too wide to fit on that row? Normaal gesproken hoeft u zich geen zorgen te maken over deze mogelijkheid.Normally you don't need to worry about this possibility. Als de optie Uitlijnen op kolommen is ingeschakeld, worden deze drie eigenschappen automatisch aangepast zodat alles mooi in de rijen past, zonder overloop.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Maar als deze functie Uitlijnen op kolommen is uitgeschakeld of een of meer kaarten een formule met Width bevatten, kan er overloop van een rij plaatsvinden.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. In dit geval lopen kaarten automatisch door en wordt er in feite een nieuwe rij gemaakt.In this case, the cards will automatically wrap so that, effectively, another row is created. Laten we bijvoorbeeld handmatig de waarde van de eigenschap Width van de kaart Klantorderreferentie (eerste rij, derde item) wijzigen in 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Handmatig het formaat van een kaart wijzigen voor overloop naar nieuwe rij

De drie kaarten op de bovenste rij passen niet meer in de horizontale ruimte en er is een nieuwe rij gemaakt om de overloop op te vangen.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Het Y-coördinaat voor al deze kaarten is nog steeds 0, en de kaarten Naam en Beschrijving hebben nog steeds de waarde 1 voor Y.The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. Kaarten die verschillende Y-waarden hebben worden niet samengevoegd in rijen.Cards that have different Y values aren't merged across rows.

U kunt dit gedrag inzetten om een volledig dynamische indeling te maken waarin kaarten worden geplaatst volgens een Z-volgorde, waarbij de horizontale ruimte zo veel mogelijk wordt opgevuld voordat er naar de volgende rij wordt gegaan.You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. Om dit effect te bereiken, geeft u alle kaarten dezelfde Y-waarde en gebruikt u X voor de volgorde van de kaarten.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Ruimten opvullen: WidthFitFilling spaces: WidthFit

De overloop in het laatste voorbeeld resulteert in een ruimte na de kaart Orderstatus, de tweede kaart van de eerste rij.The overflow in the last example created a space after the Order status card, which was the second card in the first row. We kunnen dit oplossen door handmatig de eigenschap Width van de twee resterende kaarten aan te passen om deze ruimte op te vullen, maar dit is nogal omslachtig.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Een betere oplossing is om de eigenschap WidthFit te gebruiken.As an alternative, use the WidthFit property. Als deze eigenschap is ingesteld op true voor een of meer kaarten op een rij, wordt eventuele witruimte op de rij evenredig verdeeld over de kaarten.If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. Daarom hebben we eerder specifiek gezegd dat de eigenschap Width van een kaart een minimale waarde vertegenwoordigt. In de praktijk kan een kaart echter breder worden weergegeven.This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. Door deze eigenschap wordt een kaart nooit verkleind, alleen uitgebreid.This property will never cause a card to shrink, only expand.

Als we WidthFit op true hebben ingesteld op de kaart Orderstatus, wordt de beschikbare ruimte ingevuld terwijl de eerste kaart ongewijzigd blijft:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit ingesteld op 'true' voor tweede kaart

Als we WidthFit ook op true instellen voor de kaart Orderdatum,wordt de beschikbare ruimte gelijkmatig verdeeld over beide kaarten:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit ingesteld op 'true' voor eerste en tweede kaart

Houd er rekening mee dat selectiegrepen van deze kaarten rekening houden met de extra breedte die wordt verkregen met WidthFit, niet met de minimumbreedte die wordt verkregen met de eigenschap Width.Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. Het kan verwarrend zijn om de eigenschap Width aan te passen terwijl WidthFit is ingeschakeld. U kunt de eigenschap daarom uitschakelen, Width wijzigen en dan de eigenschap weer inschakelen.It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

Wanneer kan WidthFit nuttig zijn?When might WidthFit be useful? Als u een veld hebt dat alleen in bepaalde situaties wordt gebruikt, kunt u de eigenschap Visible van het veld instellen op false, zodat de andere kaarten in de rij automatisch de vrije ruimte rond het veld opvullen.If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. U kunt een formule gebruiken waarmee een veld alleen wordt weergegeven als een ander veld een bepaalde waarde heeft.You might want to use a formula that shows a field only when another field has a particular value.

Hier stellen we de eigenschap Visible van het veld Orderstatus in op de statische waarde false:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit ingesteld op 'true' voor eerste kaart met het veld 'Order status' onzichtbaar

Doordat de tweede kaart niet wordt weergegeven, kan de derde kaart nu weer in dezelfde rij als de eerste kaart worden weergegeven.With the second card effectively removed, the third card can now return to the same row as the first card. De eigenschap WidthFit voor de eerste kaart is nog steeds ingesteld op true, dus wordt alleen deze kaart uitgebreid om de beschikbare ruimte op te vullen.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Omdat Orderstatus onzichtbaar is, kan deze niet zo gemakkelijk worden geselecteerd op het canvas.Because Order status is invisible, you can't select it as easily on the canvas. U kunt echter elk besturingselement, zichtbaar of niet, in een hiërarchische lijst van de besturingselementen aan de linkerkant van het scherm selecteren.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

De eigenschap Height bepaalt de hoogte van een kaart.The Height property governs the height of each card. Kaarten hebben een variant van WidthFit voor Height en deze eigenschap is altijd ingesteld op true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Stel dat er een eigenschap HeightFit bestaat, maar zoek er niet naar in het product omdat een dergelijke eigenschap nog niet wordt weergegeven.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

U kunt dit gedrag niet uitschakelen, waardoor het aanpassen van de hoogte van kaarten lastig kan zijn.You can't turn off this behavior, so changing the heights of cards can be challenging. Alle kaarten in een rij worden weergegeven met de hoogte van de grootste kaart.All cards within a row appear to be the same height as the tallest card. Een rij kan er als volgt uitzien:You might look at a row like this:

WidthFit ingesteld op 'true' voor de eerste kaart met het veld 'Orderstatus' onzichtbaar

Welke kaart is bepalend voor de rijhoogte?Which card is making the row tall? In de vorige afbeelding is de kaart Totaalbedrag geselecteerd en lijkt deze hoog, maar de eigenschap Height van de kaart is ingesteld op 80 (hetzelfde als de hoogte van de eerste rij).In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). Als u de hoogte van een rij wilt verkleinen, moet u de Height van de grootste kaart in die rij verkleinen en u kunt de hoogste kaart niet identificeren zonder de eigenschap Height van elke kaart te controleren.To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

Een kaart is mogelijk ook hoger dan verwacht als deze een besturingselement bevat waarvoor de eigenschap AutoHeight is ingesteld op true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Veel kaarten bevatten bijvoorbeeld een label waarmee een foutbericht wordt weergegeven als de waarde van het veld een validatieprobleem veroorzaakt.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Als er geen tekst is om weer te geven (geen fout), wordt het label ingeklapt tot een hoogte van nul.Without any text to display (no error), the label collapses to zero height. U kunt dan met een enkele mogelijkheid zien dat de kaart ook dit label bevat, tenzij u het label zelf hebt toegevoegd natuurlijk:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Kaarten die een besturingselement bevatten waarvoor AutoHeight is ingesteld op true, en zonder hoogte worden weergegeven

De lijst met besturingselementen aan de linkerkant van het scherm, toont ErrorMessage1, wat het besturingselement met het foutbericht is.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Als u een app bijwerkt, kunt u dit besturingselement selecteren om het een bepaalde hoogte te geven en selectiegrepen te tonen waarmee u kunt de positie en grootte van het besturingselement kunt bewerken.As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. De letter 'A' in een blauw vak geeft aan dat AutoHeight is ingesteld op true voor het besturingselement:The "A" in a blue box indicates that the control has AutoHeight set to true:

Op het moment van ontwerpen hebben besturingselementen met het eigenschap AutoHeight wat hoogte om het besturingselement makkelijker te kunnen slepen

De eigenschap Text van dit besturingselement is ingesteld op Parent.Error, waarmee het mogelijk is om op basis van validatieregels dynamische foutberichten weer te geven.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Laten we ter illustratie de eigenschap Text van dit besturingselement statisch instellen, waardoor de hoogte van het besturingselement (en, daardoor, de hoogte van de kaart) toeneemt en de tekst helemaal kan worden weergegeven:For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

Door een foutbericht toe te voegen, worden het besturingselement en dus de kaart automatisch groter

Laten we het foutbericht iets langer maken. Het besturingselement en de kaart worden automatisch aangepast om de tekst weer te geven.Let's make the error message a little longer, and again the control and the card grow to accommodate. De hoogte van de rij als geheel neemt toe, met behoud van verticale uitlijning tussen de kaarten:Note that the row overall grows in height, retaining vertical alignment between the cards:

Met een langer foutbericht worden het besturingselement en de kaart nog groter, waarbij de kaarten in dezelfde rij evenredig hoger worden