Verwenden der erweiterten Formatierung

Sie können Arcade-Ausdrücke zur erweiterten Formatierung der Listen-, Indikator- und Tabellen-Elemente verwenden, um das Rendern der Datenpunkte anzupassen. Ein Datenpunkt kann abhängig von der Konfiguration eines Elements entweder ein Feature oder eine Summenstatistik darstellen. Bei Verwendung von Features stellt ein einzelner Datenpunkt ein einzelnes Feature dar. Bei Verwendung einer Statistik stellt jeder Datenpunkt das Ergebnis dieser Statistik dar. Das Listenelement rendert Feature-Datenpunkte als Zeilenelemente, wobei jede Zeile für einen Datenpunkt steht. Das Indikator-Element rendert einen Datenpunkt nach dem anderen. Das Tabellenelement rendert Feature-Datenpunkte als Zeilen, wobei der Inhalt gesteuert und jede Zelle in der Zelle formatiert werden kann.

Anders als es bei Attributausdrücken (die in Layer-Pop-ups, -Styles und -Beschriftungen verwendet werden) der Fall ist, wird für jedes Element ein einzelner Ausdruck erstellt. Der Ausdruck wird für jeden Datenpunkt ausgeführt und zeigt systemdefinierte und benutzerdefinierte Eigenschaften des betreffenden Elements an. Systemdefinierte Eigenschaften sind die Einstellungen, die Sie ansonsten für ein Element konfigurieren würden, wie z. B. die Text- und Hintergrundfarbe. Benutzerdefinierte Eigenschaften werden vom Benutzer in dem Ausdruck definiert und können beim Konfigurieren des Elements referenziert werden.

Hinweis:

In Webkarten erstellte Attributausdrücke werden nicht zur Verwendung in Dashboard-Elementen übernommen.

In der folgenden Tabelle ist zusammengefasst, welche Daten aus einem Layer in den Ausdruck übergeben werden.

VariablennameTypBeschreibung

$datapoint

Feature oder Wörterbuch

Gilt für den Indikator, die Tabelle und die Liste

$reference

Wörterbuch

Gilt für den Indikator

Hinweis:
Beim Schreiben von Arcade-Ausdrücken sind die folgenden Hinweise zu beachten:
  • Fügen Sie nach jeder Eigenschaft in einem Wörterbuch ein Komma hinzu, außer bei der letzten Eigenschaft.
  • Attributnamen dürfen keine Leerzeichen oder Sonderzeichen enthalten.

Formatieren von Listen

Für das Listenelement können Sie Arcade-Ausdrücke verwenden, indem Sie die Option Erweiterte Formatierung aktivieren. Sobald Sie sich entschieden haben, die erweiterte Formatierung zu verwenden, sind die Eingaben für die Farbe und sonstige systemdefinierte Eigenschaften nicht mehr verfügbar.

Mithilfe des Ausdrucks, der für jedes Zeilenelement ausgeführt wird, wird definiert, wie jede Zeile in Ihrer Liste verwendet wird. Darüber hinaus kann ein Ausdruck zum Erstellen von Attributen verwendet werden, die in der Vorlage für das Zeilenelement referenziert werden können.

Datenpunktattribute können mithilfe der globalen Variablen $datapoint im Arcade-Editor referenziert werden. Die folgende Tabelle enthält eine Liste der Eigenschaften, die von dem Ausdruck in Form eines Wörterbuchs zurückgegeben werden können.

EigenschaftWertetypBeschreibung

textColor

Zeichenfolge

Basistextfarbe des Zeilenelements

backgroundColor

Zeichenfolge

Hintergrundfarbe des Zeilenelements

separatorColor

Zeichenfolge

Farbe des unteren Rahmens des Zeilenelements

selectionTextColor

Zeichenfolge

Bei Auswahl des Elements für den Linienelementtext verwendete Farbe

selectionColor

Zeichenfolge

Bei Auswahl des Elements verwendete Basistextfarbe

Attribute

Wörterbuch

Ein Wörterbuch mit Attributwertpaaren

Attributname

Zeichenfolge

Attribut, das in der Zeilenelementvorlage mithilfe der {Ausdruck/Attributname}-Syntax referenziert werden kann

