Widget "Sammlung" konfigurieren
Layout für die Sammlung auswählen
Sie können Sie das Layout des Widgets mit der Eigenschaft Layout konfigurieren.
Flexibel – Ein reaktionsfähiges Layout, das auf Flexbox-Layout-Regeln basiert. In diesem Modus wird in jeder Zeile die Anzahl von Zellen platziert, die in den verfügbaren Platz passt. Zellen werden automatisch in eine neue Zeile umbrochen, wenn nicht mehr genügend Platz verfügbar ist. Jede Zelle wird so erweitert, dass der verfügbare Platz in einer Zeile ausgefüllt wird, oder soweit verkleinert, bis der für die Anzeige des Zelleninhalts mindestens erforderliche Platz erreicht ist. Wenn diese Grenze erreicht ist, wird die Zelle in eine neue Zeile umbrochen. Die horizontale Ausrichtung von Zellen in der letzten Zeile kann mit der Eigenschaft AlignLastRow gesteuert werden.
Raster – Ein reaktionsfähiges Layout, das die Sammlung als Raster mit in Zeilen und Spalten organisierten Zellen anzeigt. In diesem Modus wird in jeder Zeile der Sammlung die gleiche Anzahl von Zellen platziert, basierend auf dem verfügbaren Platz und der Zellenbreite. Wenn eine Zeile nicht in der für die Zeile verfügbaren Breite angezeigt werden kann, wird die letzte Zelle in eine neue Zeile umbrochen, und die Anzahl der Spalten im Layout wird um eins reduziert. Die Spaltenbreite wird so festgelegt, dass sie der breitesten Zelle in der Spalte entspricht, und die Zeilenhöhe wird so festgelegt, dass sie der höchsten Zelle in der Zeile entspricht.
Tabelle – Zeigt die Zellen der Sammlung als eine einzige Spalte an.
Mit den Eigenschaften VerticalAlignment und HorizontalAlignment können Sie steuern, wie Zellen innerhalb einer Zeile oder Spalte ausgerichtet werden. Standardmäßig ist die horizontale Ausrichtung innerhalb von Zeilen so festgelegt, dass die Zellen mit gleichem Abstand zwischen den Zellen verteilt werden. Der Abstand zwischen den Zellen kann mit den Eigenschaften ColumnGap und RowGap gesteuert werden. Verwenden Sie die Eigenschaft LeftAlignLastRow, um die Ausrichtung der letzten Zeile in der Sammlung in einem Raster-Layout zu steuern. Legen Sie die Eigenschaft UniformHeight auf "wahr" fest, um allen Zeilen in der Sammlung dieselbe Höhe zuzuweisen. Die Zeilenhöhe wird so vergrößert, dass sie der höchsten Zeile in der Sammlung entspricht.
 | Sie können verschiedene Layouts kombinieren, indem Sie Widgets vom Typ "Sammlung" verschachteln. Beispielsweise können Sie eine Sammlung der obersten Ebene erstellen, für die das Layout auf Tabelle festgelegt ist, und eine darin enthaltene Sammlung, für die das Layout auf Flexibel festgelegt ist. |
