Forstå layoutet af dataformularer i Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

I PowerApps kan du nemt oprette formularer, der er flotte og effektive i brug.In PowerApps, you can easily create forms that are attractive and efficient to use. Overvej f.eks. denne grundlæggende formular til registrering af salgsordrer:For example, consider this basic form for recording sales orders:

Eksempel på salgsordre

I dette selvstudium gennemgår vi trinnene til oprettelsen af denne formular.In this tutorial, we'll walk through the steps to create this form. Vi ser også på nogle avancerede emner, f.eks. dynamisk tilpasning af felter til den tilgængelige plads.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Inden du starterBefore you start

Hvis du bruger PowerApps (eller kun har genereret apps automatisk), skal du oprette en app fra bunden, før du dykker ned i dette emne.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. Når du opretter en app fra bunden, bliver du fortrolig med nødvendige begreber, såsom at tilføje datakilder og kontrolelementer, som nævnes, men som ikke forklares, i dette emne.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. Opret en tabletapp fra bunden.Create a tablet app from scratch.

    Alt, der beskrives i dette emne, gælder også for telefonlayout, men telefonapps har ofte kun én lodret kolonne.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Tilføj objektet Sales order i Common Data Service som en datakilde for appen.Add the Sales order entity in the Common Data Service as a data source for the app.

    Uden for dette selvstudium kan du bruge en hvilken som helst datakilde, herunder SharePoint-lister og Excel-tabeller.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Tilføj det lodrette kontrolelement Gallery, og angiv egenskaben Items for det til "Sales order".Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (Valgfrit) For at få layoutet til at stemme overens med eksemplerne i dette selvstudium kan du ændre galleriets Layout, så der kun vises Title and subtitle.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Listen Sales order

  4. Klik eller tryk på SO004 i galleriet.In the gallery, click or tap SO004.

    Listen Sales order

    Denne post vises i den formular, du opretter ved at følge trinnene senere i dette emne.This record will appear in the form that you build by following steps later in this topic.

Tilføj en titellinjeAdd a title bar

  1. Tilføj en tom skærm, hvor formularen skal placeres.Add a blank screen where you'll put the form.

    Uden for dette selvstudium kan du placere kontrolelementerne Gallery og Edit form på samme skærm, men du får mere plads at arbejde med, hvis du placerer dem på forskellige skærme.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. Øverst på den nye skærm skal du tilføje kontrolelementet Label og angive egenskaben Text for det til dette udtryk:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Sales Order" & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    Etiketten viser nummeret på salgsordren for den post, du valgte i galleriet.The label shows the sales-order number of the record that you selected in the gallery.

  3. (Valgfrit) Formatér etiketten på følgende måde:(optional) Format the label as follows:

    1. Angiv egenskaben Align for den til Center.Set its Align property to Center.

    2. Angive egenskaben Size for den til 20.Set its Size property to 20.

    3. Angiv egenskaben Fill for den til Navy.Set its Fill property to Navy.

    4. Angiv egenskaben Color for den til White.Set its Color property to White.

    5. Angiv egenskaben Width for den til Parent.Width.Set its Width property to Parent.Width.

    6. Angiv egenskaberne X og Y for den til 0.Set its X and Y properties to 0.

      Titellinje

