Widget "Liste" (mit Thema versehbar)
Mit dem Widget "Liste" können Sie Datenzeilen anzeigen.
 |
Das Widget "Liste" ist als Standard-Widget in der Plattform und als Webkomponente verfügbar, die aus einem SDK importiert werden kann.
|
Datenformat
Sie können Elemente des Widgets "Liste" mithilfe von Daten aus einer Infotable konfigurieren, die mit der folgenden Struktur formatiert ist:
|
Felddefinition
|
Anzeigefeld
|
Wertfeld
|
Statusfeld
|
|---|---|---|---|
|
Beschreibung
|
Stellt die Beschriftung des Listenelements zur Laufzeit dar.
|
Stellt den tatsächlichen Wert des Listenelements dar. Dieser Wert wird auch in der Eigenschaft SelectedText gespeichert.
|
Ein optionales Infotable-Feld, das den Status der Elemente in der Liste darstellt. Diese Eigenschaft kann verwendet werden, um die Elemente in der Liste zu aktivieren oder zu deaktivieren. Unterstützte Werte: Enabled oder Disabled
|
|
Basistyp
|
STRING oder NUMBER
|
STRING oder NUMBER
|
STRING
|
Listenelemente definieren
Wenn Sie Listenelemente definieren möchten, binden Sie eine Infotable, die mit dem erforderlichen Datenformat formatiert ist.
1. Fügen Sie im Fensterbereich Daten einen Datendienst hinzu, der Listenelemente für das Widget definiert. Sie können Elemente mit dem Infotable-Format definieren, das im vorherigen Abschnitt beschrieben wird.
2. Binden Sie die Eigenschaft All Data des Datendiensts an die Eigenschaft Data des Widgets "Liste". Eine Bindung wird erstellt.
3. Wählen Sie im Fensterbereich Eigenschaften das Infotable-Feld für jede der folgenden Eigenschaften aus:
◦ DisplayField – Die Daten für die Elementbeschriftungen.
◦ ValueField – Die tatsächlichen Werte von Elementbeschriftungen.
◦ StateField – Ein optionales Feld, das den Status (aktiviert oder deaktiviert) jedes Datenelements definiert.
4. Klicken Sie auf Speichern und dann auf Mashup anzeigen.
Die Listenelemente werden zur Laufzeit im Widget angezeigt.
Mehrfachauswahl aktivieren
Sie können die Mehrfachauswahl in der Liste aktivieren, indem Sie die Widget-Eigenschaft MutliSelect auf "true" festlegen. Bei aktivierter Mehrfachauswahl werden Kontrollkästchen hinzugefügt, die es Benutzern ermöglichen, ein oder mehrere Elemente in einer Liste auszuwählen. Darüber hinaus wird oberhalb der Elemente ein Steuerelement hinzugefügt, über das Benutzer alle Elemente gleichzeitig auswählen oder ihre Auswahl aufheben können.
Einzelauswahl konfigurieren
Standardmäßig unterstützt das Widget die Auswahl von einzelnen Elementen. Ein ausgewähltes Element wird mit einer Hintergrundfarbe hervorgehoben.
Legen Sie die Eigenschaft RadioButtonSelection auf "true" fest, um die Optionsfeldauswahl bei Verwendung des Einzelauswahlmodus zu aktivieren. Die Schaltfläche wird links von der Liste angezeigt. Die Listenelemente werden als Optionsfeldgruppe angezeigt, die den Benutzern angibt, dass jeweils nur ein Element ausgewählt werden kann.
Filter hinzufügen
Sie können der Liste einen Filter hinzufügen, indem Sie die Widget-Eigenschaft Filter auf "true" festlegen. Der Filter wird oben in der Liste angezeigt und ermöglicht es Benutzern, Elemente in der Liste schnell zu filtern.
Elementauswahl aufheben
Sie können ein leeres Element hinzufügen, das es Benutzern ermöglicht, die Auswahl in einer Einzelauswahlliste aufzuheben, indem Sie die Widget-Eigenschaft ClearSelection auf "true" festlegen. Außerdem können Sie die Beschriftung des leeren Elements mithilfe der Eigenschaft ClearSelectionLable ändern.
| | Diese Eigenschaft ist nicht verfügbar, wenn der Mehrfachauswahlmodus aktiviert ist. |
Statusformatierung anwenden
Sie können State Formatting verwenden, um den aktuellen Status der Listenelemente auf Grundlage einer Zeichenfolge oder eines numerischen Werts hervorzuheben. Weitere Informationen finden Sie unter "Beispiel: Statusformatierung auf ein Listen-Widget anwenden (ptc.com)".
Widget-Eigenschaften
Eigenschaftenname | Beschreibung | Basistyp | Standardwert | Bindbar (J/N) | Lokalisierbar (J/N) | ||
|---|---|---|---|---|---|---|---|
Label | Text, der als Widget-Beschriftung angezeigt wird. | STRING | Liste | J | J | ||
LabelAligment | Richtet die X-Achsenbeschriftung links, rechts oder mittig aus. | STRING | Links | J | N | ||
Aligment | Richtet die Elemente in der Liste links, rechts oder mittig aus. | STRING | Links | J | N | ||
ClearselectionItem | Fügt der Liste ein leeres Auswahlelement hinzu. Ermöglicht es dem Benutzer, eine Auswahl zu entfernen. | BOOLEAN | True | J | N | ||
ClearselectionLabel | Gibt einen benutzerdefinierten Text für das Element zum Löschen der Auswahl in der Liste an. Standardmäßig auf Keine festgelegt. | STRING | - | J | J | ||
MultiSelect | Ermöglicht dem Benutzer die Auswahl mehrerer Elemente in der Liste. | BOOLEAN | False | N | N | ||
StateField | Gibt die Infotable an, die zum Deaktivieren oder Aktivieren von Elementen in der Liste verwendet werden soll. | INFOTABLE | N/A | N | N | ||
Disabled | Deaktiviert das Widget im Mashup. Das Widget wird im Mashup angezeigt, Sie können jedoch nicht darauf klicken. | BOOLEAN | False | J | N | ||
ShowListFilter | Fügt einen Filter innerhalb der Liste hinzu, um die Listenelemente zur Laufzeit zu filtern. | BOOLEAN | False | N | N | ||
FilterHintText | Zeigt einen Hinweistext für den Listenfilter an. | STRING | N/A | N | J | ||
AutoSelectFirstRow | Legt die erste Zeile als ausgewählte Option in der Liste fest.
| BOOLEAN | N/A | N | N | ||
RadioButtonSelection | Zeigt bei Verwendung des Einzelauswahlmodus Optionsfelder neben Listenelementen an. | BOOLEAN | False | N | N | ||
RowHeight | Legt die Zeilenhöhe für die einzelne Zeile fest. | NUMBER | 34 | J | N | ||
CustomClass | Definiert das CSS als oberstes Div-Objekt des Widgets. Es können mehrere Klassen, getrennt durch ein Leerzeichen, eingegeben werden. | STRING | N/A | J | N | ||
TabSequence | Die Sequenz, in der Widgets hervorgehoben werden, wenn der Benutzer die Tabulatortaste drückt. | NUMBER | N/A | N | N | ||
Data | Die Infotable oder Datenquelle für die Widget-Daten. | INFOTABLE | N/A | J | N | ||
DisplayField | Infotable-Feld, das den Datenwert repräsentiert. | N/A | N/A | N | N | ||
ValueField | Feld, das für SelectedText verwendet wird. | N/A | N/A | N | N | ||
SelectedText | Ermöglicht die Auswahl eines Elements in der Liste. | STRING | N/A | J | J | ||
SelectedItems | Definiert die Infotable-Quelle der ausgewählten Elemente in der Liste. | INFOTABLE | N/A | J | N | ||
DoubleClicked | Ein Ereignis wird ausgelöst, wenn Sie auf das Widget doppelklicken. | N/A | N/A | J | N | ||
ListFormat | Diese Eigenschaft wird verwendet, um ein bestimmtes Rendering für die Daten anzuwenden. Diese Eigenschaft unterstützt die folgenden Rendering-Formate: NUMBER, INTEGER, LONG, DATETIME, LOCATION, VEC2, VEC3, VEC4, THINGCODE, HYPERLINK, IMAGELINK, IMAGE, STRING, BOOLEAN, TAGS, HTML, THINGNAME, THINGSHAPENAME, THINGTEMPLATENAME, USERNAME, MASHUPS, INFOTABLE, PASSWORD, XML, JSON, VALUES. | N/A | N/A | N/A | N/A |
Daten des Widgets "Liste" validieren
Sie können Validierungseigenschaften verwenden, um die Auswahl von Listenelementen zur Laufzeit zu validieren. Sie können beispielsweise ein Element in der Liste erforderlich machen und eine Fehlermeldung anzeigen, wenn keine Elemente ausgewählt sind.
Weitere Informationen zu den Validierungseigenschaften finden Sie unter Validierung auf Widgets anwenden.
Die folgende Tabelle listet Validierungseigenschaften auf, die im Fensterbereich Validierung verfügbar sind (ThingWorx 9.3.4 oder höher).
Eigenschaft | Beschreibung | Basistyp | Standardwert | Bindbar (J/N) | Lokalisierbar (J/N) |
|---|---|---|---|---|---|
CriteriaMessage | Die Meldung, die für die Validierungskriterien und beim Fehlschlagen der Validierung angezeigt wird. | STRING | N/A | J | J |
CriteriaMessageDetails | Details, die für die Validierungskriterien und die Fehlermeldung angezeigt werden sollen. | STRING | N/A | J | J |
RequiredMessage | Die Meldung, die angezeigt wird, wenn "Wert erforderlich" auf "true" festgelegt und kein Element ausgewählt ist. | STRING | Eine Auswahl ist erforderlich | J | J |
ShowValidationCriteria | Zeigt eine Hinweismeldung über die erforderliche Eingabe an, wenn die Liste bearbeitet wird. | BOOLEAN | False | J | N |
ShowValidationFailure | Zeigt eine Fehlermeldung an, wenn die Validierung des eingegebenen Werts fehlschlägt. | BOOLEAN | False | J | N |
ShowValidationSuccess | Zeigt eine Erfolgsmeldung an, wenn die Validierung des eingegebenen Werts erfolgreich ist. | BOOLEAN | False | J | N |
SuccessMessage | Die Meldung, die angezeigt wird, wenn die Validierung erfolgreich ist. | STRING | N/A | J | J |
SuccessMessageDetails | Eine sekundäre Meldung, die mehr Informationen zur Validierungserfolg-Meldung anzeigt. | STRING | N/A | J | J |
Validate | Ein bindbares Ereignis, das ausgelöst wird, wenn der Widget-Wert sich ändert. Binden Sie dieses Ereignis an den Dienst oder die Funktion, um ein Validierungsmuster oder einen Ausdruck anzuwenden. | Ereignis | N/A | J | N |
ValidationCriteriaIcon | SVG-Symbol auswählen, das in der Hinweisnachricht für die Validierungskriterien angezeigt wird. | IMAGELINK | info | N | N |
ValidationFailureIcon | Legt das SVG-Symbol so fest, dass es in der Statusmeldung angezeigt wird, wenn die Validierung fehlschlägt. | IMAGELINK | error | N | N |
ValidationOutput | Ruft die Ausgabe der Widget-Validierung ab. Zurückgegebene Werte sind Undefined, Unvalidated, Valid oder Invalid. | STRING | N/A | J | N |
ValidationState | Eine bindbare Eigenschaft, die den Validierungsstatus festlegt. Sie können diese Eigenschaft auf Undefined, Unvalidated, Valid oder Invalid festlegen. | STRING | Undefined | J | N |
ValidationSuccessIcon | SVG-Symbol auswählen, das in der Statusmeldung angezeigt wird, wenn die Validierung erfolgreich ist. | IMAGELINK | success | N | N |
ValueRequired | Auswahl eines Elements in der Liste erforderlich machen | BOOLEAN | False | J | N |