Hinweis:

Geometriefunktionen werden nicht unterstützt.

Wenn Sie beispielsweise möchten, dass die Hintergrundfarbe der Liste rot wird, wenn der Wert einen bestimmten Schwellenwert überschritten hat, können Sie eine Variable erstellen, die wie folgt aussieht:

var color = IIF($datapoint.fieldName>[threshold], '#F3DED7','')

In dieser Variablen ist fieldName das Feld für Ihre Werte, während [threshold] der Wert ist, bei dem sich die Hintergrundfarbe ändern soll. Die Variable kann als Eigenschaftswert verwendet werden, wie etwa in dem folgenden Beispiel:

backgroundColor: color,

Wenn Sie diese Variable in der Hintergrundfarbeigenschaft verwenden, erhalten Sie einen Ausdruck, der wie folgt aussieht, wobei die Hintergrundfarbe des Listenelements rot wird, wenn der Geschwindigkeitswert über 40 liegt:

var color = IIF($datapoint.Speed > 40, '#F3DED7', '');

return {
	backgroundColor: color
}

Aktivieren der erweiterten Formatierung in einer Liste

Gehen Sie wie folgt vor, um die erweiterte Formatierung in einem Listenelement zu aktivieren:

  1. Klicken Sie im Konfigurationsfenster der Liste auf die Registerkarte Liste.
  2. Klicken Sie im Abschnitt Erweiterte Formatierung auf Aktivieren.
    Hinweis:
    Sobald die erweiterte Formatierung aktiviert ist, sind systemdefinierte Einstellungen wie Farbeingaben nicht mehr verfügbar. Diese Konfigurationen werden in Ihrem Ausdruck erstellt. Wenn Sie Werte eingeben, bevor Sie die erweiterte Formatierung aktivieren, werden sie dem Ausdruck automatisch hinzugefügt.
  3. Erstellen Sie Ihren Formatierungsausdruck im Editor.
    Tipp:
    Verwenden Sie für Datumsfelder die Funktion "Text", um diese in Zeichenfolgen umzuwandeln, und sie in der Zeitzone des Dashboards anzuzeigen. Mit der Funktion "Text" können Sie die Werte auch nach Bedarf formatieren. Wenn Sie Hilfe zu einer der Arcade-Funktionen benötigen, klicken Sie neben der jeweiligen Funktion auf die Informationsschaltfläche, um weitere Details anzuzeigen.
  4. Wenn Sie möchten, dass der Ausdruck in einem bestimmten Intervall ausgeführt wird, z. B. wenn der Ausdruck die Funktion now() verwendet, aktivieren Sie die Umschaltfläche Skript aktualisieren und legen ein Aktualisierungsintervall fest.
  5. Geben Sie neue Attribute mithilfe der Syntax {Ausdruck/Attributname} in das Feld Vorlage für Zeilenelement ein.

Formatieren von Indikatoren

Für das Indikator-Element können Sie Arcade-Ausdrücke verwenden, indem Sie die Option Erweiterte Formatierung aktivieren. Sobald Sie sich entschieden haben, die erweiterte Formatierung zu aktivieren, sind die systemdefinierten Eigenschaften, wie z. B. die Farboptionen und die Wertformatierung, nicht mehr verfügbar, und die bedingte Formatierung wird deaktiviert. Der Ausdruck dient zum Definieren der Rendering-Eigenschaften und der Bedingungslogik. Zudem kann ein Ausdruck benutzerdefinierte Attribute enthalten, die in den Feldern Titel und Beschreibung auf der Registerkarte Allgemein referenziert werden.

Wenn Sie einen Referenzwert in den Indikator einbeziehen, ist auf der Registerkarte Daten, sobald die erweiterte Formatierung aktiviert ist, nur ein statistikbasierter Referenztyp verfügbar. Wenn Sie zuvor einen Referenztyp mit einem festgelegten Wert definiert haben, wird er dem Ausdruck gemeinsam mit etwaigen Konvertierungsfaktoren und Text- und Farbformatierungen automatisch hinzugefügt. Die Formatierung von Werten, die vor Aktivierung der erweiterten Formatierung erfolgt ist, wird entfernt und muss mithilfe von Wertmustern in dem Ausdruck definiert werden.