Tilføj en formularAdd a form

  1. Tilføj kontrolelementet Edit form. Flyt det derefter, og tilpas størrelsen, så det fylder hele skærmen under etiketten.Add an Edit form control, and then move and resize it to fill the screen under the label.

    I næste trin skal du forbinde kontrolelementet for formularen til datakilden Sales order ved hjælp af ruden til højre og ikke formellinjen.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. Hvis du bruger formellinjen, vises der som standard ingen felter i formularen.If you use the formula bar, the form won't show any fields by default. Du kan altid få vist de felter, du vil, ved at markere et eller flere afkrydsningsfelter i ruden til højre.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. I ruden til højre skal du klikke eller trykke på pil ned ved siden af No data source selected og derefter klikke eller trykke på Sales order.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Der vises en række standardfelter fra datakilden Sales order i et enkelt layout med tre kolonner.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Mange er dog tomme, og det kan tage et øjeblik, før de er på deres endelige placering.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Angiv egenskaben Item for formularen til Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    Formularen viser den post, du valgte i galleriet, men rækken af standardfelter stemmer måske ikke overens med dem, du vil have i det endelige produkt.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. I ruden til højre kan du skjule hvert af disse felter ved at fjerne markeringen i afkrydsningsfeltet:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales order IDSales order ID
    • AccountAccount
    • Sales personSales person
    • Account contactAccount contact
  5. Flyt feltet Order status ved at trække det til venstre og derefter slippe det på den anden side af feltet Customer purchase order reference.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.

    Skærmen bør ligne dette eksempel:Your screen should resemble this example:

    Basislayout af salgsorden i tre kolonner

Vælg et datakortSelect a data card

Hvert vist felt har et tilsvarende datakort i formularen.Each field displayed has a corresponding data card on the form. Dette kort omfatter en række kontrolelementer for titlen på feltet, et tekstfelt, en stjerne (der vises, hvis feltet skal udfyldes) og en fejlmeddelelse vedrørende validering.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.

Du kan også vælge kort direkte i formularen.You can also select cards directly on the form. Når et kort er valgt, vises en sort billedtekst ovenover.When a card is selected, a black caption appears above it.

Valg af datakort

Bemærk

Hvis du vil slette et kort (og ikke kun skjule det), skal du markere det og derefter trykke på Delete.To delete a card (not just hide it), select it, and then press Delete.

Arranger kort i kolonnerArrange cards in columns

Formularer i tabletapps har som standard tre kolonner, og i telefonapps har de én.By default, forms in tablet apps have three columns, and those in phone apps have one. Du kan ikke blot angive, hvor mange kolonner en formular skal have, men også om alle kort skal være inden for kolonnens kanter.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

I denne grafik er antallet af kolonner i formularen blevet ændret fra tre til fire med afkrydsningsfeltet Snap to columns markeret.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Kortene i formularen blev arrangeret automatisk, så de passer til det nye layout.The cards in the form were arranged automatically to fit the new layout.

Basislayout af salgsorden i fire kolonner

Tilpas kort på tværs af flere kolonnerResize cards across multiple columns

Afhængigt af dataene i hvert kort, vil du måske have, at nogle kort passer til en enkelt kolonne, og andre kort spænder over flere kolonner.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. Hvis et kort indeholder flere data, end du vil vise i en enkelt kolonne, kan du forstørre kortet ved at markere det og derefter trække håndtaget på venstre eller højre kant af dets markeringsboks.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. Når du trækker håndtaget, "fastgøres" kortet til kolonnens kanter.As you drag the handle, the card will "snap" to column boundaries.

Hvis du vil gøre dit design mere fleksibelt, men bevare en del af strukturen, kan du øge antallet af kolonner til 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Med denne ændring kan du let konfigurere hvert kort til at spænde over hele formularen, halvdelen af formularen, en tredjedel, en fjerdedel, en sjettedel og så videre.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. Lad os se, hvordan dette fungerer.Let's see this in action.

  1. I ruden til højre skal du angive antallet kolonner i formularen til 12.In the right-hand pane, set the number of columns in the form to 12.

    Angiv antallet af kolonner

    Formularen ændres ikke synligt, men du har flere fastgørelsespunkter, når du trækker det venstre eller højre håndtag.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Øg bredden af kortet Order date ved at trække det højre håndtag ét fastgørelsespunkt til højre.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    Kortet spænder over 4 af formularens 12 kolonner (eller 1/3 af formularen) i stedet for kun 3 af formularens 12 kolonner (eller 1/4 af formularen).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). Hver gang du øger bredden af et kort med ét fastgørelsespunkt, spænder kortet over yderligere 1/12 af formularen.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Tilpas størrelsen af et kort ved hjælp af træk og slip

  3. Gentag det forrige trin for kortene Order status og Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Tre kort i første række

  4. Tilpas størrelsen af kortene Name og Description, så de spænder over seks kolonner eller det halve af formularen.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Få de to første linjer af leveringsadressen til at spænde over hele formularen:Make the first two lines of the delivery address stretch entirely across the form:

