Grundlegendes zum Layout von Datenformularen in Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

In PowerApps können Sie auf einfache Weise Formulare erstellen, die ansprechend aussehen und benutzerfreundlich sind.In PowerApps, you can easily create forms that are attractive and efficient to use. Sehen Sie sich beispielsweise dieses einfache Formular zum Aufzeichnen von Verkaufsaufträgen an:For example, consider this basic form for recording sales orders:

Beispiel eines Verkaufsauftrags

In diesem Tutorial durchlaufen wir die Schritte zum Erstellen dieses Formulars.In this tutorial, we'll walk through the steps to create this form. Außerdem beschäftigen wir uns mit einigen komplexeren Themen wie der dynamischen Größenänderung von Feldern zum Ausfüllen des verfügbaren Platzes.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Bevor Sie beginnenBefore you start

Wenn Sie noch nicht mit PowerApps vertraut sind (oder Apps bisher lediglich automatisch generiert haben), empfiehlt es sich, eine App von Grund auf neu zu erstellen, bevor Sie in dieses Thema einsteigen.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. Durch Erstellen einer App von Grund auf machen Sie sich mit den grundlegenden Konzepten vertraut, beispielsweise mit dem Hinzufügen von Datenquellen und Steuerelementen, die in diesem Artikel zwar erwähnt, jedoch nicht erläutert werden.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. Erstellen Sie eine Tablet-App von Grund auf neu.Create a tablet app from scratch.

    Alles in diesem Artikel Besprochene gilt auch für Smartphonelayouts, allerdings haben Smartphone-Apps oft nur eine vertikale Spalte.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Fügen Sie die Entität Sales Order (Verkaufsauftrag) in Common Data Service als Datenquelle für die App hinzu.Add the Sales order entity in the Common Data Service as a data source for the app.

    Außerhalb dieses Tutorials können Sie eine beliebige Datenquelle verwenden, u.a. SharePoint-Listen und Excel-Tabellen.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Fügen Sie ein vertikales Katalog-Steuerelement hinzu, und legen Sie dessen Items-Eigenschaft auf 'Sales order' fest.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (Optional) Um die Beispiele in diesem Tutorial anzugleichen, ändern Sie das Layout des Katalogs so, dass nur Titel und Untertitel angezeigt werden.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Liste der Verkaufsaufträge

  4. Klicken oder tippen Sie im Katalog auf SO004.In the gallery, click or tap SO004.

    Liste der Verkaufsaufträge

    Dieser Eintrag wird im Formular angezeigt, das Sie anhand der folgenden Schritte in diesem Artikel erstellen.This record will appear in the form that you build by following steps later in this topic.

Hinzufügen einer TitelleisteAdd a title bar

  1. Fügen Sie einen leeren Bildschirm an der Position hinzu, an der das Formular platziert werden soll.Add a blank screen where you'll put the form.

    Außerhalb dieses Tutorials können Sie die Steuerelemente Katalog und Bearbeitungsformular auf demselben Bildschirm platzieren. Sie haben jedoch mehr Platz zum Bearbeiten, wenn Sie sie auf separaten Bildschirmen platzieren.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. Fügen Sie am oberen Rand des neuen Bildschirms ein Bezeichnungs-Steuerelement hinzu, und legen Sie deren Text-Eigenschaft auf den folgenden Ausdruck fest: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

    Die Bezeichnung zeigt die Verkaufsauftragsnummer des Eintrags, der im Katalog ausgewählt wurde.The label shows the sales-order number of the record that you selected in the gallery.

  3. (Optional) Formatieren Sie die Bezeichnung wie folgt:(optional) Format the label as follows:

    1. Legen Sie die Align-Eigenschaft auf Center fest.Set its Align property to Center.

    2. Legen Sie die zugehörige Size-Eigenschaft auf 20 fest.Set its Size property to 20.

    3. Legen Sie die zugehörige Fill-Eigenschaft auf Navy fest.Set its Fill property to Navy.

    4. Legen Sie die zugehörige Color-Eigenschaft auf White fest.Set its Color property to White.

    5. Legen Sie die zugehörige Width-Eigenschaft auf Parent.Width fest.Set its Width property to Parent.Width.

    6. Legen Sie die zugehörige X-Eigenschaft und Y-Eigenschaft auf 0 fest.Set its X and Y properties to 0.

      Titelleiste