Hinweis:

Ein vorheriger Wert wird in Arcade nicht unterstützt. Wenn Sie als Referenztyp einen vorherigen Wert festgelegt haben, bevor Sie die erweiterte Formatierung aktiviert haben, wird er in den aktuellen Wert konvertiert.

Datenpunktattribute können mithilfe der globalen Variablen $datapoint im Arcade-Editor referenziert werden. Je nachdem, ob der Wertetyp "Feature" oder "Statistik" lautet, ist $datapoint vom Typ "Feature" bzw. "Wörterbuch". Wenn auf der Registerkarte Daten eine Referenzstatistik konfiguriert wurde, ist auch die globale $reference-Variable im Editor verfügbar.

Die folgende Tabelle enthält eine Liste der Eigenschaften, die von dem Ausdruck in Form eines Wörterbuchs zurückgegeben werden können.

EigenschaftWertetypBeschreibung

textColor

Zeichenfolge

Basistextfarbe des Indikatorelements

backgroundColor

Zeichenfolge

Hintergrundfarbe des Indikatorelements

topText

Zeichenfolge

Anzeige als Text oben

topTextColor

Zeichenfolge

Farbe des Textes oben

topTextOutlineColor

Zeichenfolge

Farbe des Rahmens des Textes oben

topTextMaxSize

Zeichenfolge

Maximale Größe des Textes oben (xx-small | x-small | small | medium | large | x-large | xx-large)

middleText

Zeichenfolge

Anzeige als mittlerer Text

middleTextColor

Zeichenfolge

Farbe des mittleren Textes

middleTextOutlineColor

Zeichenfolge

Farbe des Rahmens des mittleren Textes

middleTextMaxSize

Zeichenfolge

Maximale Größe des Textes mittig (sehr, sehr klein | sehr klein | klein | mittel | groß | sehr groß | sehr, sehr groß)

bottomText

Zeichenfolge

Anzeige als Text unten

bottomTextColor

Zeichenfolge

Farbe des Textes unten

bottomTextOutlineColor

Zeichenfolge

Farbe des Rahmens des Textes unten

bottomTextMaxSize

Zeichenfolge

Maximale Größe des Textes unten (sehr, sehr klein | sehr klein | klein | mittel | groß | sehr groß | sehr, sehr groß)

iconName

Zeichenfolge

Name des für den Indikator definierten Symbols

Hinweis:

Symbolnamen werden außerhalb des Ausdrucks definiert.

iconAlign

Zeichenfolge

Platzierung des Symbols neben dem mittleren Text (left | right)

iconColor

Zeichenfolge

Füllfarbe des Symbols

iconOutlineColor

Zeichenfolge

Rahmenfarbe des Symbols

noValue

Boolesch

Kennzeichnung, um Text ohne Wert anstelle des Indikators (true | false) anzuzeigen

Attribute

Wörterbuch

Ein Wörterbuch mit Attributwertpaaren

Attributname

Zeichenfolge

Attribute, die in den Feldern Titel und Beschreibung mithilfe der {Ausdruck/Attributname}-Syntax referenziert werden können

Wenn Sie beispielsweise einen Indikator haben, der einen Wert in einer Maßeinheit aufweist, denselben Wert aber auch in einer weiteren Einheit darunter anzeigen möchten, können Sie eine Variable erstellen, um Ihre vorhandenen Werte zu konvertieren. Mit einem Indikator, der die Durchschnittstemperatur in Grad Celsius anzeigt, können Sie zur Verwendung in Ihrem Ausdruck eine Fahrenheit-Variable erstellen, damit Ihre Werte auch in Grad Fahrenheit angezeigt werden.

var fahrenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

Anschließend können Sie die Variable z. B. wie folgt als Eigenschaftswert einbeziehen:

bottomText: fahrenheit,

Wenn Sie diese Variable in der Eigenschaft für Text unten verwenden, erhalten Sie einen Ausdruck, der wie folgt aussieht, wobei die Durchschnittstemperatur (in Grad Celsius) im mittleren Text des Indikators angezeigt wird, während der Fahrenheit-Wert im Text unten angezeigt wird:

var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

return {
	topText: 'Average Temperature',
	middleText: Floor($datapoint.avg_Temperature),
	bottomText: farenheit,
}

Aktivieren der erweiterten Formatierung in einem Indikator

Gehen Sie wie folgt vor, um ein Indikatorelement zu aktivieren:

  1. Klicken Sie im Konfigurationsfenster des Indikators auf die Registerkarte Indikator.
  2. Klicken Sie im Abschnitt Erweiterte Formatierung auf Aktivieren.
    Hinweis:
    Sobald die erweiterte Formatierung aktiviert ist, sind systemdefinierte Einstellungen wie Farbeingaben nicht mehr verfügbar. Diese Konfigurationen werden in Ihrem Ausdruck erstellt. Wenn Sie Werte eingeben, bevor Sie die erweiterte Formatierung aktivieren, werden sie dem Ausdruck automatisch hinzugefügt.
  3. Erstellen Sie Ihren Formatierungsausdruck im Editor.
    Tipp:
    Wenn Sie Hilfe zu einer der Arcade-Funktionen benötigen, klicken Sie neben der jeweiligen Funktion auf die Informationsschaltfläche, um weitere Details anzuzeigen.
  4. Wenn Sie möchten, dass der Ausdruck in einem bestimmten Intervall ausgeführt wird, z. B. wenn der Ausdruck die Funktion now() verwendet, aktivieren Sie die Umschaltfläche Skript aktualisieren und legen ein Aktualisierungsintervall fest.
  5. Optional können Sie neue Attribute in den Feldern Titel und Beschreibung mithilfe der Syntax {Ausdruck/Attributname} referenzieren.

Formatieren von Tabellen

Für das Tabellenelement können Sie einen Arcade-Ausdruck verwenden, indem Sie die Option Erweiterte Formatierung aktivieren. Wenn Sie die erweiterte Formatierung verwenden, sind die Eingaben für die Farbe, die Optionen für die Textausrichtung und andere systemdefinierte Eigenschaften nicht mehr verfügbar und werden stattdessen im Ausdruck festgelegt.

Mit dem Ausdruck, der für jede Zelle in der Tabelle ausgeführt wird, werden Inhalt und Formatierung der einzelnen Zellen in der Spalte definiert. Datenpunktattribute können mithilfe der globalen Variablen $datapoint im Arcade-Editor referenziert werden.

Das cells-Wörterbuch muss für jedes Feld, das auf der Registerkarte Daten der Tabellenkonfiguration definiert ist, eine Eigenschaft enthalten. Beispiel: In einer Tabelle mit gruppierten Werten, die ein Kategoriefeld für Zone und ein Wertefeld für Transaktionsbeträge enthält, enthält das cells-Wörterbuch zwei Eigenschaften: zone und sum_transaction_amounts.

Die folgende Tabelle enthält eine Liste der Eigenschaften, die von dem Ausdruck in Form eines Wörterbuchs zurückgegeben werden können.

EigenschaftWertetypBeschreibung

Zellen

Wörterbuch

Ein Wörterbuch mit Spaltennamen, die auf Feldern basieren, die auf der Registerkarte Daten definiert wurden

displayText

Zeichenfolge

In der Zelle angezeigter Text

Hinweis:

Die Eigenschaft "displayText" muss angegeben werden.

hoverText

Zeichenfolge

Text, der angezeigt wird, wenn Sie mit der Maus auf die Werte zeigen.

Hinweis:

Hovertext muss zunächst auf der Registerkarte Tabelle aktiviert werden.

textColor

Zeichenfolge

Textfarbe der Zelle

backgroundColor

Zeichenfolge

Hintergrundfarbe der Zelle

textAlign

Zeichenfolge

Ausrichtung (left | center | right)

iconName

Zeichenfolge

Name des für die Tabelle definierten Symbols

Hinweis:

Symbolnamen werden außerhalb des Ausdrucks definiert.

iconAlign

Zeichenfolge

Platzierung des Symbols neben dem Zellentext (left | right)

iconColor

Zeichenfolge

Füllfarbe des Symbols

iconOutlineColor

Zeichenfolge

Rahmenfarbe des Symbols