Du er færdig!All done. Vi har vores ønskede formular, hvor rækkerne er blandet med et forskelligt antal kolonner:We have our desired form, mixing rows with different numbers of columns:

Layout af salgsordre med 12 kolonner og tilpasning af størrelsen

Rediger kontrolelementer på et kortManipulate controls in a card

Leveringsadressen består af flere oplysninger, som vi vil gruppere visuelt for brugeren.The delivery address comprises several pieces of information that we want to visually group together for the user. Hvert felt forbliver på sit eget datakort, men vi kan redigere kontrolelementerne på kortet, så de passer bedre sammen.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. Vælg kortet First line of Delivery address, vælg etiketten på dette kort, og slet derefter de første tre ord fra teksten.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Salgsordrens leveringsadresse med omdøbning af etikettens første linje

  2. Vælg kortet Second line of Delivery address, vælg etiketten på dette kort, og slet derefter al tekst.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Det kan være fristende blot at etikettens kontrolelement, og i mange tilfælde vil det fungere fint.It may be tempting to simply remove the label control and, in many cases, that will work fine. Men nogle formler kan være afhængige af, at det kontrolelement er til stede.But formulas might depend on that control being present. Den sikreste fremgangsmåde er at fjerne teksten eller angive egenskaben Visible for kontrolelementet til false.The safer approach is to remove the text or to set the Visible property of the control to false.

    Salgsordrens leveringsadresse med omdøbning af etikettens anden linje

  3. Flyt tekstfeltet på det samme kort over etiketten for at reducere afstanden mellem anden og tredje linje i adressen.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.

    Højden på kortet formindskes, når indholdet fylder mindre.The height of the card shrinks when its contents take up less space.

    Salgsordrens leveringsadresse med omdøbning af etikettens anden linje

Lad os nu kigge på den tredje linje i adressen.Now let's turn our attention to the third line of the address. I lighed med det, vi lige har udført, skal vi nu forkorte teksten på hver etiket for disse kort og arrangere tekstfeltet til at være til højre for hver etiket.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. Her er trinnene for kortet State:Here are the steps for the State card:

TrinStep BeskrivelseDescription ResultatResult
11 Vælg kortet State, så der vises håndtag omkring det.Select the State card so that grab handles appear around it. Vælg et kort
22 Vælg etiketten på dette kort, så der vises håndtag omkring den.Select the label within this card so that grab handles appear around it. Vælg et kontrolelement på et kort
33 Placer markøren til højre for teksten, og slet derefter den del, du ikke behøver.Place the cursor to the right of the text, and then delete the portion that we don't need. Ret teksten i et kontrolelement på et kort
44 Ved hjælp af håndtagene på siderne kan du tilpasse størrelsen af kontrolelementet, så det passer til størrelsen på den nye tekst.Using the grab handles on the sides, size the label control to fit the new text size. Tilpas et kontrolelement på et kort
55 Vælg kontrolelementet Tekstfelt på dette kort.Select the text input control within this card. Vælg et andet kontrolelement på kortet
66 Ved hjælp af håndtagene på siderne kan du tilpasse størrelsen af kontrolelementet Tekstfelt til den ønskede størrelse.Using the grab handles on the sides, size the text input control to the size that you want. Tilpas et kontrolelement på et kort
77 Træk tekstfeltet op og til højre for kontrolelementet for etiketten, og slip derefter tekstfeltet.Drag the text input box up and to the right of the label control, and then drop the text input box. Flyt et kontrolelement på et kort
Vi har nu fuldført ændringerne af kortet State.Our modifications to the State card are now complete. Ændringerne af kortet er fuldført

Resultatet for hele den tredje adresselinje:The result for the complete third address line:

Salgsordrens leveringsadresse med en mere kortfattet tredje linje