Ein Formular hinzufügenAdd a form

  1. Fügen Sie ein Bearbeitungsformular-Steuerelement hinzu, verschieben Sie es, und passen Sie seine Größe so an, dass es den Bildschirm unter der Bezeichnung ausfüllt.Add an Edit form control, and then move and resize it to fill the screen under the label.

    Im nächsten Schritt verbinden wir das Formular-Steuerelement mit der Datenquelle Sales Order (Verkaufsauftrag) im rechten Bereich und nicht über die Bearbeitungsleiste.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. Wenn Sie die Bearbeitungsleiste verwenden, werden im Formular standardmäßig keine Felder angezeigt.If you use the formula bar, the form won't show any fields by default. Sie können alle gewünschten Felder anzeigen lassen, indem Sie im rechten Bereich die entsprechenden Kontrollkästchen aktivieren.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. Klicken oder tippen Sie im rechten Bereich auf den Abwärtspfeil neben Keine Datenquelle ausgewählt, und klicken oder tippen Sie dann auf Sales Order (Verkaufsauftrag).In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    Die Standardfelder aus der Datenquelle Sales Order (Verkaufsauftrag) werden in einem einfachen Layout mit drei Spalten angezeigt.A default set of fields from the Sales order data source will appear in a simple, three-column layout. Viele davon sind jedoch leer, und es kann eine Weile dauern, bis sie an ihren endgültigen Positionen positioniert sind.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Legen Sie die Item-Eigenschaft des Formulars auf Gallery1.Selected fest.Set the form's Item property to Gallery1.Selected.

    Im Formular wird der im Katalog ausgewählte Eintrag angezeigt, möglicherweise entspricht die Standardgruppe von Feldern jedoch nicht den Feldern, die Sie im endgültigen Produkt wünschen.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. Blenden Sie im rechten Bereich die einzelnen Felder aus, indem Sie die entsprechenden Kontrollkästchen deaktivieren:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales Order ID (Verkaufsauftrags-ID)Sales order ID
    • Account (Konto)Account
    • Sales Person (Vertriebsmitarbeiter)Sales person
    • Account Contact (Ansprechpartner Konto)Account contact
  5. Verschieben Sie das Feld Order Status (Bestellstatus), indem Sie es nach links ziehen und auf der anderen Seite des Felds Customer purchase order reference (Kundenbestellreferenz) ablegen.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.

    Ihr Bildschirm sollte diesem Beispiel ähneln:Your screen should resemble this example:

    Sales Order (Verkaufsauftrag) in einem einfachen Layout mit drei Spalten

Auswählen einer DatenkarteSelect a data card

Jedes angezeigte Feld hat eine entsprechende Datenkarte auf dem Formular.Each field displayed has a corresponding data card on the form. Diese Karte besteht aus einer Gruppe von Steuerelementen für den Feldtitel, ein Eingabefeld, einen Stern (der angezeigt wird, wenn es sich um ein Pflichtfeld handelt) sowie eine Validierungsfehlermeldung.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.

Sie können Karten auch direkt auf dem Formular auswählen.You can also select cards directly on the form. Bei Auswahl einer Karte wird darüber eine schwarze Beschriftung angezeigt.When a card is selected, a black caption appears above it.

Datenkartenauswahl

Hinweis

Wenn Sie eine Karte löschen (und nicht nur ausblenden) möchten, wählen Sie sie aus, und drücken Sie ENTF.To delete a card (not just hide it), select it, and then press Delete.

Anordnen von Karten in SpaltenArrange cards in columns

In der Standardeinstellung weisen Formulare in Tablet-Apps drei Spalten auf, während Smartphone-Apps über eine Spalte verfügen.By default, forms in tablet apps have three columns, and those in phone apps have one. Sie können nicht nur angeben, wie viele Spalten ein Formular aufweisen soll, sondern auch, ob alle Karten in den Bereich zwischen den Spaltenrändern passen sollen.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

