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.
Ziehen und Ablegen für Sammlungszellen aktivieren
Mit der Ziehen-und-Ablegen-Funktion für die Sammlung können Benutzer die visuelle Reihenfolge von Zellen zur Laufzeit ändern und die Sammlungsansicht nach Bedarf anpassen. Benutzer können eine einzelne Zelle an eine neue Position innerhalb derselben Sammlung ziehen, wenn die Gruppierung aufgehoben ist. Das Verschieben von Zellen zwischen Sammlungen wird unterstützt, wenn beide Sammlungen denselben Data Shape verwenden, Ziehen aktiviert ist und die Eigenschaft DragCellsBetweenWidgets auf "wahr" festgelegt ist.
• Zellen in einer nicht gruppierten Sammlung umordnen
• Verschieben Sie Zellen zwischen zwei Sammlungen, die denselben Data Shape verwenden, wenn die Eigenschaft DragCellsBetweenWidgets aktiviert ist.
|
|
Ziehen und Ablegen wird nicht unterstützt, wenn die Gruppierung aktiviert ist. Auch das Verschieben einer Zelle an eine Position außerhalb eines Widgets "Sammlung" nicht unterstützt. Es kann jeweils nur eine Zelle gezogen werden.
|
So aktivieren Sie Ziehen und Ablegen für eine Sammlung:
1. Wählen Sie in Mashup Builder im Zeichenbereich oder über den Fensterbereich Explorer das Widget "Sammlung" aus.
2. Legen Sie im Fensterbereich Eigenschaften die Eigenschaft DragEnabled auf Wahr fest.
3. Wenn Sie das Ziehen von Zellen zwischen mehreren Sammlungen aktivieren möchten, legen Sie die Eigenschaft DragCellsBetweenWidgets für jede Sammlung, die Widget-übergreifendes Ziehen unterstützt, auf Wahr fest.
4. Binden Sie die Eigenschaft DragActionsData an einen Dienst, der die Umordnungslogik verarbeitet und die Datenquelle aktualisiert.
5. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an.
Wenn ein Benutzer eine Zelle in einem Widget "Sammlung" zieht und ablegt, speichert das Widget die Änderungen in der JSON-Eigenschaft DragActionsData. Dieses JSON-Objekt enthält eine sourceIdx und eine targetIdx der verschobenen Zelle, die die ursprüngliche und die neue nullbasierte Position darstellen.
{"sourceIdx": 9, "targetIdx": 7}
Diese Eigenschaft speichert die Informationen, die Sie zum Aktualisieren der Datenquelle benötigen. Das Widget speichert die neue Reihenfolge nicht automatisch, und Sie müssen diese Daten in einem Dienst verwenden, um die Änderungen an den Infotable-Daten für die Sammlung persistent zu machen.
Warum das Widget Indizes anstelle einer UID bereitstellt
Das Widget "Sammlung" funktioniert mit jedem Data Shape, unabhängig von seiner Struktur. ThingWorx erfordert nicht, dass Data Shapes ein Feld für eine eindeutige ID enthalten. Dies bedeutet, dass Ihre Sammlung Zeilen anzeigen kann, in denen alle Daten identisch sind. Eine Aufgabenliste kann z.B. mehrere Zeilen mit dem gleichen Aufgabennamen, der gleichen Priorität und dem gleichen Status enthalten.
Wenn Zeilen identische Daten enthalten, ist die Indexposition die einzige Möglichkeit festzustellen, welche Zeile der Benutzer verschoben hat. Der Index fungiert als eindeutige Referenz auf genau diese Zeile zum Zeitpunkt der Ziehoperation.
Indizes stellen sicher, dass das Widget mit jeder Datenstruktur zuverlässig funktioniert. Das Widget erfordert weder ein eindeutiges ID-Feld, noch setzt es voraus, dass ein solches vorhanden ist. Dies verhindert Fehler bei der Arbeit mit Daten, denen ein solches Feld fehlt. Wenn Sie eine permanente ID benötigen, um Zeilen im Zeitverlauf oder über verschiedene Operationen hinweg zu verfolgen, fügen Sie zu Ihrem Data Shape ein Feld für die eindeutige ID hinzu, z.B. eine GUID oder ID-Nummer, und verwenden Sie es in Ihren Diensten.
Datenquelle mit DragActionsData aktualisieren
Wenn Benutzer Zellen in einem Sammlung-Widget umordnen, müssen Sie diese Änderungen möglicherweise in Ihrer Anwendung speichern. Wenn Zellen beispielsweise Aufgaben in einer Prioritätsliste darstellen, sollte durch das Umordnen die Aufgabensequenz in Ihrer Datenbank aktualisiert werden.
Die Eigenschaft DragActionsData stellt die Werte sourceIdx und targetIdx bereit, die angeben, woher und wohin die Zelle verschoben wurde. Verwenden Sie diese Indexwerte, um die Zeile in Ihrer Sammlungs-Infotable zu suchen, und rufen Sie dann die Daten ab, die Sie zum Aktualisieren Ihrer Datenquelle benötigen.
So speichern Sie umgeordnete Zellen:
1. Binden Sie die Eigenschaft DragActionsData an einen Diensteingabeparameter.
2. Verwenden Sie den Wert sourceIdx oder targetIdx, um auf die Zeile in der Infotable zuzugreifen. Infotables sind nullbasierte Arrays, daher können Sie den Indexwert verwenden, um Zeileninformationen abzurufen.
3. Rufen Sie die benötigten Felder aus der Zeile ab, z.B. IDs, Namen oder andere Bezeichner, um das zu verschiebende Element zu identifizieren.
4. Aktualisieren Sie Ihre Datenquelle mit der neuen Reihenfolge. Möglicherweise müssen Sie Datensätze in einer Datenbanktabelle umordnen, Sequenznummern aktualisieren oder zugehörige Daten ändern.
5. Aktualisieren Sie die Sammlungsdaten, um die aktualisierten Änderungen anzuzeigen.
 |
Die Indexwerte in DragActionsData zeigen die Zellenpositionen zum Zeitpunkt der Ziehoperation. Wenn der Data Shape kein Feld für eindeutige IDs beinhaltet und doppelten Zeilen mit identischen Daten enthält, kann nur anhand des Index identifiziert werden, welche Zeile verschoben wurde. Wenn Sie einzelne Zeilen über mehrere Operationen oder Sitzungen hinweg verfolgen müssen, sollten Sie zu Ihrem Data Shape ein Feld für eindeutige IDs hinzufügen.
|