Bemærk, at mange af kortene starter med dynamiske formler for deres egenskaber.Note that many of the cards start out with dynamic formulas for their properties. Egenskaben Width for kontrolelementet Tekstfelt, som vi tilpassede størrelsen på og flyttede ovenfor, var f.eks. baseret på bredden af et overordnet kontrolelement.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Når du flytter eller tilpasser størrelsen på et kontrolelement, erstattes disse dynamiske formler med statiske værdier.When you move or resize a control, these dynamic formulas are replaced with static values. Hvis du vil, kan du gendanne de dynamiske formler ved hjælp af formellinjen.If you want, you can restore the dynamic formulas by using the formula bar.

Sådan slår du Fastgør til kolonner fraTurning off Snap to columns

Nogle gange vil du have mere raffinerede kontrolelementer, end hvad du kan få med de 12 standardkolonner.Sometimes you'll want finer control than the standard 12 columns can provide. I disse tilfælde kan du slå Fastgør til kolonner fra og derefter manuelt placere kort.For these cases, you can turn off Snap to columns and then position cards manually. Der vil fortsat fastgøres til 12 kolonner i formularen, men du kan også holde Alt-tasten nede for manuelt at placere og tilpasse et kort, som du vil.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.

I vores eksempel har de fire komponenter, som udgør den tredje linje i adressen, alle nøjagtig samme bredde.In our example, the four components that make up the third line of the address all have exactly the same width. Men dette er muligvis ikke det bedste layout, da bynavne er længere end forkortelser på stater, og tekstfeltet til lande/områder er kort på grund af længden af dets etiket.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.

For at optimere denne plads skal du slå Fastgør til kolonner fra i ruden til højre og derefter holde Alt-tasten nede, mens du tilpasser størrelsen og placerer disse kort.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. Når du holder Alt-tasten nede, vises der sorte billedtekster for alle kontrolelementer.Whenever you hold down the Alt key, all controls show black captions. Denne funktionsmåde er tilsigtet for at vise navnene på kontrolelementerne.This behavior is by design to show you control names.

Placering og tilpasning af størrelse med ALT-tasten holdt nede

Efter omhyggelig placering er resultatet, at alle felter har passende størrelse, og der er ensartet vandret afstand mellem felterne:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Salgsordrens leveringsadresse med tredje linje placeret nøjagtigt

Kort sagt, hvad er forskellen, når Fastgør til kolonner er slået til kontra slået fra?In summary, what are the differences when Snap to columns is on versus off?

FunktionsmådeBehavior Fastgør til kolonner er slået tilSnap to columns On Fastgør til kolonner er slået fraSnap to columns Off
Tilpas størrelse af fastgørelse tilResize snaps to Antallet af kolonner, du vælger:Number of columns you select:
1, 2, 3, 4, 6 eller 121, 2, 3, 4, 6, or 12
12 kolonner12 columns
Tilpas størrelse af fastgørelse kan tilsidesættesResize snap can be overriden NejNo Ja, med Alt-tastenYes, with Alt key
Layoutet af kort arrangeres automatisk mellem rækker (mere om dette senere)Cards automatically re-layout between rows (more on this later) JaYes NejNo

Angiv bredde og højdeSet width and height

Som med alt i PowerApps styres formularens layout af egenskaber for kortets kontrolelementer.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Som allerede beskrevet, kan du ændre værdierne af disse egenskaber ved at trække kontrolelementerne til forskellige placeringer eller trække håndtagene for at tilpasse størrelsen af kontrolelementerne.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Men du vil opleve situationer, hvor du skal forstå og redigere disse egenskaber mere præcist, især når du gør dine formularer dynamiske med formler.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.

Grundlæggende layout: X, Y og WidthBasic Layout: X, Y, and Width

Egenskaberne X og Y styrer placeringen af kort.The X and Y properties control the position of cards. Når vi arbejder med kontrolelementer på det rå lærred, udgør disse egenskaber en absolut placering.When we work with controls on the raw canvas, these properties provide an absolute position. I en formular har disse egenskaber en anden betydning:In a form, these properties have a different meaning:

  • X: rækkefølge på en række.X: Order within a row.
  • Y: rækkens tal.Y: Row number.

