List

Der Elementarbaustein List zeigt die Einträge einer Variablen an, für die Wert ist eine Liste aktiviert ist. Verwende eine Object-Liste für Einträge mit mehreren Feldern, etwa Ereignisse mit Zeitstempel, Meldung und Zustand. Andere Variablentypen werden ebenfalls unterstützt.

Jeder Eintrag wird einzeln über eine Vorlage im Eintragslayout dargestellt. Die Auswahl übernimmt der List-Baustein: Beim Auswählen werden Position und Wert des Eintrags geschrieben, anschließend wird onSelect ausgelöst.

Eigenschaften

Eigenschaft	Verhalten
Items	Listenvariable mit den anzuzeigenden Einträgen.
Eintragslayout	HTML-/Handlebars-Quelltext für einen Eintrag. Bei leerer Vorlage verwenden Object-Einträge {{json this}}, andere Typen {{this}}. Der Platzhalter im Editor zeigt den aktuellen Standard.
Selected index	Variable mit der ausgewählten Position, beginnend bei 0. Sie steuert die Hervorhebung und wird bei einer Auswahl geschrieben.
Selectable	Schaltet die Auswahl ein. Der Baustein muss außerdem bedienbar sein.
Selected item	Variable, die den ausgewählten Eintrag erhält.
Scrollbar	Automatic zeigt die Scrollleiste bei Bedarf, Always dauerhaft.

Bei einer Auswahl werden Selected index und Selected item vor onSelect geschrieben. Das Rendern einer Vorlage oder eine Zeilenklassendeklaration wählt keinen Eintrag aus und schreibt diese Variablen nicht.

Ohne Selected-index-Bindung hält der Baustein seine Auswahl lokal. Ein gebundener Index ohne Zahlenwert hebt keinen Eintrag hervor. Im Layouteditor wählt ein Klick den Baustein zur Bearbeitung statt eines Laufzeitlisteneintrags.

Aktuelle List-Eigenschaften. Diese bestehende Event-Log-Konfiguration verwendet StateToIcon; die vollständigen Beispiele unten haben eigene Map-Namen.

Wegweiser durch die Dokumentation

Die folgenden Seiten erläutern die jeweiligen Aufgaben:

1. Elementvorlagen und Hilfsfunktionen: Feldzugriffe, HTML-Maskierung, Bedingungen, Formatierung, Symbole, Assets, Vorlagenhilfe und Zeilenklassen.
2. Wertzuordnungen: wiederverwendbare typisierte Ergebnisse, Regeln, Editorabläufe, Tests, Verwendungen und Asset-Verwaltung. Diese Konzepte sind unabhängig vom List-Baustein.
3. Vollständige Listenbeispiele: Ereignisse, Bereiche, typisierte Werte, Assets und Fragmente mit erwarteten Ergebnissen.
4. Technische Referenz für Wertzuordnungen: gespeichertes Schema, Auflösungs-/Rendering-APIs, Validierung, Referenzanbieter und Erweiterungsgrenzen.

Der List-Baustein ist derzeit der einzige Elementverbraucher von Wertzuordnungen. Listen desselben Layouts können Maps gemeinsam verwenden. Andere Elemente haben noch keine Eigenschaften oder Bindungen für Wertzuordnungen.

Elementvorlage

Die Vorlage wird für jeden Eintrag ausgewertet. this bezeichnet diesen Eintrag; bei einem Objekt fügt {{this.Message}} dessen Message-Feld ein. Gewöhnliche Einfügungen werden HTML-maskiert. Selbst verfasstes HTML legt das Layout fest; Hilfsfunktionen übernehmen Formatierung und optional zugeordnete Inhalte.

<div>{{this.Name}}</div>
<div>{{this.Description}}</div>

Eine leere Vorlage verwendet den unter Eigenschaften beschriebenen Standard. Ein fehlendes Feld ergibt keinen sichtbaren Text. Ungültige Vorlagen werden im Editor gemeldet; eine fehlgeschlagene äußere Vorlage ergibt einen leeren Eintrag. Unter Diagnosen wird das andere Verhalten eines isolierten Map-Fragments erläutert.