In dieser Abbildung wurde die Anzahl der Spalten im Formular von 3 in 4 geändert. Dazu wurde das Kontrollkästchen An Spalten ausrichten aktiviert.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Die Karten im Formular wurden automatisch so angepasst, dass sie in das neue Layout passen.The cards in the form were arranged automatically to fit the new layout.

Sales Order (Verkaufsauftrag) in einfachem Layout mit vier Spalten

Ändern der Größe von Karten über mehrere Spalten hinwegResize cards across multiple columns

Je nach den Daten in den einzelnen Karten möchten Sie u.U. einige Karten in eine einzige Spalte einpassen, während sich andere Karten über mehrere Spalten erstrecken sollen.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. Wenn eine Karte mehr Daten enthält, als in einer einzelnen Spalte angezeigt werden sollen, können Sie die Karte verbreitern. Wählen Sie sie dazu aus, und ziehen Sie anschließend den Ziehpunkt am linken oder rechten Rand ihres Auswahlfelds.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. Beim Ziehen des Ziehpunkts wird die Karte an den Spaltenbegrenzungen „eingerastet“.As you drag the handle, the card will "snap" to column boundaries.

Um Ihr Design flexibler zu gestalten, jedoch eine gewisse Struktur beizubehalten, können Sie die Anzahl der Spalten auf 12 erhöhen.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Mit dieser Änderung können Sie jede Karte auf einfache Weise so konfigurieren, dass sie sich über das gesamte Formular, über die Hälfte, ein Drittel, ein Viertel oder ein Sechstel usw. des Formulars erstreckt.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. Schauen wir uns dies in der Praxis an.Let's see this in action.

  1. Legen Sie im rechten Bereich die Anzahl der Spalten im Formular auf 12 fest.In the right-hand pane, set the number of columns in the form to 12.

    Angeben der Anzahl von Spalten

    Am Formular wird keine sichtbare Änderung vorgenommen, aber Sie verfügen über eine größere Anzahl von Fangpunkten, wenn Sie den rechten oder linken Ziehpunkt ziehen.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Vergrößern Sie die Breite der Karte Order date (Bestelldatum), indem Sie den Ziehpunkt rechts um einen Fangpunkt nach rechts ziehen.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    Die Karte erstreckt sich über vier der 12 Spalten des Formulars (bzw. 1/3 des Formulars) und nicht mehr über nur drei der 12 Spalten des Formulars (bzw. 1/4 des Formulars).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). Immer wenn Sie die Breite einer Karte um einen Fangpunkt vergrößern, verbreitert sich die Karte um ein weiteres 1/12 des Formulars.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Ändern der Größe einer Karte per Ziehen und Ablegen

  3. Wiederholen Sie den vorherigen Schritt mit den Karten Order status (Bestellstatus) und Customer purchase order reference (Kundenbestellreferenz).Repeat the previous step with the Order status and Customer purchase order reference cards.

    Drei Karten in der ersten Zeile

  4. Ändern Sie die Größe der Karten Name und Description (Beschreibung), sodass sie sechs Spalten (oder 1/2) des Formulars einnehmen.Resize the Name and Description cards to take up six columns (or 1/2) of the form.

  5. Richten Sie die ersten zwei Zeilen der Lieferadresse so ein, dass sie sich vollständig über das Formular erstrecken:Make the first two lines of the delivery address stretch entirely across the form:

Fertig!All done. Wir verfügen nun über das gewünschte Formular, in dem Zeilen unterschiedlich viele Spalten aufweisen:We have our desired form, mixing rows with different numbers of columns:

Verkaufsauftrag in 12-Spalten-Layout mit Größenänderung

Bearbeiten von Steuerelementen in einer KarteManipulate controls in a card

