Widget "Struktur-Selektor" (mit Thema versehbar)
 |
Der Struktur-Selektor ist als Widget in Mashup Builder und als Webkomponente in der Web Component SDK-BBibliothek verfügbar.
|
Das Widget "Struktur-Selektor" ermöglicht es Ihnen, eine hierarchische Datennavigation und die Auswahl eines einzelnen Elements bereitzustellen, das in einer Infotable-Eigenschaft gespeichert ist. Sie können das Widget beispielsweise verwenden, um Benutzern die Auswahl von Produkten aus verschiedenen Familien und Kategorien, von Remote-Rechnern, die an verschiedenen Standorten bereitgestellt werden, oder von Inventarteilen, die in einem Wartungslager gespeichert werden, zu ermöglichen. Sie können das ausgewählte Element an andere Widgets wie "Raster" oder "Eigenschaftsanzeige" binden, um weitere Informationen zu einem bestimmten Objekt anzuzeigen. Das Widget ist in zwei Bereiche unterteilt:
• Eine Strukturansicht, die den Pfad zum ausgewählten Element anzeigt und es Ihnen ermöglicht, durch die Baumstruktur zu navigieren.
• Eine Auswahlansicht, in der alle Kinder des aktuellen Elements aufgelistet sind.
Darüber hinaus können Benutzer mit einer Suchschaltfläche die gesamte Hierarchie des Struktur-Selektors durchsuchen. Wenn der Struktur-Selektor zur Laufzeit geladen wird, werden die Elemente der obersten Ebene im Auswahlbereich angezeigt. Wenn ein Element ausgewählt ist, werden seine Kinder angezeigt, und die Struktur wird so aktualisiert, dass der Pfad zum Element hervorgehoben ist. Sie können die Struktur verwenden, um zu höheren Ebenen in der Datenhierarchie zu navigieren. Zur Anzeige der Kinder eines Elements müssen Sie es im Auswahlbereich auswählen. Wenn ein Element keine Kinder hat, wird eine Meldung angezeigt. Sie können diese Meldung mit der Widget-Eigenschaft NoChildrenMessage anpassen.
Anatomie
Der Struktur-Selektor ist in zwei Ansichten unterteilt. Eine Strukturansicht, die den Pfad zum aktuellen Element anzeigt, und eine Auswahlansicht, in der die verfügbaren Kinder für das ausgewählte Element aufgelistet sind.
1. Aktuelle Auswahl aufheben. Durch Klicken auf diese Schaltfläche wird der Struktur-Selektor auf das Element der obersten Ebene zurückgesetzt.
2. Element der obersten Ebene
3. Kindelement von Factories und ein Elternelement von Painting Line.
4. Schaltfläche zum Suchen von Elementen
5. Element
6. Hervorhebungsfarbe des Elements
Datenformat
Erstellen Sie einen Dienst, der eine Infotable mit den folgenden Felddefinitionen zurückgibt, um Listenelemente für das Widget "Struktur-Selektor" zu konfigurieren:
Feld "ID" | Feld "Eltern-ID" | Feld "Name" | Feld "Farbe" | |
|---|---|---|---|---|
Basistyp | STRING | STRING | STRING | STRING |
Beschreibung | Eine eindeutige ID für jedes Element im Struktur-Selektor. | Die ID des Elternelements im Struktur-Selektor. | Die für das Element im Struktur-Selektor anzuzeigende Beschriftung. | Optionales Feld, das die Farbe zum Hervorheben des Elements angibt. Unterstützte Formate: CSS-Farbnamen "red", RGB-Werte "rgb(255, 0, 0)" oder Hexadezimalwerte "#ff0000". |
Zeilenbeispiel | #2 | #1 | Factory | Red |
Jede Zeile in der Infotable definiert ein Element im Struktur-Selektor. Sie können Ihren Datendienst so konfigurieren, dass Elemente statisch oder dynamisch basierend auf der Eingabe von anderen Widgets oder Diensten generiert werden.
Datendienste für den Struktur-Selektor erstellen
1. Öffnen Sie in Composer ein Ding, eine Dingvorlage oder einen anderen Entitätstyp, und öffnen Sie dann die Registerkarte Dienste.
2. Klicken Sie auf Hinzufügen, um einen neuen Dienst für den Struktur-Selektor zu erstellen.
3. Geben Sie unter Dienstinformationen einen Namen für den Dienst ein, und klicken Sie dann auf Speichern und weiter.
4. Definieren Sie im Code-Editor eine neue Infotable mit dem Struktur-Selektor-Datenformat.
5. Definieren Sie die Strukturelemente, indem Sie für jedes Infotable-Feld mithilfe des Data Shape Zeilen mit Werten hinzufügen. Die Syntax zum Definieren einer Zeile lautet wie folgt:
<infotable_name>.AddRow(<Row_Object>);
6. Wenn Sie die Definition des Diensts abgeschlossen haben, klicken Sie auf Fertig und dann auf Speichern, um die Änderungen an der Entität zu speichern.
 | Klicken Sie auf Ausführen, um eine Vorschau der zurückgegebenen Ausgabe-Infotable aus dem Datendienst anzuzeigen. |