Sie können die erweiterte Formatierung auch verwenden, um für eine Tabelle eine bedingte Formatierung zu erstellen. Wenn Sie beispielsweise eine Tabelle verwenden, in der die letzten Reparaturanfragen angezeigt werden, sollten Sie eine bedingte Formatierung anwenden, um den Status der Anfragen zu unterscheiden. Dazu können Sie eine Variable erstellen, mit der die Farbe der Zelle je nach dem Status mithilfe einer Variablen wie der folgenden geändert wird:

var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')

Sie können die Variable der Eigenschaft backgroundColor zuweisen, sodass die Zellen für neue Fälle hervorgehoben werden, während abgeschlossene Fälle in den Hintergrund gerückt werden.

var statusColor = When(
	$datapoint.status == 'new', 'yellow',
	$datapoint.status == 'closed', lightgray', 'white')

return {
	cells:{
		requests:{
			displayText: <span>${$datapoint.requests}</span>, 
			backgroundColor: statusColor,
			}
		}
	}
Hinweis:

Ausdrücke werden nicht auf die Zusammenfassungszeile einer Tabelle angewendet.

Aktivieren der erweiterten Formatierung in einer Tabelle

Gehen Sie wie folgt vor, um die erweiterte Formatierung in einem Tabellenelement zu aktivieren:

  1. Klicken Sie im Konfigurationsfenster der Tabelle auf die Registerkarte Werte.
  2. Klicken Sie im Abschnitt Erweiterte Formatierung auf Aktivieren.
    Hinweis:
    Sobald die erweiterte Formatierung aktiviert ist, sind systemdefinierte Einstellungen wie Farbeingaben nicht mehr verfügbar. Diese Konfigurationen werden in Ihrem Ausdruck erstellt. Wenn Sie Werte eingeben, bevor Sie die erweiterte Formatierung aktivieren, werden sie dem Ausdruck automatisch hinzugefügt.
  3. Erstellen Sie Ihren Formatierungsausdruck im Editor.
    Tipp:
    Wenn Sie Hilfe zu einer der Arcade-Funktionen benötigen, klicken Sie neben der jeweiligen Funktion auf die Informationsschaltfläche, um weitere Details anzuzeigen.
  4. Wenn Sie möchten, dass der Ausdruck in einem bestimmten Intervall ausgeführt wird, z. B. wenn der Ausdruck die Funktion now() verwendet, aktivieren Sie die Umschaltfläche Skript aktualisieren und legen ein Aktualisierungsintervall fest.

Definieren von Symbolnamen

Mithilfe von Indikator- und Tabellenelementen können Sie SVG-Symbole in die Konfiguration von Elementen einbinden. Wenn Sie die erweiterte Formatierung verwenden, werden in Ihrem Arcade-Ausdruck Symbole hinzugefügt.

Gehen Sie wie folgt vor, um einem Arcade-Ausdruck ein Symbol hinzuzufügen:

  1. Klicken Sie im Abschnitt Symbole unter dem Arcade-Editor auf Hinzufügen.
  2. Wählen Sie ein Symbol aus, oder erstellen Sie ein benutzerdefiniertes Symbol.
  3. Geben Sie einen Namen für das Symbol ein.
  4. Geben Sie in Ihrem Arcade-Ausdruck Ihren Symbolnamen als Wert für die Eigenschaft iconName zurück.

Farbwerte

Wenn Sie Farbwerte in einen Ausdruck einbeziehen, müssen sie als Zeichenfolgen (in Anführungszeichen) angegeben werden. Für Farbwerte, die nicht definiert oder ungültig sind, werden automatisch Standardwerte verwendet. Als Farbwerttypen werden u. a. HEX-Werte, RGB, RGBA, HSL und HSLA akzeptiert. Im Folgenden finden Sie einige Beispiele sowie die jeweils unterstützte Syntax:

  • Hex
    • #090
    • #009900
    • #090a
    • #009900aa
  • RGB und RGBA
    • rgb(34, 12, 64)
    • rgba(34, 12, 64, 0,6)
  • HSL und HSLA
    • hsl(50, 33 %, 25 %)
    • hsla(50, 33 %, 25 %, 0,75)