Die Lieferadresse besteht aus verschiedenen Informationsbestandteilen, die wir für den Benutzer visuell gruppieren möchten.The delivery address comprises several pieces of information that we want to visually group together for the user. Jedes Feld verbleibt auf seiner eigenen Datenkarte. Doch wir können die Steuerelemente innerhalb der Karte ändern, damit sie besser zusammenpassen.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. Wählen Sie die Karte First line of Delivery address (Erste Zeile der Lieferadresse) aus, wählen Sie die Bezeichnung auf der Karte aus, und löschen Sie anschließend die ersten drei Wörter im Text.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Umbenennen der Bezeichnung der ersten Zeile der Lieferadresse des Verkaufsauftrags

  2. Wählen Sie die Karte Second line of Delivery address (Zweite Zeile der Lieferadresse) aus, wählen Sie die Bezeichnung auf der Karte aus, und löschen Sie anschließend den gesamten Text.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Oft können Sie das Bezeichnungssteuerelement einfach entfernen.It may be tempting to simply remove the label control and, in many cases, that will work fine. Möglicherweise gibt es jedoch Formeln, die davon abhängen, dass dieses Steuerelement vorhanden ist.But formulas might depend on that control being present. Ein sicherer Weg ist das Entfernen des Texts oder Festlegen der Visible-Eigenschaft des Steuerelements auf FALSE.The safer approach is to remove the text or to set the Visible property of the control to false.

    Umbenennen der Bezeichnung der zweiten Zeile der Lieferadresse des Verkaufsauftrags

  3. Verschieben Sie nun auf derselben Karte das Eingabetextfeld über die Bezeichnung, um den Platz zwischen der ersten und der zweiten Zeile der Adresse zu verkleinern.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.

    Die Höhe der Karte wird reduziert, wenn dessen Inhalt weniger Raum einnimmt.The height of the card shrinks when its contents take up less space.

    Umbenennen der Bezeichnung der zweiten Zeile der Lieferadresse des Verkaufsauftrags

Jetzt wollen wir uns der dritten Zeile der Adresse widmen.Now let's turn our attention to the third line of the address. Wie in den vorherigen Schritten kürzen wir jetzt den Text jeder Bezeichnung dieser Karten und ordnen das Texteingabefeld rechts neben den jeweiligen Bezeichnungen an.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. Es folgen die Schritte für die Karte State (US-Bundesstaat):Here are the steps for the State card:

SchrittStep BeschreibungDescription ErgebnisResult
11 Wählen Sie die Karte State (US-Bundesstaat) aus, sodass Ziehpunkte an ihrem Rand angezeigt werden.Select the State card so that grab handles appear around it. Auswählen einer Karte
22 Wählen Sie die Bezeichnung auf dieser Karte aus, sodass Ziehpunkte an ihrem Rand angezeigt werden.Select the label within this card so that grab handles appear around it. Auswählen eines Steuerelements in einer Karte
33 Platzieren Sie den Cursor rechts neben dem Text, und löschen Sie den nicht benötigten Teil.Place the cursor to the right of the text, and then delete the portion that we don't need. Ändern des Text innerhalb eines Steuerelements in einer Karte
44 Ändern Sie mithilfe der Ziehpunkte an den Seiten die Größe des Bezeichnungssteuerelements entsprechend der neuen Textgröße.Using the grab handles on the sides, size the label control to fit the new text size. Ändern der Größe eines Steuerelements in einer Karte
55 Wählen Sie das Texteingabe-Steuerelement innerhalb dieser Karte aus.Select the text input control within this card. Auswählen eines anderen Steuerelements in der Karte
66 Ändern Sie mithilfe der Ziehpunkte an den Seiten die Größe des Texteingabe-Steuerelements in die gewünschte Größe.Using the grab handles on the sides, size the text input control to the size that you want. Ändern der Größe eines Steuerelements in einer Karte
77 Ziehen Sie das Texteingabefeld nach rechts oben neben das Bezeichnungssteuerelement, und legen Sie es dort ab.Drag the text input box up and to the right of the label control, and then drop the text input box. Verschieben eines Steuerelements innerhalb einer Karte
Unsere Änderungen an der Karte State (US-Bundesstaat) sind damit abgeschlossen.Our modifications to the State card are now complete. Änderungen an der Karte sind abgeschlossen

