Vollständige Listenbeispiele
Diese Beispiele zeigen unterschiedliche Verwendungen von Wertzuordnungen im List-Baustein. Jedes Map-JSON-Objekt ist ein Eintrag im valueMaps-Array des umschließenden Layouts. Lege dieselben Definitionen/Regeln im Editor an; ein einzelnes Map-Objekt ist keine vollständige Vorlagenimportdatei.
Binde Items an eine Object-Liste mit den Beispieldatensätzen und füge die jeweilige Elementvorlage in Eintragslayout ein. Ersetze Beispielfeldnamen und Asset-Referenzen durch deine echten Daten. Die Beispiele ergänzen keine Zuordnungen für andere Elementtypen.
1. Ereignisliste: ein Zustand, mehrere Ausgaben
Dieses Beispiel trennt allgemeine Zustandsdaten von der List-Darstellung. StateAppearance liefert Beschriftung, Symbolname, Farbe, optionalen Zeilenstil und ein HTML-Fragment. Die Liste entscheidet, dieses Fragment neben Zeitstempel/Meldung anzuordnen.
Map-Definition
{
"name": "StateAppearance",
"outputs": [
{ "key": "label", "type": "text" },
{ "key": "iconName", "type": "text", "editor": "icon" },
{ "key": "colour", "type": "text", "editor": "color" },
{ "key": "rowStyle", "type": "text" },
{ "key": "content", "type": "htmlTemplate" }
],
"rows": [
{
"match": "equals",
"value": "started",
"values": {
"label": "Started",
"iconName": "play circle outline",
"colour": "#21c08b",
"content": "{{icon @outputs.iconName color=@outputs.colour}}"
}
},
{
"match": "equals",
"value": "error",
"values": {
"label": "Error",
"iconName": "warning sign",
"colour": "#e5a823",
"rowStyle": "error",
"content": "{{icon @outputs.iconName color=@outputs.colour}}"
}
}
],
"fallback": {
"values": {
"label": "Other",
"iconName": "info circle",
"colour": "grey",
"content": "{{icon @outputs.iconName color=@outputs.colour}}"
}
}
}
Eintragsdaten
[
{ "State": "started", "Time": "2026-10-15T08:00:00Z", "Message": "Playback started" },
{ "State": "error", "Time": "2026-10-15T08:01:00Z", "Message": "Player unavailable" },
{ "State": "maintenance", "Time": "2026-10-15T08:02:00Z", "Message": "Service in progress" }
]
Elementvorlage
Ergänze folgende Regel über die normale CSS-Gestaltung der umschließenden Vorlage/des Themes:
.dashboardListControl > .dashboardListControlItem.listItem-error:not(.selected) {
background: #4b2330;
color: #ffffff;
}
Erwartetes Ergebnis
| Zustand | Fragment | Textpräfix | Äußere Zeilenklasse |
|---|---|---|---|
| started | Grünes Wiedergabesymbol im Kreis | Started | Keine |
| error | Gelbes Warnsymbol | Error | listItem-error |
| maintenance | Graues Informationssymbol aus dem Fallback | Other | Keine |
Der abgesicherte rowStyle-Abruf übergibt keinen nicht gesetzten Wert an row. Der CSS-Selektor überschreibt die Standardgestaltung nicht ausgewählter Fehlerzeilen; :not(.selected) erhält die Auswahlfarben der Liste. Maintenance wählt den Fallback; dessen Werte werden aber nicht in started/error hineingemischt. Die Zeit wird in der Zeitzone der Rendering-Umgebung formatiert. Ergänze right am Layoutcontainer, um den Symbolplatz auf die andere Seite zu verschieben.
Das Ereignisbeispiel in der Vorschau mit dem dokumentierten CSS. Die drei Einträge verwenden zwei Equals-Regeln und den Fallback; die Zeitstempel folgen der lokalen Rendering-Zeitzone.
2. Durchgängige Zahlenbereiche
TemperatureBand ordnet einem Messwert gewöhnliche typisierte Daten zu. Ein Fragment ist nicht erforderlich.
{
"name": "TemperatureBand",
"outputs": [
{ "key": "label", "type": "text" },
{ "key": "level", "type": "number" }
],
"rows": [
{ "match": "range", "to": 8, "toExclusive": true, "values": { "label": "Cool", "level": 0 } },
{ "match": "range", "from": 8, "to": 25, "toExclusive": true, "values": { "label": "Normal", "level": 1 } },
{ "match": "range", "from": 25, "values": { "label": "Warm", "level": 2 } }
],
"fallback": { "values": { "label": "Unavailable" } }
}
Für einen Eintrag wie {"Temperature":25}:
| Testeingabe | Ergebnis |
|---|---|
| Zahl 7,9 | Cool, level 0 |
| Zahl 8 | Normal, level 1 |
| Zahl 24,9 | Normal, level 1 |
| Zahl 25 | Warm, level 2; Check cooling erscheint |
Text 25 | Warm, weil Range numerischen Text akzeptiert |
| Wahrheitswert true, leerer Text oder Kein Wert | Unavailable; level ist nicht gesetzt |
Die Intervalle schließen ohne Überschneidung oder Lücke aneinander an: unter 8, ab 8 bis unter 25, ab 25 nach oben. Soll der ursprüngliche Messwert mit number angezeigt werden, muss das Feld eine Zahl sein; die Zeichenkettenumwandlung des Range-Vergleichs ändert den Feldtyp nicht.
Gerendert mit {"Temperature":25}. Der Wert wählt den bei 25 beginnenden Bereich; dessen numerische Stufe 2 aktiviert Check cooling.
3. False, 0 und leerer Text sind Werte
Capabilities zeigt Werte, die gewöhnliche Wahrheitswerttests verdecken können, sowie eine bewusst lückenhafte passende Regel.
{
"name": "Capabilities",
"outputs": [
{ "key": "available", "type": "boolean" },
{ "key": "count", "type": "number" },
{ "key": "note", "type": "text" }
],
"rows": [
{ "match": "equals", "value": "idle", "values": { "available": false, "count": 0, "note": "" } },
{ "match": "equals", "value": "partial", "values": { "available": true } }
],
"fallback": { "values": { "available": true, "count": 9, "note": "Fallback" } }
}
Für {"State":"idle"}:
Idle zeigt Unavailable, Count: 0 und Empty note. Map testen meldet gesetzte Werte false, 0 und leeren Text. Partial liefert available=true, aber count und note bleiben nicht gesetzt; 9 oder Fallback werden nicht übernommen. Ein unbekannter Zustand wählt den vollständigen Fallback.
Ein gewöhnliches if available passt für „ist wahr“. Es reicht nicht für „ist dieser Schlüssel gesetzt?“, weil false ein gültiger gesetzter Wert ist. Der ausdrückliche Vergleich eq ... false unterscheidet false außerdem von einem fehlenden Ergebnis.
Gerendert mit {"State":"idle"}. Der Wahrheitswert false, die Zahl 0 und leerer Text bleiben gesetzte Werte; dadurch ergeben alle drei ausdrücklichen Prüfungen die dokumentierte Ausgabe.
4. Erfasstes Asset mit ungewöhnlichem Schlüssel
Lege MediaState mit einer Asset-Referenz-Ausgabe namens image key und einer HTML-Vorlagenausgabe content an. Ergänze eine Equals-Regel für ready. Weise über den Asset-Picker ein echtes Bild zu; verwende keine erfundene ID. Speichere in content:
Für einen Eintrag {"State":"ready"} lautet die Elementvorlage:
Erwartet: Das ausgewählte Bild erscheint; der gespeicherte typisierte Asset-Wert schützt es vor dem Löschen. lookup liest den Schlüssel mit Leerzeichen, ohne dessen Bedeutung zu ändern.
Entferne den Asset-Wert und das Bild verschwindet; renderMap kann weiterhin das leere Fragmentergebnis rendern. Nach Speichern der Entfernung der letzten strukturierten Referenz ist das Asset wieder löschbar. Export leert den Asset-Wert; Import benötigt eine Bildzuweisung im Zielsystem. Eine feste Asset-ID nur in content würde bei erfolgreicher Auflösung ein Bild ergeben, aber nicht diese Erfassung über den Lebenszyklus.
Gerendert mit {"State":"ready"} und einem für image key ausgewählten vorhandenen Bild. Das Fragment löst den Schlüssel mit Leerzeichen über lookup auf; das Beispielbild stammt aus dieser lokalen Asset-Bibliothek.
5. Text, HTML und ausdrücklich verschachteltes Rendern
MessageParts zeigt Kontext, Maskierung und Geschwisterausgaben. Ein immer ausgewählter Fallback konzentriert das Beispiel auf das Rendern statt den Regelvergleich.
{
"name": "MessageParts",
"outputs": [
{ "key": "caption", "type": "textTemplate" },
{ "key": "content", "type": "htmlTemplate" }
],
"rows": [],
"fallback": {
"values": {
"caption": "{{this.Message}} [{{@value}}]",
"content": "<strong>{{renderMap \"MessageParts\" @value \"caption\"}}</strong>"
}
}
}
Für {"State":"ready","Message":"<em>Ready</em>"}:
Das erwartete HTML ist <strong><em>Ready</em> [ready]</strong>: Das äußere strong-Element ist selbst verfasstes HTML, das Message-Markup bleibt sichtbarer Text. Das Textfragment wird beim normalen Einfügen einmal maskiert. Beide Aufrufe behalten den Eintragskontext; @value ist ready.
map für caption würde {{this.Message}} [{{@value}}] als wörtlichen Quelltext liefern. Auch @outputs.caption in content liest nur Rohquelltext. Beide führen Zeichenketten nicht rekursiv aus. Erst der ausdrückliche verschachtelte renderMap-Aufruf wählt die Geschwisterausgabe aus und führt sie aus.
Caption/content dürfen sich nicht gegenseitig rekursiv aufrufen. Ein Zyklus ergibt ein leeres fehlerhaftes Fragment mit cycle-Diagnose und wählt keine andere Regel. Textfragmente können keine Zeilenklassen weitergeben, auch wenn ein verschachteltes HTML-Fragment sie deklariert.
Gerendert mit {"State":"ready","Message":"<em>Ready</em>"}. Das verschachtelte Textfragment zeigt das Markup als Text; das selbst verfasste äußere strong-Element sorgt für den Fettdruck.
Eigene Anpassungen prüfen
- Prüfe Feldnamen und echte Typen der Items-Daten; Groß-/Kleinschreibung ist relevant.
- Teste über Map testen jeden Equals-Wert, numerische Endpunkte und Fallback/Kein Wert.
- Prüfe ein Fragment mit einem passenden Eintrag, danach die vollständige Elementvorlage mit echtem Regelvergleich und Layout.
- Prüfe nicht gesetzte Werte, false,
0, leeren Text, lange Meldungen, fehlende Symbole/Assets und helle Farben vor dem Dashboardhintergrund. - Prüfe Verwendung vor Umbenennen/Entfernen und weise Assets nach einem Import neu zu.
Die Helferreferenz erläutert Diagnosen und Maskierung. Die List-Seite nennt CSS-Klassen und Variablen zur Anpassung dieser Layouts an dein Theme.