Wertzuordnungen

Eine Wertzuordnung wählt die erste passende Regel und stellt deren benannte, typisierte Ausgaben bereit. Sie entscheidet nicht über die Platzierung von Inhalten oder das Verhalten eines Elements. In einer Elementvorlage liest map einen Rohwert; renderMap rendert ausdrücklich eine Vorlagenausgabe:

{{map 'StateAppearance' this.State 'label'}}
{{renderMap 'StateAppearance' this.State 'content'}}

Dieser Ausschnitt setzt die Definitionen des Ereignisbeispiels voraus. Schlüssel wie label, content oder class sind frei gewählte Namen ohne automatische Wirkung. Der allgemeine Map-Leitfaden beschreibt Definitionen, Regeln und den optionalen Fallback.

Zeilenlayout

Verwende Vorlagenmarkup zur Ausrichtung und row für Klassen am äußeren Listeneintrag. Beides funktioniert ohne Maps. Die Rezeptklassen dashboardListControlRow, dashboardListControlRowIcon und dashboardListControlRowContent richten einen Symbolplatz neben Text aus. Ergänze right am Zeilencontainer, um den Symbolplatz rechts anzuordnen.

Zeilenmetadaten erläutert zulässige Klassennamen; das Ereignisbeispiel zeigt ein vollständiges zugeordnetes Layout. Eine Klasse wie listItem-error ändert über CSS die Darstellung und wählt keinen Eintrag aus.

CSS-Klassen

• dashboardListControl: ein HTML Element (DIV) mit dieser CSS Klasse wird für den Elementarbaustein selbst angelegt.
  • dashboardListControlScrollbar: diese CSS Klasse wird zusätzlich gesetzt, wenn Scrollbar auf Always steht.
  • controlEnabled: diese CSS Klasse wird zusätzlich gesetzt, wenn der Parameter Status den Wert true liefert - dies wird im Folgenden als enabled bezeichnet.
  • controlDisabled: analog wenn der Parameter Status false liefert - kurz als disabled bezeichnet. Liefert Status weder true noch false (etwa weil Status keinem Parameter zugeordnet wurde), ist der Baustein weder enabled noch disabled.
  • controlActiveTrue: wie beim Parameter Status, nur wird hier der Parameter Active auf true verglichen - die entsprechende Bezeichnung ist dann active.
  • controlActiveFalse: inactive für einen Wert false des Parameters Active.
  • controlForbidden: der angemeldete Benutzer hat nicht die Berechtigung, den Baustein zu bedienen.
• dashboardListControlItem: ein HTML Element (DIV) je Eintrag. Der ausgewählte Eintrag erhält zusätzlich die CSS Klasse selected. Gültige row-Deklarationen fügen listItem-Klassen hinzu, etwa listItem-error.
• dashboardListControlIcon: ein mit icon eingefügtes Symbol (HTML Element I).
• dashboardListControlPoolIcon: ein mit poolIcon eingefügtes Symbol (HTML Element IMG).
• dashboardListControlAsset: ein mit asset eingefügtes Bild (HTML Element IMG).
• dashboardListControlRow: im ausgerichteten Vorlagenrezept ein HTML Element (DIV) im Eintrag, das Symbol und Inhalt nebeneinander anordnet. Mit der Rezeptklasse right trägt es zusätzlich die CSS Klasse right.
  • dashboardListControlRowIcon: das HTML Element (SPAN) mit dem Symbol.
  • dashboardListControlRowContent: das HTML Element (DIV) mit dem Inhalt aus der Elementvorlage.

Ein Eintrag lässt sich nur auswählen, wenn der Baustein nicht disabled und Selectable eingeschaltet ist.

CSS-Variablen