Das Ergebnis für die vollständige dritte Adresszeile:The result for the complete third address line:

Lieferadresse des Verkaufsauftrags mit präziserer dritter Zeile

Beachten Sie, dass viele Karten mit dynamischen Formeln für ihre Eigenschaften anfangen.Note that many of the cards start out with dynamic formulas for their properties. Das Texteingabe-Steuerelement, dessen Größe wir geändert und das wir nach oben verschoben haben, hat z.B. eine Width-Eigenschaft, die auf der Breite seines übergeordneten Elements basiert.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Beim Verschieben und Ändern der Größe eines Steuerelements werden diese dynamischen Formeln durch statische Werte ersetzt.When you move or resize a control, these dynamic formulas are replaced with static values. Falls gewünscht, können Sie dynamische Formeln mithilfe der Bearbeitungsleiste wiederherstellen.If you want, you can restore the dynamic formulas by using the formula bar.

Deaktivieren von „An Spalten ausrichten“Turning off Snap to columns

Gelegentlich benötigen Sie eine präzisere Steuerung, als sie mit den standardmäßigen 12 Spalten möglich ist.Sometimes you'll want finer control than the standard 12 columns can provide. In diesen Fällen können Sie An Spalten ausrichten deaktivieren und Karten manuell positionieren.For these cases, you can turn off Snap to columns and then position cards manually. Das Formular wird weiterhin an 12 Spalten ausgerichtet, Sie können jedoch auch die ALT-TASTE gedrückt halten, um eine Karte nach Wunsch manuell zu positionieren und ihre Größe festzulegen.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 unserem Beispiel haben die vier Komponenten, aus denen die dritte Zeile der Adresse besteht, alle genau die gleiche Breite.In our example, the four components that make up the third line of the address all have exactly the same width. Dieses Layout ist möglicherweise nicht optimal, da Namen von Städten häufig länger als Namen von US-Bundesstaaten sind. Das Texteingabefeld für Länder/Regionen ist aufgrund der Länge seiner Bezeichnung kurz.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.

Deaktivieren Sie zum Optimieren dieses Raums die Option An Spalten ausrichten im rechten Bereich, und halten Sie die ALT-TASTE gedrückt, während Sie Größe und die Position dieser Karten anpassen.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. Wenn Sie die ALT-TASTE gedrückt halten, weisen alle Steuerelemente schwarze Beschriftungen auf.Whenever you hold down the Alt key, all controls show black captions. Dieses Verhalten ist beabsichtigt, damit die Steuerelementnamen lesbar sind.This behavior is by design to show you control names.

Positionieren und Ändern der Größe bei gedrückter ALT-TASTE

Nach sorgfältiger Positionierung weist das Ergebnis entsprechende Größen für jedes Feld und einen gleichmäßigen horizontalen Abstand zwischen Feldern auf:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Dritte Zeile der Lieferadresse des Verkaufsauftrags präzise positioniert

Was sind zusammengefasst die Unterschiede zwischen der Aktivierung und Deaktivierung von An Spalten ausrichten?In summary, what are the differences when Snap to columns is on versus off?

VerhaltenBehavior „An Spalten ausrichten“ einSnap to columns On „An Spalten ausrichten“ ausSnap to columns Off
Bei Größenänderung erfolgt eine Ausrichtung anResize snaps to Anzahl der von Ihnen gewählten Spalten:Number of columns you select:
1, 2, 3, 4, 6 oder 121, 2, 3, 4, 6, or 12
12 Spalten12 columns
Ausrichten bei Größenänderung kann außer Kraft gesetzt werdenResize snap can be overriden NeinNo Ja, mit der ALT-TASTEYes, with Alt key
Das Layout von Karten wird zwischen Zeilen neu angeordnet (mehr dazu später)Cards automatically re-layout between rows (more on this later) JaYes NeinNo

Breite und Höhe festlegenSet width and height