I lighed til kontrolelementer på lærredet angiver egenskaben Width minimumbredden på kortet (mere om minimumaspektet om lidt).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Lad os kigge på egenskaberne X, Y og Width på kortene i vores formular:Let's take a look at the X, Y, and Width properties of the cards in our form:

X- og Y-koordinater for formularen Salgsordre

Rækker med overløbOverflowing rows

Hvad sker der, hvis kortene på en række er for brede til at være på den række?What happens if the cards on a row are too wide to fit on that row? Normalt skal du ikke bekymre dig om denne mulighed.Normally you don't need to worry about this possibility. Når Fastgør til kolonner er slået til, justeres disse tre egenskaber automatisk, så alt passer fint på rækker uden overløb.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Men hvis Fastgør til kolonner er slået fra, eller hvis der er angivet en formelbaseret Width på et eller flere af dine kort, kan der opstå overløb på en række.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. I dette tilfælde ombrydes kortene automatisk, så der reelt set oprettes endnu en række.In this case, the cards will automatically wrap so that, effectively, another row is created. Lad os f.eks. manuelt ændre egenskaben Width på vores eget kort Customer purchase order reference (første række, tredje element) til 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Manuel tilpasning af kortets størrelse, ombrydning til en ny række

De tre kort i den øverste række passer ikke længere vandret, og en anden række er blevet oprettet for at ombryde overløbet.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Y-koordinatet for alle disse kort er stadig den samme ved 0, og kortene Name og Description har stadig en Y på 1.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. Kort med forskellige Y-værdier flettes ikke på tværs af rækker.Cards that have different Y values aren't merged across rows.

Du kan bruge denne funktionsmåde til at oprette et fuldt dynamisk layout, hvor kortene placeres baseret på en Z-rækkefølge og spænder over så meget som muligt, før de flyttes til den næste række.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. For at opnå denne effekt skal du give alle kort den samme Y-værdi og bruge X for rækkefølgen af kortene.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Udfyldning af tom plads: WidthFitFilling spaces: WidthFit

Overløbet i forrige eksempel skabte en tom plads efter kortet Order status, som var det andet kort i den første række.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Vi kunne justere egenskaben Width manuelt for de to resterende kort, så de udfylder denne plads, men denne fremgangsmåde er besværlig.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Som alternativ kan du bruge egenskaben WidthFit.As an alternative, use the WidthFit property. Hvis denne egenskab er angivet til true for et eller flere kort på en række, fordeles eventuel resterende plads på rækken ligeligt mellem dem.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. Denne funktionsmåde er grunden til, at vi tidligere nævnte, at egenskaben Width for et kort er et minimum, og at det, der reelt kan ses, kan være bredere.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. Denne egenskab formindsker aldrig et kort, men udvider det kun.This property will never cause a card to shrink, only expand.

Hvis vi angiver WidthFit til true på kortet Order status, udfyldes den tilgængelige plads, mens det første kort forbliver uændret:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit er angivet til true på det andet kort

Hvis vi også angiver WidthFit til true på kortet Order date, fordeles den tilgængelige plads ligeligt på begge kort:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit er angivet til true på det første og det andet kort

Bemærk, at håndtagene på disse kort tager højde for den ekstra bredde, som leveres af WidthFit, og ikke den minimumbredde, som leveres af egenskaben 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. Det kan være forvirrende at redigere egenskaben Width, mens WidthFit er slået til. Det kan derfor være en god idé at slå det fra, foretage ændringerne af Width og derefter slå det til igen.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.

Hvornår kan WidthFit være nyttigt?When might WidthFit be useful? Hvis du har et felt, der kun bruges i visse situationer, kan du angive egenskaben Visible for det til false, så udfylder de andre kort på rækken automatisk pladsen omkring det.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. Det kan være en god idé at bruge en formel, der kun viser et felt, når et andet felt har en bestemt værdi.You might want to use a formula that shows a field only when another field has a particular value.