Sammlungszeilen in Abschnitte gruppieren
Sie können die Sammlungszeilen in Abschnitte mit Kopf- oder Fußzeilen gruppieren, die Titel und Beschriftungen enthalten, mit denen die Gruppen oder Kategorien innerhalb einer Sammlung visuell voneinander getrennt werden. Auf diese Weise können Sie Teile der Sammlung organisieren und beschriften und damit das Navigieren und Lesen der Daten für Benutzer einfacher machen. Sie müssen eine Spalte mit einer Kategorie-ID für zugehörige Zellen in der Infotable der Sammlung angeben, um Zellen in einem Widget vom Typ "Sammlung" zu gruppieren. Führen Sie die folgenden Schritte aus, um Sammlungszeilen zu gruppieren:
1. Fügen Sie in der Datenquelle der Sammlung eine Spalte hinzu, die eine Kategorie-ID enthält. Diese Spalte sollte Werte enthalten, die die Kategorien oder Gruppen darstellen, die Sie innerhalb der Sammlung erstellen möchten.
2. Erstellen Sie zwei Mashups, die als Vorlage für die Abschnittskopf- und -fußzeilen verwendet werden sollen. Diese Mashups können Beschriftungen, Bilder oder andere Benutzeroberflächenelemente enthalten, die in den Kopf- und Fußzeilen enthalten sein sollen.
3. Konfigurieren Sie die Eigenschaften des Widgets "Sammlung" im Fensterbereich Eigenschaften.
◦ Wählen Sie neben der Eigenschaft SectionField den Namen der Spalte aus, die die Kategoriedaten enthält.
◦ Legen Sie die Eigenschaften SectionHeaders und SectionFooters auf Sichtbar oder Angeheftet fest. Wenn die Kopf- und Fußzeilen angeheftet sind, bleiben sie am oberen und unteren Ende des Viewports fixiert, wenn ein Bildlauf durch einen Abschnitt durchgeführt wird.
◦ Wählen Sie neben den Eigenschaften HeaderMashup und FooterMashup das Mashup aus, das Sie in Schritt 2 erstellt haben.
◦ Sie können die Eigenschaft SortField verwenden, um die Sammlung zu sortieren.
◦ Geben Sie einen numerischen Wert in den Eigenschaften HeaderHeight und FooterHeight an, um die Höhe der Kopf- und Fußzeilen festzulegen.
◦ Wenn Sie dynamischen Inhalt an die Kopf- oder Fußzeilen übergeben möchten, können Sie optional die Eigenschaften FooterSectionParam und HeaderSectionParam verwenden, um Spaltennamen aus der Datenquelle an Mashup-Parameter zu binden.
4. Speichern Sie das Mashup.
Zur Laufzeit werden die Zellen basierend auf der Infotable-Spalte gruppiert, die Sie für die Eigenschaft SectionField ausgewählt haben.
Abstand zwischen den und um die Sammlungszellen konfigurieren
Verwenden Sie die Eigenschaften ColumnGap und RowGap, um den Abstand zwischen Zellen in der Sammlung zu konfigurieren.
Verwenden Sie die Eigenschaften PaddingRight, PaddingLeft, PaddingTop und PaddingBottom, um den Abstand zwischen der Zellensammlung und dem Widget-Rand zu konfigurieren.
Menüschaltfläche zu Sammlungszellen hinzufügen
Sie können eine Menüschaltfläche unter jeder Zelle in der Sammlung anzeigen, indem Sie der Widget-Eigenschaft CellMenu eine Statusdefinition hinzufügen. Über die Menüschaltfläche können Benutzer eine Reihe von Aktionen ausführen, die für jedes Element in der Sammlung spezifisch sind. Sie können beispielsweise Menüoptionen definieren, mit denen Benutzer die Zelle bearbeiten, löschen oder mehr Details zu der Zelle anzeigen können. Führen Sie die folgenden Schritte aus, um der Sammlung eine Menüschaltfläche hinzuzufügen:
1. Erstellen Sie in Composer eine Statusdefinition, in der jede Menüoption definiert ist, die Sie für die Sammlungszellen anzeigen möchten.
| | Das Anwenden von Schriftarten oder Hintergrundfarben und Stilen auf die einzelnen Menüoptionen mit einer Stildefinition wird nicht unterstützt. Es werden nur Symbole unterstützt. |
2. Wählen Sie in Mashup Builder im Zeichenbereich oder über den Fensterbereich Explorer das Widget "Sammlung" aus.
3. Geben Sie im Fensterbereich Eigenschaften die Statusdefinition an, die Sie für die Eigenschaft CellMenu erstellt haben.
Für jede Menüoption, die Sie in der Statusdefinition definiert haben, wird ein Ereignis im folgenden Format hinzugefügt: CellMenu:<MenuItem>
4. Binden Sie die Ereignisse für jede Menüoption an einen Dienst, eine Funktion oder ein Widget, um eine Aktion auszulösen, wenn auf die Menüoption geklickt wird.
5. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an.
Zur Laufzeit wird eine Menüschaltfläche unter jeder Zelle hinzugefügt, und es werden Menüoptionen basierend auf der ausgewählten Statusdefinitionsentität angezeigt.