Wie immer in PowerApps wird das Layout des Formulars von Eigenschaften für die Kartensteuerelemente bestimmt.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Wie bereits beschrieben, können Sie die Werte dieser Eigenschaften ändern, indem Sie Steuerelemente an andere Positionen ziehen oder die Größe von Steuerelementen durch Ziehen der Ziehpunkte ändern.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Allerdings kann es Situationen geben, in denen Sie diese Eigenschaften selbst verstehen und bearbeiten möchten, insbesondere wenn Sie Ihre Formulare mithilfe von Formeln dynamisch gestalten.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.

Standardlayout: X, Y und BreiteBasic Layout: X, Y, and Width

Mit der X-Eigenschaft und der Y-Eigenschaft wird die Position von Karten gesteuert.The X and Y properties control the position of cards. Wenn wir mit Steuerelementen im unformatierten Zeichenbereich arbeiten, geben diese Eigenschaften eine absolute Position an.When we work with controls on the raw canvas, these properties provide an absolute position. In einem Formular hingegen haben diese Eigenschaften eine andere Bedeutung:In a form, these properties have a different meaning:

  • X: Reihenfolge innerhalb einer Zeile.X: Order within a row.
  • Y: Zeilennummer.Y: Row number.

Vergleichbar mit Steuerelementen im Zeichenbereich gibt die Eigenschaft Width die Mindestbreite der Karte an (mehr zu diesem Aspekt später).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Werfen wir einen Blick auf die Eigenschaften X, Y und Width auf unserem Formular:Let's take a look at the X, Y, and Width properties of the cards in our form:

X- und Y-Koordinaten des Verkaufsauftragsformulars

Überlaufende ZeilenOverflowing rows

Was geschieht, wenn die Karten in einer Zeile zu breit für diese Zeile sind?What happens if the cards on a row are too wide to fit on that row? Normalerweise muss Sie dies nicht kümmern.Normally you don't need to worry about this possibility. Bei aktivierter Option An Spalten ausrichten werden diese drei Eigenschaften automatisch so angepasst, dass alle Inhalte perfekt ohne Überlauf in die Zeilen passen.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

Bei deaktiviertem An Spalten ausrichten oder einer formelbasierten Width-Eigenschaft auf einer oder mehreren Ihrer Karten kann es hingegen zu einem Zeilenüberlauf kommen.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 diesem Fall erfolgt ein automatischer Umbruch der Zeilen, wobei effektiv eine neue Zeile erstellt wird.In this case, the cards will automatically wrap so that, effectively, another row is created. Ändern wir beispielsweise die Width-Eigenschaft der Karte Customer purchase order reference (Kundenbestellreferenz, erste Zeile, dritte Karte) manuell in 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Bei manueller Größenänderung erfolgt ein Umbruch in eine neue Zeile

Die drei Karten in der obersten Zeile passen horizontal nicht mehr hinein, und durch den Umbruch beim Überlauf wurde eine weitere Zeile erstellt.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. Die Y-Koordinate aller dieser Koordinaten ist immer noch 0, und die Karten Name und Description (Beschreibung) weisen immer noch den Y-Wert 1 auf.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. Karten mit unterschiedlichen Y-Werten werden nicht zeilenübergreifend zusammengeführt.Cards that have different Y values aren't merged across rows.

Mithilfe dieses Verhaltens können Sie ein vollständig dynamisches Layout erstellen, bei dem Karten basierend auf einer Z-Reihenfolge platziert werden, wobei waagerecht so viel Platz wie möglich eingenommen wird, ehe der Wechsel in die nächste Zeile erfolgt.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. Weisen Sie zu diesem Zweck allen Karten denselben Y-Wert zu, und verwenden Sie X für die Reihenfolge der Karten.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Füllen von Leerbereichen: WidthFitFilling spaces: WidthFit