Her angiver vi egenskaben Visible for feltet Order status til statisk false:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit er angivet til true på det første kort med usynlig ordrestatus

Nu, hvor det andet kort reelt set er fjernet, kan det tredje kort vende tilbage til den samme række som det første kort.With the second card effectively removed, the third card can now return to the same row as the first card. WidthFit er stadig angivet til true for det første kort, så det spænder alene over den tilgængelige plads.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Da Order status er usynlig, kan du ikke vælge det lige så let på lærredet.Because Order status is invisible, you can't select it as easily on the canvas. Du kan dog vælge et kontrolelement, synligt eller ej, på den hierarkiske liste over kontrolelementer i venstre side af skærmen.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

Egenskaben Height styrer højden på hvert kort.The Height property governs the height of each card. Height for kortene er det samme som WidthFit, og den er altid angivet til true.Cards have the equivalent of WidthFit for Height, and it's always set to true. Forestil dig, at egenskaben HeightFit findes, men kig ikke efter den i produktet, for sådan en egenskab kan endnu ikke ses.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Du kan ikke slå denne funktionsmåde fra, så det kan være en udfordring at ændre højden på kortene.You can't turn off this behavior, so changing the heights of cards can be challenging. Alle kort på en række ser ud til at have samme højde som det højeste kort.All cards within a row appear to be the same height as the tallest card. Du kan se en række på følgende måde:You might look at a row like this:

WidthFit er angivet til true på det første kort med usynlig ordrestatus

Hvilket kort gør rækken høj?Which card is making the row tall? På den forrige grafik var kortet Total amount valgt og ser ud til at være høj, men egenskaben Height for det er angivet til 80 (samme højde som den første række).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). For at reducere højden på en række skal du reducere egenskaben Height for det højeste kort på rækken, og du kan ikke identificere det højeste kort uden at gennemse egenskaben Height for hvert kort.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

Et kort kan også være højere, end du forventer, hvis det indeholder et kontrolelement, hvor egenskaben AutoHeight er angivet til true.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Mange kort indeholder f.eks. en etiket, der viser en fejlmeddelelse, hvis feltets værdi forårsager et valideringsproblem.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Hvis etiketten ikke skal vise nogen tekst (der er ingen fejl), mindskes højden til nul.Without any text to display (no error), the label collapses to zero height. Hvis du ikke vidste bedre, ville du ikke vide, at den var der, og sådan skal det være:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Kort, der indeholder kontrolelementer med AutoHeight angivet til true, uden højde

I venstre side af skærmen kan du på listen over kontrolelementer se ErrorMessage1, hvilket er etiketten for vores kontrolelement.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Når du opdaterer en app, kan du vælge dette kontrolelement for at give det en højde og vise håndtag, som du kan bruge til at placere og tilpasse størrelsen af kontrolelementet med.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. Et "A" i et blåt felt indikerer, at AutoHeight er angivet til true for kontrolelementet:The "A" in a blue box indicates that the control has AutoHeight set to true:

På tidspunktet for oprettelse viser kontrolelementet AutoHeight lidt højde, hvilket gør det lettere at trække og slippe

Egenskaben Text for dette kontrolelement er angivet til Parent.Error, hvilket bruges til at hente oplysninger om dynamiske fejl baseret på valideringsregler.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. For at illustrere dette angiver vi egenskaben Text for dette kontrolelement statisk, hvilket øger højden (og dermed højden på kortet) for at passe til længden af teksten: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:

Med en fejlmeddelelse kan kontrolelementet og kortet udvides automatisk

Lad os gøre fejlmeddelelsen lidt længere, så udvides kontrolelementet og kortet igen for at tilpasse størrelsen.Let's make the error message a little longer, and again the control and the card grow to accommodate. Bemærk, at rækken generelt udvides i højden, men bevarer den lodrette justering mellem kortene:Note that the row overall grows in height, retaining vertical alignment between the cards:

Med en længere fejlmeddelelse udvides kontrolelementet og kortet endnu mere. Men bemærk, at kortene på samme række udvides på samme måde