Die folgende Abbildung zeigt die Ausgabe der Infotable nach der Ausführung des Datendiensts:
Daten an den Struktur-Selektor binden
Führen Sie die folgenden Schritte aus, um Daten an das Widget "Struktur-Selektor" zu binden:
1. Fügen Sie im Mashup Builder mithilfe des Fensterbereichs Daten ein Ding hinzu, das einen Datendienst für die Listenelemente enthält.
2. Binden Sie die Eigenschaft All Data eines Dienstes an die Widget-Eigenschaft Data.
3. Binden Sie den Dienst an das Mashup-Ereignis Loaded.
4. Geben Sie im Fensterbereich Eigenschaften an, welche Infotable-Spalten zum Konfigurieren der Struktur-Selektor-Elemente verwendet werden sollen:
◦ IDField – Die Spalte mit der eindeutigen ID für die Elemente.
◦ NameField – Die für das Element anzuzeigende Spaltenbeschriftung.
◦ ParentIDField – Die Spalte, in der die Eltern-ID für Elemente angegeben wird.
◦ ColorField – Die Spalte mit der Farbe, die zur Hervorhebung der einzelnen Elemente verwendet wird.
5. Klicken Sie auf Speichern und dann auf Mashup anzeigen.
Zur Laufzeit wird das Element der obersten Ebene angezeigt, wenn Sie den Struktur-Selektor öffnen.
Nach Elementen suchen
Die Suche zeigt eine Liste mit übereinstimmenden Elemente aus den gesamten Strukturdaten an. Elemente, die der aktuellen Auswahl mehr entsprechen, werden in den Suchergebnissen weiter oben aufgeführt. Nach jedem Elementnamen wird der vollständige Pfad in der Baumstruktur angezeigt. Zusätzlich werden Hervorhebungsfarben angezeigt, um die Identifizierung zugehöriger Elemente zu erleichtern. Zum Deaktivieren der Suche legen Sie die Eigenschaft HideSearchButton auf "falsch" fest.
Ausgewählte Elemente an andere Widgets oder Dienste übergeben
Sie können das ausgewählte Element unter Verwendung einer der folgenden Eigenschaften übergeben:
• SelectedData
• SelectedItem – Enthält den Namen des ausgewählten Elements.
Verwenden Sie die Eigenschaft SelectedData. Die Eigenschaft SelectedItem stellt keinen eindeutigen Wert bereit.
Die INFOTABLE, eine Datenstruktur, enthält eine einzelne Zeile, die der Eigenschaft "SelectedItem" der ursprünglichen Eingabe-INFOTABLE entspricht. Diese Konstruktionswahl wurde getroffen, um ein bestimmtes Problem zu beheben, nämlich die Unfähigkeit, zwischen Elementen mit identischen Namen allein basierend auf der Eigenschaft "SelectedItem" zu unterscheiden.
Betrachten Sie das Beispiel in der Figma-Spezifikation. Der Begriff "Apple" kommt in drei Abschnitten vor: "Computer companies", "Record company" und "Fruit". Jede Instanz von "Apple" ist ein separates Element. Wenn wir uns ausschließlich auf die Eigenschaft "SelectedItem" verlassen würden, könnten wir nicht ermitteln, welche der drei Instanzen von "Apple" vom Benutzer ausgewählt wurde.
Durch die Verwendung der Eigenschaft "SelectedData" können wir diese Einschränkung beheben. Die Eigenschaft "SelectedData" stellt umfassende Informationen zum ausgewählten Element bereit, sodass wir genau das Element identifizieren können, das ausgewählt wurde, unabhängig davon, ob andere Elemente den gleichen Namen haben. Dies gewährleistet eine genaue und präzise Auswahl der Elemente und verbessert die Funktionalität und das Benutzererlebnis des Systems.
Widget-Eigenschaften
Eigenschaftenname | Beschreibung | Basistyp | Standardwert | Bindung möglich (<-, ->) | Lokalisierbar (J/N) |
|---|---|---|---|---|---|
Data | Die Infotable-Datenquelle, die zum Definieren der Elemente verwendet wird, die im Widget angezeigt werden sollen. | INFOTABLE | J | N | |
IDField | Die Infotable-Spalte in den Daten, welche die ID für jedes Element enthält. | Infotable-Feld | N | N | |
ParentIDField | Die Infotable-Spalte in den Daten, welche die Eltern-ID für jedes Element enthält. | Infotable-Feld | N | N | |
NameField | Die Infotable-Spalte in den Daten, welche den Anzeigenamen für jedes Element enthält. | Infotable-Feld | N | N | |
ColorField | Die Infotable-Spalte in den Daten, welche die Farbe für jedes Element enthält. Unterstützte Formate: CSS-Farbnamen "red", RGB-Werte "rgb(255, 0, 0)" oder Hexadezimalwerte "#ff0000". | Infotable-Feld | N | N | |
SelectedData | Eine Infotable, die die Zeilendaten mit einer eindeutigen ID für das ausgewählte Element enthält. Verwenden Sie diese Eigenschaft, wenn die Eigenschaft SelectedItem keinen eindeutigen Wert bereitstellt. Das ist beispielsweise der Fall, wenn ein Element mit dem gleichen Namen unter mehreren Eltern angezeigt wird. | INFOTABLE | J | N | |
SelectedItem | Der Name des ausgewählten Elements. Gibt das ausgewählte Element im Struktur-Selektor an. | STRING | Leer | J | N |
SelectedItemChanged | Ein bindbares Ereignis, das ausgelöst wird, wenn das ausgewählte Element geändert wird. | Ereignis | J | N | |
HideSearchButton | Blendet die Suchen-Schaltfläche aus. Bei Verwendung der Suche werden Elemente, die dem ausgewählten Element am ehesten entsprechen, zuerst aufgelistet, gefolgt vom Rest der Suchergebnisse. | BOOLEAN | False | J | N |
NoSelectionMessage | Die Meldung, die auf der rechten Seite des Widgets angezeigt wird, wenn keine Auswahl im Struktur-Selektor vorgenommen wird. | STRING | Widgets.NoSelectionMessage | J | J |
EndOfSelectionMessage | Die Meldung, die auf der rechten Seite des Widgets angezeigt wird, wenn das ausgewählte Element keine Kinder hat. | STRING | Widgets.EndOfSelectionMessage | J | J |
NoSearchResultsMessage | Die Meldung, die auf der rechten Seite des Widgets angezeigt wird, wenn keine Suchergebnisse vorhanden sind. | STRING | Widgets.NoResultsMessage | J | J |
Label | Gibt den Text für die Struktur-Selektor-Beschriftung an. | STRING | Leer | J | J |
SelectionLabel | Gibt an, welche Beschriftung über dem Auswahlabschnitt auf der rechten Seite angezeigt werden soll. | STRING | Widgets.ChooseBelowMessage | J | J |
ClearSelectionLabel | Definiert den Beschriftungstext für die Schaltfläche "Auswahl aufheben". | STRING | Widgets.ClearSelectionMessage | J | J |
Disabled | Verwenden Sie diese Eigenschaft, um das Widget im Mashup zu deaktivieren. | BOOLEAN | False | J | N |