Durch den Überlauf im letzten Beispiel wurde ein Leerbereich hinter der Karte Order status (Bestellstatus) erzeugt, die die zweite Karte in der ersten Zeile darstellte.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Wir könnten die Width-Eigenschaft der beiden restlichen Karten manuell anpassen, um diesen Leerbereich zu füllen. Eine solche Vorgehensweise wäre aber mühsam.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Verwenden Sie alternativ die WidthFit-Eigenschaft.As an alternative, use the WidthFit property. Wenn diese Eigenschaft bei einer oder mehreren Karten in einer Zeile auf TRUE festgelegt ist, wird der verbleibende Platz in der Zeile gleichmäßig zwischen ihnen aufgeteilt.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. Aufgrund dieses Verhaltens haben wir zuvor darauf hingewiesen, dass die Width-Eigenschaft einer Karte ein Mindestwert ist und die tatsächliche Anzeige breiter sein kann.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. Diese Eigenschaft bewirkt nie, dass eine Karte schmaler wird, sondern stets nur ihre Verbreiterung.This property will never cause a card to shrink, only expand.

Wenn wir WidthFit auf der Karte Order status (Bestellstatus) auf TRUE festlegen, füllt sie den gesamten verfügbaren Platz aus, während sich die erste Karte nicht ändert:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

Auf der zweiten Karte auf TRUE festgelegte „WidthFit“-Eigenschaft

Wenn wir WidthFit auf der Karte Order date (Bestelldatum) auf TRUE festlegen, wird der verfügbare Platz gleichmäßig auf die beiden Karten aufgeteilt:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

Auf der ersten und zweiten Karte auf TRUE festgelegte „WidthFit“-Eigenschaft

Beachten Sie, dass Ziehpunkte auf diesen Karten die von WidthFit bereitgestellte zusätzliche Breite und nicht die von der Width-Eigenschaft bereitgestellte Mindestbreite berücksichtigen.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. Es kann unübersichtlich werden, wenn Sie die Width-Eigenschaft bei aktivierter WidthFit-Eigenschaft bearbeiten. Deaktivieren Sie also besser diese Eigenschaft, nehmen Sie Änderungen an der Width-Eigenschaft vor, und aktivieren Sie sie anschließend wieder.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.

Wann ist WidthFit hilfreich?When might WidthFit be useful? Wenn es ein Feld gibt, das nur in bestimmten Situationen verwendet wird, können Sie dessen Visible-Eigenschaft auf FALSE festlegen, woraufhin die anderen Karten in der Zeile den Platz um es herum automatisch einnehmen.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. Sie möchten ggf. eine Formel verwenden, die ein Feld nur dann anzeigt, wenn ein anderes Feld einen bestimmten Wert aufweist.You might want to use a formula that shows a field only when another field has a particular value.

Hier legen wir die Visible-Eigenschaft des Felds Order status (Bestellstatus) auf ein statisches FALSE fest:Here, we'll set the Visible property of the Order status field to a static false:

Auf der ersten Karte auf TRUE festgelegtes „WidthFit“ mit nicht sichtbarem Auftragsstatus

Bei quasi entfernter zweiter Karte kann die dritte Karte nun in dieselbe Zeile wie die erste Karte zurückkehren.With the second card effectively removed, the third card can now return to the same row as the first card. Da für die erste Karte WidthFit weiter auf TRUE festgelegt ist, wird nur sie erweitert, um den verfügbaren Platz auszufüllen.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Da das Feld Order status (Bestellstatus) nicht sichtbar ist, kann es im Zeichenbereich nicht ohne Weiteres ausgewählt werden.Because Order status is invisible, you can't select it as easily on the canvas. Sie können jedoch jedes Steuerelement – gleich, ob sichtbar oder nicht – in der hierarchischen Liste der Steuerelemente links im Bildschirm auswählen.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HöheHeight