Die Variablen --list-… werden am Baustein selbst gesetzt (Add Style (CSS)), die Variablen --dashboard-list-control-… in einem Theme oder für ein ganzes Dashboard, eine Seite oder ein Panel. Ist die Variable am Baustein nicht gesetzt, gilt die Variable aus dem Theme, sonst die Voreinstellung.

• --list-background / --dashboard-list-control-background, Voreinstellung #ffffff: der Hintergrund (CSS background) der Liste. Ist keine der beiden Variablen gesetzt jedoch --control-text-background, so wird dieser Wert anstelle der Voreinstellung verwendet.
• --list-border / --dashboard-list-control-border, Voreinstellung 1px solid #a0a0a0: der Rahmen (CSS border) der Liste.
• --list-border-radius / --dashboard-list-control-border-radius, Voreinstellung 0: der Eckenradius (CSS border-radius) der Liste.
• --list-padding / --dashboard-list-control-padding, Voreinstellung 0.25em: der Innenabstand (CSS padding) der Liste. Ist keine der beiden Variablen gesetzt jedoch --control-padding oder --dashboard-control-padding, so wird dieser Wert anstelle der Voreinstellung verwendet.
• --list-item-gap / --dashboard-list-control-item-gap, Voreinstellung 0.25em: der Abstand zwischen den Einträgen.
• --list-item-background / --dashboard-list-control-item-background, Voreinstellung #ffffff: der Hintergrund eines Eintrags.
• --list-item-foreground / --dashboard-list-control-item-foreground, Voreinstellung #000000: die Textfarbe (CSS color) eines Eintrags. Ist keine der beiden Variablen gesetzt jedoch --control-text-foreground oder --dashboard-control-text-foreground, so wird dieser Wert anstelle der Voreinstellung verwendet.
• --list-item-border / --dashboard-list-control-item-border, Voreinstellung 1px solid #d4d4d5: der Rahmen eines Eintrags.
• --list-item-border-radius / --dashboard-list-control-item-border-radius, Voreinstellung 0.25em: der Eckenradius eines Eintrags.
• --list-item-padding / --dashboard-list-control-item-padding, Voreinstellung 0.5em: der Innenabstand eines Eintrags.
• --list-selection-background / --dashboard-list-control-selection-background, Voreinstellung #cccccc: der Hintergrund des ausgewählten Eintrags.
• --list-selection-foreground / --dashboard-list-control-selection-foreground, Voreinstellung ist die Textfarbe eines Eintrags: die Textfarbe des ausgewählten Eintrags.
• --list-scrollbar-track / --dashboard-list-control-scrollbar-track, Voreinstellung rgba(0, 0, 0, 0.1): der Hintergrund der Scrollleiste, wenn Scrollbar auf Always steht.
• --list-icon-size, Voreinstellung 1.2em (eine Textzeile): die Höhe der Symbole und Bilder aus der Elementvorlage und der Wertzuordnung.
• --list-icon-gap, Voreinstellung 0.5em: der Abstand zwischen dem Symbolplatz des ausgerichteten Rezepts und dem Inhalt.

Besondere Hinweise

Die Textgröße wird über den Parameter Character size (px) festgelegt - ist dieser 0, so wird die Vorgabe aus der Vorlage respektive des Steuerelementes verwendet. Ohne --list-icon-size wachsen Symbole und Bilder aus der Elementvorlage mit der Textgröße mit.

Ein Asset, das nur über {{asset …}} verwendet wird, gilt in der Asset-Bibliothek nicht als „in Verwendung“ und kann gelöscht werden, da die Referenz erst beim Anzeigen aufgelöst wird. Der Eintrag zeigt dann kein Bild mehr. Assets in deklarierten Asset-Referenz-Ausgaben sind dagegen geschützt; Text und Vorlagenquelltext allein zählen nicht.

hinweis

Die Namen der Hilfsfunktionen haben Vorrang vor gleichnamigen Feldern. Ein Feld mit dem Namen icon oder asset wird daher mit {{this.icon}} beziehungsweise {{this.asset}} eingefügt.