In Experience Builder können Sie Datenattribute, Statistiken und einfache Ausdrücke verwenden, um grundlegenden dynamischen Inhalt anzuzeigen. Sie können in den Widget-Einstellungen auch statische und zustandsbasierte Styles anwenden.
Es gibt zwei Typen von erweiterter Formatierung: erweiterter dynamischer Inhalt und dynamisches Styling.
- Bei erweitertem dynamischem Inhalt werden Berechnungen mit Daten ausgeführt und dynamische Werte zurückgegeben, die als Widget-Inhalt angezeigt werden. Sie können Arcade-Ausdrücke verwenden, um erweiterten dynamischen Inhalt zu erstellen.
- Beim dynamischen Styling werden Widget-Hintergründe, -Rahmen und andere Visualisierungselemente basierend auf Daten aktualisiert. Sie können sowohl Arcade-Ausdrücke als auch bedingtes Styling (eine No-Code-Funktion) verwenden, um dynamisches Styling zu erstellen.
Arcade
Arcade ist eine leichte und sichere Ausdruckssprache, mit der Sie Daten bearbeiten und benutzerdefinierte Inhalte in Experience Builder-Apps erstellen können. Mit Arcade können Sie sowohl dynamischen Inhalt als auch dynamisches Styling erstellen.
Formatierungsprofile
Ein Formatierungsprofil definiert die Umgebung und die Regeln für die Auswertung und Interpretation von Ausdrücken.
Experience Builder bietet zwei Arten von Formatierungsprofilen:
Mit dem Widget-Formatierungsprofil werden der Inhalt und das Styling einzelner Widgets angepasst. Dabei wird die Profilvariable $dataSource verwendet, um Daten auf der Ebene der Datenquelle zu referenzieren.
Mit dem Listenelement-Widget-Formatierungsprofil werden der Inhalt und das Styling einzelner Listenelemente in einem Listen-Widget sowie Widgets wie z. B. Text-, Schaltflächen- und Bild-Widgets innerhalb eines Listenelements angepasst. Dabei wird die Profilvariable $feature verwendet, um Daten auf der Feature-Ebene zu referenzieren.
Hinweis:
Experience Builder umfasst auch das Datenprofil, mit dem ein FeatureSet als Datenquelle erstellt wird. Sie können das Datenprofil verwenden, um Daten mit Arcade hinzuzufügen.
In allen Fällen geben Sie in Experience Builder Skripte in einen Arcade-Editor ein. Der Editor bietet Zugriff auf unterstützte Variablen, Funktionen und Live-Datenvorschauen, mit denen Sie Skripte testen können.
Der Arcade-Editor wird in verschiedenen Bereichen der Builder-Oberfläche angezeigt, je nachdem, ob Sie Arcade verwenden, um dynamischen Inhalt zu erstellen, ein dynamisches Styling zu erstellen oder Daten hinzuzufügen.
Erweiterter dynamischer Inhalt mit Arcade
Dynamischer Inhalt ist Inhalt, der sich basierend auf Daten oder Benutzerinteraktionen ändert. Mit Arcade können Sie dynamische Werte berechnen und zum Anzeigen als Widget-Inhalt zurückgeben. Anstatt Inhalte direkt an ein Feld oder eine Statistik zu binden, können Sie Ausdrücke schreiben, mit denen Werte basierend auf Logik, Bedingungen und Funktionen berechnet werden.
Der zurückgegebene Wert muss einer der folgenden Feldtypen sein:
- Text
- Zahl
- Datum
- Nur Datum
- Nur Zeit
Experience Builder unterstützt die Verwendung von dynamischem Inhalt auf folgende Arten:
- Erstellen von Textinhalt, einschließlich Schaltflächentext
- Festlegen von Bildquellen
- Festlegen von Links über die URL mit Ausnahme von Links in Text-Widgets
Arcade-Beispielskripte
Die nachfolgenden Unterabschnitte enthalten Arcade-Skripte, die Sie zum Erstellen von dynamischem Inhalt verwenden können.
Anzeigen einer Meldung basierend auf einer Bedingung
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");Anzeigen der Anzahl der Tage seit der letzten Aktualisierung eines Datensatzes
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";Anzeigen einer Anzahl von Einzelwerten
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);Anzeigen einer Meldung nach Anwendung eines Filters
var ds = $dataSources["dataSource_1-18c66465e65-layer-2"].layer;
var queryStr = $dataSources["dataSource_1-18c66465e65-layer-2"].queryParams.where;
Console(queryStr);
if (!IsEmpty(queryStr)) {
var result = Filter(ds, queryStr);
return "Filtered view: " + Count(result) + " records are displayed.";
}
return "All records are displayed."Kürzen langer Texte in einem Listen-Widget
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");Anzeigen unterschiedlicher Bilder in einem Bild-Widget in einer Liste basierend auf einer Kategorie
if ($feature.category === "park") {
return "https://example.com/images/park.png";
} else if ($feature.category === "school") {
return "https://example.com/ images /school.png";
} else {
return "https://example.com/ images /default.png";
}Stylen von dynamischem Inhalt
Für Textinhalte können Sie ein Wörterbuch zurückgeben, das sowohl einen Wert als auch die zugehörigen Text-Styles enthält. Beispielskript:
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};Sie können einen Wert auch im HTML-Format zurückgeben, um ein erweitertes Styling zu erstellen. Beispielskript unter Verwendung von HTML:
return "<p style=\"font-family: Arial; font-size: 16px; color: #333; margin-bottom: 12px;\">" +
"Welcome to Experience Builder! Visit our " +
"<a href=\"https://experience.arcgis.com\" style=\"color: #007BFF; text-decoration: none;\">" +
"homepage</a> for more details.</p>" +
"<p style=\"font-size: 15px; font-family: Verdana; color: #444; margin-bottom: 8px;\">" +
"Key features:</p>" +
"<ul style=\"font-size: 14px; font-family: Verdana; color: #444; margin-top: 0;\">" +
"<li style=\"margin-bottom: 6px;\">Interact with 2D and 3D content in one app.</li>" +
"<li style=\"margin-bottom: 6px;\">Deploy responsive apps to any device.</li>" +
"<li style=\"margin-bottom: 6px;\">Create, deploy, and manage apps in a single place.</li>" +
"</ul>"In der folgenden Tabelle sind die HTML-Tags aufgeführt, die von Experience Builder in Arcade-Skripten unterstützt werden:
| Tag | Attribute |
|---|---|
h1, h2, h3, h4, h5, h6 | Style |
span | Style |
p | Style |
s | Style |
strong | Style |
em | Style |
u | Style |
ol, ul | Style |
li | Style |
br | |
a | style, href, target |
img | style, src, alt, height, width |
Dynamischer Style mit Bedingungen oder Arcade
Mit dynamischem Styling können Sie Widgets basierend auf Daten visuell anpassen. Dazu gehört das Ändern von Visualisierungen wie Textgröße, Hintergrundfarbe und Rahmenart basierend auf Feldwerten, Statistiken oder berechneter Logik.
Die Einstellung Dynamischer Style wird im Einstellungsfenster eines Widgets angezeigt, wenn Sie das Widget mit Daten verbinden.
Die folgenden Widgets unterstützen dynamischen Style:
- Widget "Text": Die Einstellung Dynamischer Style wird unten im Einstellungsfenster angezeigt.
- Widget "Schaltfläche": Die Einstellung Dynamischer Style wird unter Erweitert angezeigt. Jeder Zustand (Standard und Daraufzeigen) verfügt über eine eigene Einstellung.
- Widget "Liste": Die Einstellung Dynamischer Style wird unter dem jeweiligen Zustand (Standard, Daraufzeigen und Ausgewählt angezeigt).
Hinweis:
Beim Widget "Liste" werden dynamische Styles auf einzelne Listenelemente und nicht auf das gesamte Widget angewendet.
Aktivieren Sie Dynamischer Style, und klicken Sie auf die Einstellungsschaltfläche 
, um das Fenster Dynamischer Style zu öffnen. Das Fenster enthält zwei Registerkarten: Bedingung und Skript.
Bedingung
Bedingter Style ist eine No-Code-Option, mit der Sie Styles basierend auf einfachen Regeln anwenden können. Eine Skripterstellung ist nicht erforderlich. Dies ist die empfohlene Methode zur visuellen Hervorhebung von Unterschieden bei Daten, beispielsweise Statusindikatoren, Kategorien und Wertebereichen.
Die Registerkarte Bedingung umfasst die folgenden Einstellungen:
- Indikator für Bedingungen auswählen: Wählen Sie eine Methode zum Erstellen von Bedingungsanweisungen aus. Bei den Widgets "Text" und "Schaltfläche" können Sie Datenattribute, Statistiken oder zuvor konfigurierten dynamischen Inhalt verwenden. Beim Widget "Liste" können Sie nur Datenattribute verwenden.
In der folgenden Tabelle sind die Typen der Attributfelder, die als Indikatoren verwendet werden können, mit den jeweils unterstützten Operatoren aufgeführt.
Indikatorfeldtyp Unterstützte Operatoren Zeichenfolge
ist, ist nicht, enthält, ist leer, ist nicht leer
Zahl
ist, ist nicht, ist größer als, ist kleiner als, liegt zwischen
- Style-Bedingungen: Nach dem Festlegen eines Indikators können Sie auf Style-Bedingung hinzufügen klicken, um Bedingungen zu erstellen. Jede Bedingung besteht aus den folgenden Komponenten:
- Operator: Treffen Sie eine Auswahl aus einer Liste von Operatoren, die durch den Indikator unterstützt werden.
- Wert: Der Zielwert für den Vergleich mit dem Indikator. Klicken Sie auf Quellentyp auswählen, um eine Eingabemethode auszuwählen, beispielsweise "Benutzereingabe", "Feld", "Eindeutig" und (für numerische Indikatoren) "Statistik".
- Style: Das visuelle Styling, das angewendet wird, wenn die Bedingung erfüllt ist, beispielsweise Textfarbe, Hintergrund oder Rahmen.
Sie können eine Bedingung im Einstellungsfenster auswählen, um eine Vorschau des Effekts auf der Zeichenfläche anzuzeigen, auch wenn die aktuellen Daten die Bedingung nicht erfüllen. Sie können Bedingungen neu anordnen, duplizieren und löschen. Wenn die aktuellen Daten mit mehreren Bedingungen übereinstimmen, hat diejenige Priorität, die Sie in der Bedingungsliste weiter oben platzieren. Wenn die aktuellen Daten keine Bedingungen erfüllen, verwendet das Widget das entsprechende statische Styling.
Skript
Sie können Arcade-Skripte verwenden, um eine komplexe und flexible Style-Logik zu erstellen. Sie können auf der Registerkarte Skript auf Arcade-Editor klicken, um das Editor-Fenster zu öffnen.
Das Skript wird von Experience Builder lokal gespeichert und ist weiter verfügbar, wenn Sie den Editor das nächste Mal öffnen. Um ein Skript auszuführen, klicken Sie auf Übernehmen. Das angewendete Skript wird im Feld Verwendetes Skript angezeigt.
Mit dem Arcade-Editor konfigurieren Sie Style-Regeln nicht über eine No-Code-Oberfläche, sondern schreiben ein Skript, das ein Wörterbuch mit Style-Eigenschaften und den entsprechenden Werten zurückgibt. Auf diese Weise können Sie Styles basierend auf benutzerdefinierter Logik, Berechnungen und Bedingungen anwenden, die mit der Funktion Style-Bedingung nicht möglich sind.
Experience Builder verwendet zurückgegebene Werte für den Style eines Widgets. Wenn Sie Style-Schlüssel eingeben, die nicht im Wörterbuch enthalten sind, verwendet das Widget die Standard-Style-Einstellungen für diese Eigenschaften.
In den folgenden Tabellen sind die unterstützten Style-Eigenschaften für jedes Widget einschließlich der erwarteten Wertetypen und ihrer Bedeutung aufgeführt.
Hinweis:
Stellen Sie beim Festlegen von Farben sicher, dass der Wert den CSS-Farbformaten entspricht, z. B. benannte Farben ("red"), Hexadezimalcodes ("#ff0000") oder "rgba()".
Styling des Widgets "Text"
Das Widget "Text" unterstützt die folgenden Style-Eigenschaften:
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
text | Wörterbuch | Festlegen des Text-Styles |
text.size | Zahl | Schriftgröße in Pixel |
text.color | Zeichenfolge | Textfarbe |
text.bold | Boolesch | Gibt an, ob Fettformatierung verwendet werden soll. |
text.italic | Boolesch | Gibt an, ob Kursivformatierung verwendet werden soll. |
text.underline | Boolesch | Gibt an, ob Unterstreichen verwendet werden soll. |
text.strike | Boolesch | Gibt an, ob Durchstreichen verwendet werden soll. |
Hintergrund | Wörterbuch | Festlegen des Hintergrunds |
background.color | Zeichenfolge | Hintergrundfarbe |
background.fillType | Zeichenfolge | "Anpassen", "Ausfüllen", "Zentrieren", "Kachel" oder "Strecken" |
background.image | Zeichenfolge | Bild-URL |
Im Folgenden finden Sie ein Beispielskript, mit dem der Name einer Stadt im Widget "Text" in Abhängigkeit von der Einwohnerzahl der ausgewählten Stadt mit unterschiedlichen Textgrößen und Hintergrundfarben gestylt wird:
// Get the list of selected features from the data source
var sf = $dataSources["dataSource_id"].selectedFeatures;
// Get the population of the first selected feature
var pop = First(sf).Population;
// Initialize style variables
var bgColor = "";
var txtStyles = null;
// Apply style based on population threshold
if (pop > 500000) {
bgColor = "rgba(238, 246, 255, 1)";
txtStyles = {
size: 34,
bold: true
};
} else {
bgColor = "rgba(255, 216, 219, 1)";
txtStyles = {
size: 25,
italic: true
};
}
return {
background: {
color: bgColor
},
text: txtStyles
};Styling des Widgets "Schaltfläche"
Das Widget "Schaltfläche" unterstützt die folgenden Style-Eigenschaften:
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
text | Wörterbuch | Festlegen des Text-Styles |
text.size | Zahl | Schriftgröße in Pixel |
text.color | Zeichenfolge | Textfarbe |
text.bold | Boolesch | Gibt an, ob Fettformatierung verwendet werden soll. |
text.italic | Boolesch | Gibt an, ob Kursivformatierung verwendet werden soll. |
text.underline | Boolesch | Gibt an, ob Unterstreichen verwendet werden soll. |
text.strike | Boolesch | Gibt an, ob Durchstreichen verwendet werden soll. |
icon | Wörterbuch | Festlegen des Symbol-Styles |
icon.name | Zeichenfolge | Symbolname |
icon.position | Zeichenfolge | "LINKS" oder "RECHTS" |
icon.size | Zahl | Symbolgröße in Pixel |
icon.color | Zeichenfolge | Sie können die Farbe des Symbols festlegen, wenn das Symbol im SVG-Format vorliegt. |
Hintergrund | Wörterbuch | Festlegen des Hintergrunds |
background.color | Zeichenfolge | Hintergrundfarbe |
background.fillType | Zeichenfolge | "Anpassen", "Ausfüllen", "Zentrieren", "Kachel" oder "Strecken" |
background.image | Zeichenfolge | Bild-URL |
border | Wörterbuch | Festlegen der Rahmenart |
border.border | Wörterbuch | Denselben Style für alle Rahmen festlegen |
border.border.type | Zeichenfolge | "Durchgezogen", "Gestrichelt", "Gepunktet" oder "Doppelt" |
border.border.color | Zeichenfolge | Rahmenfarbe |
border.border.width | Zahl | Rahmenbreite |
border.borderLeft | Wörterbuch | Style für den linken Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderRight | Wörterbuch | Style für den rechten Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderTop | Wörterbuch | Style für den oberen Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderBottom | Wörterbuch | Style für den unteren Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
borderRadius | Wörterbuch | Festlegen des Rahmenradius |
borderRadius.unit | Zeichenfolge | "Px", "REM", "EM", "VW" oder "%" |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Tipp:
Sie können Schaltflächensymbole aus dem verfügbaren Symbolsatz auswählen oder ein eigenes Symbol hochladen. Wenn Sie ein Symbol hochladen, können Sie es im Arcade-Skript mit dem entsprechenden Namen referenzieren.
Mit dem folgenden Beispielskript wird ein Symbol im Widget "Schaltfläche" basierend auf dem Lieferstatus einer Bestellung geändert:
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};Styling des Widgets "Liste"
Das Widget "Liste" unterstützt die folgenden Style-Eigenschaften für die einzelnen Listenelemente:
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
Hintergrund | Wörterbuch | Festlegen des Hintergrunds |
background.color | Zeichenfolge | Hintergrundfarbe |
background.fillType | Zeichenfolge | "Anpassen", "Ausfüllen", "Zentrieren", "Kachel" oder "Strecken" |
background.image | Zeichenfolge | Bild-URL |
border | Wörterbuch | Festlegen der Rahmenart |
border.border | Wörterbuch | Denselben Style für alle Rahmen festlegen |
border.border.type | Zeichenfolge | "Durchgezogen", "Gestrichelt", "Gepunktet" oder "Doppelt" |
border.border.color | Zeichenfolge | Rahmenfarbe |
border.border.width | Zahl | Rahmenbreite |
border.borderLeft | Wörterbuch | Style für den linken Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderRight | Wörterbuch | Style für den rechten Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderTop | Wörterbuch | Style für den oberen Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
border.borderBottom | Wörterbuch | Style für den unteren Rahmen festlegen. Das Wörterbuchformat ist identisch mit "border.border". |
borderRadius | Wörterbuch | Festlegen des Rahmenradius |
borderRadius.unit | Zeichenfolge | "Px", "REM", "EM", "VW" oder "%" |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Mit dem folgenden Beispielskript werden Listenelemente mit hoher Prioritätsstufe mit einer anderen Hintergrundfarbe versehen:
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Empfehlungen und Verwendungshinweise für Arcade
Im Folgenden finden Sie eine Liste mit Empfehlungen und Hinweisen zur Verwendung von Arcade-Skripten zum Generieren von dynamischem Inhalt und dynamischem Style:
- Arcade-Skripte in Experience Builder unterstützen nur die Layer-Typen FeatureLayer, OrientedImageryLayer, SubtypeGroupLayer und SubtypeSublayer.
- Filter und räumliche Filter, die auf Datenquellen oder Datenansichten angewendet werden, können Profildatenquellen nicht automatisch hinzugefügt werden. Verwenden Sie die Funktion getFilteredFeatureSet, um den Filter manuell zu synchronisieren.
- Für das Widget-Formatierungsprofil verwendet das Arcade-Skript die aktuellen Daten zum Testen des Skripts, wenn Sie es ausführen oder anwenden. Wenn Sie z. B. selectedFeatures verwenden und keine Auswahl vorhanden ist, zeigt das Skript die Meldung Ungültiges Arcade-Skript an, es sei denn, Sie haben dies entsprechend bearbeitet.
- Für das Listenelement-Widget-Formatierungsprofil verwendet das Arcade-Skript das erste Listenelement zum Testen des Skripts, wenn Sie es ausführen oder anwenden.
- Jede App-Seite unterstützt maximal 10 Arcade-Ausdrücke mit dem Widget-Formatierungsprofil, einschließlich des vom Arcade-Skript festgelegten dynamischen Inhalts und dynamischen Styles.
- Wenn Sie an mehreren Stellen einen Aggregationswert verwenden, können Sie diesen mit der Option Arcade im Fenster Daten hinzufügen einmal hinzufügen und an anderen Stellen verwenden.
- Im Widget-Formatierungsprofil verwendete Felder werden der Liste der verwendeten Felder nicht automatisch hinzugefügt. Wenn diese Felder nicht an anderer Stelle referenziert werden, kann das Arcade-Skript falsch ausgeführt werden und zu einer falschen Ausgabe führen.