Die Height-Eigenschaft steuert die Höhe jeder Karte.The Height property governs the height of each card. Bei Karten ist für Height die entsprechende WidthFit-Eigenschaft vorhanden, und diese ist stets auf TRUE festgelegt.Cards have the equivalent of WidthFit for Height, and it's always set to true. Sie können davon ausgehen, dass eine HeightFit-Eigenschaft vorhanden ist. Suchen Sie jedoch nicht danach im Produkt, da eine derartige Eigenschaft noch nicht offengelegt ist.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Sie können dieses Verhalten nicht deaktivieren, weshalb das Ändern der Höhe von Karten schwierig sein kann.You can't turn off this behavior, so changing the heights of cards can be challenging. Alle Karten innerhalb einer Zeile werden mit derselben Höhe wie die höchste Karte angezeigt.All cards within a row appear to be the same height as the tallest card. Betrachten Sie eine Zeile wie diese:You might look at a row like this:

„WidthFit“ ist auf der ersten Karte auf TRUE festgelegt, und „Status order“ (Bestellstatus) ist nicht sichtbar.

Welche Karte bestimmt die Höhe der Zeile?Which card is making the row tall? In der vorherigen Abbildung ist die Karte Total amount (Gesamtbetrag) ausgewählt, die hoch erscheint, aber ihre Height-Eigenschaft ist auf 80 festgelegt (was identisch mit der Höhe der ersten Zeile ist).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). Um die Höhe einer Zeile zu verringern, müssen Sie die Height-Eigenschaft der höchsten Zeile in der betreffenden Zeile verringern, und Sie können die höchste Karte nicht ermitteln, ohne die Height-Eigenschaft jeder Karte zu überprüfen.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

Eine Karte kann auch höher als erwartet sein, wenn sie ein Steuerelement enthält, dessen AutoHeight-Eigenschaft auf TRUE festgelegt ist.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Viele Karten enthalten z.B. ein Bezeichnungssteuerelement zum Anzeigen einer Fehlermeldung, wenn der Wert des Felds ein Problem mit der Überprüfung verursacht.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Wenn kein Fehler vorliegt, also kein Text anzuzeigen ist, wird die Höhe der Bezeichnung auf 0 verkleinert.Without any text to display (no error), the label collapses to zero height. Wenn Sie es nicht besser wüssten und nicht wüssten, dass es da wäre, sollte alles so aussehen:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Karten mit Steuerelementen mit auf TRUE festgelegter „AutoHeight“-Eigenschaft ohne angezeigte Höhe

Auf der linken Seite des Bildschirms wird in der Liste der Steuerelemente ErrorMessage1 angezeigt. Dies ist unser Bezeichnungssteuerelement.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Beim Aktualisieren einer App können Sie dieses Steuerelement auswählen, um eine gewisse Höhe festzulegen und Ziehpunkte anzuzeigen, mit denen Sie das Steuerelement positionieren und seine Größe anpassen können.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. Das „A“ im blauen Feld gibt an, dass für das Steuerelement AutoHeight auf TRUE festgelegt ist:The "A" in a blue box indicates that the control has AutoHeight set to true:

Zum Zeitpunkt der Erstellung zeigen „AutoHeight“-Steuerelemente die Höhe ein wenig an, was das Ziehen und Ablegen vereinfacht.

Die Text-Eigenschaft dieses Steuerelements ist auf Parent.Error festgelegt, was dazu dient, auf Validierungsregeln basierende dynamische Fehlerinformationen abzurufen.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Lassen Sie uns zur Veranschaulichung die Text-Eigenschaft dieses Steuerelements statisch festlegen, wodurch seine Höhe (und durch Erweiterung die Höhe der Karte) vergrößert wird, um die Länge des Texts aufzunehmen: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:

Mit einer Fehlermeldung können das Steuerelement und die Karte automatisch vergrößert werden

Lassen Sie uns die Fehlermeldung ein wenig verlängern. Wiederum werden das Steuerelement und die Karte vergrößert, um den Text aufzunehmen.Let's make the error message a little longer, and again the control and the card grow to accommodate. Beachten Sie, dass die gesamte Zeile an Höhe zunimmt, wobei die vertikale Ausrichtung zwischen den Karten erhalten bleibt:Note that the row overall grows in height, retaining vertical alignment between the cards:

Bei einer längeren Fehlermeldung werden das Steuerelement und die Karte noch weiter vergrößert, und beachten Sie, dass die Karten in derselben Zeile alle gemeinsam vergrößert werden