Dans Experience Builder, vous pouvez utiliser des attributs de données, statistiques et expressions simples pour afficher un contenu dynamique de base. Vous pouvez également appliquer des styles statiques et en fonction de l’état dans les paramètres du widget.
Il existe deux types de mises en forme avancées ; contenu dynamique avancé et style dynamique.
- Le contenu dynamique avancé implique l’exécution de calculs avec les données et le renvoi de valeurs dynamiques à afficher en tant que contenu du widget. Vous pouvez utiliser des expressions Arcade pour créer un contenu dynamique avancé.
- Le style dynamique implique la mise à jour des arrière-plans, bordures et autres éléments visuels des widgets en fonction des données. Vous pouvez utiliser à la fois des expressions Arcade et le style conditionnel, une fonction sans code, pour créer un style dynamique.
Arcade
Arcade est un langage d’expression léger et sécurisé permettant de manipuler des données et de créer un contenu personnalisé dans des applications Experience Builder. Vous pouvez utiliser Arcade pour créer un contenu dynamique et un style dynamique.
Profils de mise en forme
Un profil de mise en forme définit l’environnement et les règles d’évaluation et d’interprétation des expressions.
Experience Builder dispose de deux types de profils de mise en forme :
Le profil de mise en forme des widgets personnalise le contenu et le style de widgets individuels. Il utilise la variable de profil $dataSource pour référencer les données au niveau de la source de données.
Le profil de mise en forme des widgets List item (Élément de liste) personnalise le contenu et le style d’éléments de liste individuels dans un widget List (Liste) et les widgets, notamment les widgets Text (Texte), Button (Bouton) et Image, dans un élément de liste. Il utilise la variable de profil $feature pour référencer les données au niveau de l’entité.
Remarque :
Experience Builder inclut également le profil de données, qui crée un FeatureSet comme source de données. Vous pouvez utiliser le profil de données pour ajouter des données à Arcade.
Quels que soient les cas dans Experience Builder, vous saisissez les scripts dans un éditeur Arcade. Cet éditeur permet d’accéder aux variables, fonctions et aperçus de données en direct pris en charge qui vous aident à tester les scripts.
L’éditeur Arcade apparaît dans différentes parties de l’interface du générateur, selon que vous utilisiez Arcade pour créer un contenu dynamique, créer un style dynamique ou ajouter des données.
Contenu dynamique avancé avec Arcade
Un contenu dynamique est un contenu qui change en fonction des données ou des interactions des utilisateurs. Arcade permet de calculer des valeurs dynamiques et de les renvoyer pour les afficher en tant que contenu du widget. Au lieu de lier directement un contenu à un champ ou une statistique, vous pouvez écrire des expressions qui calculent des valeurs en fonction d’une logique, de conditions et de fonctions.
La valeur renvoyée doit correspondre à l’un des types de champ suivants :
- Texte
- Nombre
- Date
- Date Only (Date uniquement)
- Time Only (Heure uniquement)
Experience Builder prend en charge l’utilisation du contenu dynamique via les méthodes suivantes :
- Création de contenu textuel, y compris le texte des boutons
- Définition de sources d’images
- Définition de liens par URL, à l’exclusion des liens dans les widgets Text (Texte)
Exemples de scripts Arcade
Les sous-sections ci-après incluent des scripts Arcade permettant de créer du contenu dynamique.
Afficher un message en fonction d’une condition
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");Afficher le nombre de jours depuis la dernière mise à jour d’un enregistrement
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";Afficher un nombre de valeurs uniques
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);Afficher un message après l’application d’un filtre
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."Raccourcir les étiquettes longues dans un widget de liste
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");Afficher différentes images d’un widget Image dans une liste en fonction de la catégorie
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";
}Styliser le contenu dynamique
Pour un contenu textuel, vous pouvez renvoyer un dictionnaire qui inclut à la fois une valeur et ses styles de texte. Voici un exemple de script :
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};Vous pouvez également renvoyer une valeur au format HTML pour créer un style plus avancé. Voici un exemple de script qui utilise le format 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>"Le tableau suivant répertorie les balises HTML prises en charge par Experience Builder dans les scripts Arcade :
| Balise | Attributs |
|---|---|
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 |
Style dynamique avec conditions ou Arcade
Le style dynamique vous permet d’adapter visuellement les widgets en fonction des données. Il permet notamment de modifier les visuels, tels que la taille du texte, la couleur d’arrière-plan et le style de bordure, en fonction des valeurs des champs, des statistiques ou de la logique calculée.
Le paramètre Dynamic style (Style dynamique) apparaît dans le volet des paramètres d’un widget lorsque vous connectez ce widget à des données.
Les widgets suivants prennent en charge le style dynamique :
- Widget Text (Texte) : le paramètre Dynamic style (Style dynamique) apparaît dans la partie inférieure du volet des paramètres.
- Widget Button (Bouton) : le paramètre Dynamic style (Style dynamique) apparaît sous Advanced (Avancé). Chaque état (Default (Par défaut) et Hover (Survol)) possède son propre paramètre.
- Widget List (Liste) : le paramètre Dynamic style (Style dynamique) apparaît sous chaque état (Default (Par défaut), Hover (Survol) et Selected (Sélectionnées)).
Remarque :
Avec le widget List (Liste), les styles dynamiques sont appliqués à des éléments de liste individuels et non à l’intégralité du widget.
Activez Dynamic style (Style dynamique) et cliquez sur le bouton des paramètres 
pour ouvrir le volet Dynamic style (Style dynamique). Ce volet comprend deux onglets : Condition et Script.
Condition
Le style conditionnel est une option sans code qui vous permet d’appliquer des styles en fonction de règles simples. Il ne requiert aucun script. Il s’agit de la méthode recommandée pour souligner visuellement les différences dans les données, telles que les indicateurs de statut, les catégories et les plages de valeurs.
L’onglet Condition inclut les paramètres suivants :
- Select an indicator for conditions (Sélectionner un indicateur pour les conditions) : sélectionnez une méthode de création d’instructions conditionnelles. Avec les widgets Text (Texte) et Button (Bouton), vous pouvez utiliser les attributs de données, les statistiques ou le contenu dynamique précédemment configuré. Avec le widget List (Liste), vous ne pouvez utiliser que des attributs de données.
Le tableau ci-après répertorie les types de champs attributaires que vous pouvez utiliser comme indicateurs et les opérateurs pris en charge.
Type de champ d’indicateur Opérateurs pris en charge Chaîne
is, is not, contains, is blank, is not blank
Nombre
is, is not, is greater than, is less than, is between
- Style conditions (Conditions de style) : une fois que vous avez défini un indicateur, vous pouvez cliquer sur Add style condition (Ajouter une condition de style) pour créer des conditions. Chaque condition se compose des éléments suivants :
- Operator (Opérateur) : choisissez un opérateur dans une liste d’opérateurs pris en charge par l’indicateur.
- Value (Valeur) : valeur cible à comparer par rapport à l’indicateur. Cliquez sur Select source type (Sélectionner un type de source) pour sélectionner une méthode de saisie, telle que saisie utilisateur, champ, unique et, pour les indicateurs numériques, statistiques.
- Style : style visuel, comme la couleur du texte, l’arrière-plan ou la bordure, appliqué si la condition est remplie.
Vous pouvez sélectionner une condition dans le volet des paramètres pour en afficher l’aperçu sur la zone d’affichage, même si les données actuelles ne remplissent pas la condition. Vous pouvez réorganiser, dupliquer et supprimer des conditions. Si les données actuelles satisfont plusieurs conditions, la première dans la liste des conditions est prioritaire. Si les données actuelles ne satisfont aucune condition, le widget utilise son style statique.
Script
Vous pouvez utiliser des scripts Arcade pour créer une logique de style complexe et flexible. Dans l’onglet Script, vous pouvez cliquer sur Arcade Editor (Éditeur Arcade) pour ouvrir la fenêtre de l’éditeur.
Experience Builder enregistre votre script en local et il reste disponible à la prochaine ouverture de l’éditeur. Pour exécuter un script, cliquez sur Apply (Appliquer). Le script appliqué apparaît alors dans la zone Script in use (Script utilisé).
Avec l’éditeur Arcade, au lieu de configurer des règles de style avec une interface sans code, vous écrivez un script qui renvoie un dictionnaire de propriétés de style et les valeurs correspondantes. Cela vous permet d’appliquer des styles en fonction d’une logique personnalisée, de calculs et de conditions qu’il n’est pas possible d’obtenir avec la fonctionnalité Style condition (Condition de style).
Experience Builder utilise les valeurs renvoyées pour afficher le style d’un widget. Si vous saisissez des clés de style qui ne se trouvent pas dans le dictionnaire, le widget utilise les paramètres de style par défaut pour ces propriétés.
Les tables ci-après répertorient les propriétés de style prises en charge pour chaque widget, ainsi que les types de valeurs attendus et leur signification.
Remarque :
Lorsque vous définissez des couleurs, assurez-vous que la valeur respecte les formats de couleur CSS, par exemple, les couleurs nommées ("red"), les codes hexadécimaux ("#ff0000") ou rgba().
Style du widget Text (Texte)
Le widget Text (Texte) prend en charge les propriétés de style suivantes :
| Propriété | Type | Description |
|---|---|---|
Texte | Dictionnaire | Permet de définir le style de texte |
text.size | Nombre | Taille de police en pixels |
text.color | Chaîne | Couleur de texte |
text.bold | Booléen | Indique si le style gras doit être utilisé |
text.italic | Booléen | Indique si le style italique doit être utilisé |
text.underline | Booléen | Indique si le style souligné doit être utilisé |
text.strike | Booléen | Indique si le style barré doit être utilisé |
arrière-plan | Dictionnaire | Permet de définir l’arrière-plan |
background.color | Chaîne | Couleur d’arrière-plan |
background.fillType | Chaîne | 'fit', 'fill', 'center', 'tile' ou 'stretch' |
background.image | Chaîne | URL de l’image |
L’exemple de style suivant permet de styliser un nom de ville dans le widget Text (Texte) avec différentes tailles de texte et couleurs d’arrière-plan en fonction de la population de la ville sélectionnée :
// 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
};Style du widget Button (Bouton)
Le widget Button (Bouton) prend en charge les propriétés de style suivantes :
| Propriété | Type | Description |
|---|---|---|
Texte | Dictionnaire | Permet de définir le style de texte |
text.size | Nombre | Taille de police en pixels |
text.color | Chaîne | Couleur de texte |
text.bold | Booléen | Indique si le style gras doit être utilisé |
text.italic | Booléen | Indique si le style italique doit être utilisé |
text.underline | Booléen | Indique si le style souligné doit être utilisé |
text.strike | Booléen | Indique si le style barré doit être utilisé |
icône | Dictionnaire | Permet de définir le style d’icône |
icon.name | Chaîne | Nom de l’icône |
icon.position | Chaîne | 'LEFT' ou 'RIGHT' |
icon.size | Nombre | Taille de l’icône en pixels |
icon.color | Chaîne | Vous pouvez définir la couleur de l’icône si cette dernière est au format SVG. |
arrière-plan | Dictionnaire | Permet de définir l’arrière-plan |
background.color | Chaîne | Couleur d’arrière-plan |
background.fillType | Chaîne | 'fit', 'fill', 'center', 'tile' ou 'stretch' |
background.image | Chaîne | URL de l’image |
border | Dictionnaire | Permet de définir le style de bordure |
border.border | Dictionnaire | Définir le même style pour toutes les bordures |
border.border.type | Chaîne | 'solid', 'dashed', 'dotted' ou 'double' |
border.border.color | Chaîne | Couleur de bordure |
border.border.width | Nombre | Largeur de bordure |
border.borderLeft | Dictionnaire | Définissez le style de bordure à gauche. Le format de dictionnaire est le même que border.border. |
border.borderRight | Dictionnaire | Définissez le style de bordure à droite. Le format de dictionnaire est le même que border.border. |
border.borderTop | Dictionnaire | Définissez le style de bordure en haut. Le format de dictionnaire est le même que border.border. |
border.borderBottom | Dictionnaire | Définissez le style de bordure en bas. Le format de dictionnaire est le même que border.border. |
borderRadius | Dictionnaire | Permet de définir le rayon de la bordure. |
borderRadius.unit | Chaîne | 'px', 'rem', 'em', 'vw' ou '%' |
borderRadius.number | Nombre[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Conseil :
Pour les icônes de bouton, vous pouvez choisir une icône dans le jeu d’icônes disponible ou télécharger vos propres symboles. Si vous téléchargez une icône, vous pouvez la référencer par son nom dans votre script Arcade.
L’exemple de script suivant permet de modifier l’icône du widget Button (Bouton) en fonction du statut de livraison d’une commande :
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};Style du widget List (Liste)
Le widget List (Liste) prend en charge les propriétés de style suivantes pour chaque élément de liste :
| Propriété | Type | Description |
|---|---|---|
arrière-plan | Dictionnaire | Permet de définir l’arrière-plan |
background.color | Chaîne | Couleur d’arrière-plan |
background.fillType | Chaîne | 'fit', 'fill', 'center', 'tile' ou 'stretch' |
background.image | Chaîne | URL de l’image |
border | Dictionnaire | Permet de définir le style de bordure |
border.border | Dictionnaire | Définir le même style pour toutes les bordures |
border.border.type | Chaîne | 'solid', 'dashed', 'dotted' ou 'double' |
border.border.color | Chaîne | Couleur de bordure |
border.border.width | Nombre | Largeur de bordure |
border.borderLeft | Dictionnaire | Définissez le style de bordure à gauche. Le format de dictionnaire est le même que border.border. |
border.borderRight | Dictionnaire | Définissez le style de bordure à droite. Le format de dictionnaire est le même que border.border. |
border.borderTop | Dictionnaire | Définissez le style de bordure en haut. Le format de dictionnaire est le même que border.border. |
border.borderBottom | Dictionnaire | Définissez le style de bordure en bas. Le format de dictionnaire est le même que border.border. |
borderRadius | Dictionnaire | Permet de définir le rayon de la bordure. |
borderRadius.unit | Chaîne | 'px', 'rem', 'em', 'vw' ou '%' |
borderRadius.number | Nombre[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
L’exemple de script suivant affecte une couleur d’arrière-plan différente aux éléments de liste dont le niveau de priorité est élevé :
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Meilleures pratiques et notes d’utilisation pour Arcade
La liste de notes et meilleures pratiques suivantes s’applique à l’utilisation de scripts Arcade pour générer un contenu dynamique et un style dynamique :
- Les scripts Arcade dans Experience Builder ne prennent en charge que les types de couches FeatureLayer, OrientedImageryLayer, SubtypeGroupLayer et SubtypeSublayer.
- Les filtres et filtres spatiaux appliqués aux sources de données et vues de données ne peuvent pas être ajoutés automatiquement à des sources de données de profil. Utilisez la fonction getFilteredFeatureSet pour synchroniser manuellement le filtre.
- Pour le profil de mise en forme des widgets, le script Arcade utilise les données actuelles pour tester le script lorsque vous l’exécutez ou l’appliquez. Par exemple, si vous utilisez selectedFeatures et qu’aucune entité n’a été sélectionnée, le script affiche le message Invalid Arcade Script (Script Arcade non valide) à moins que vous n’ayez traité le cas de l’absence de sélection.
- Pour le profil de mise en forme des widgets List item (Élément de liste), lorsque vous exécutez ou appliquez le script Arcade, il utilise le premier élément de liste pour tester le script.
- Chaque page d’application prend en charge jusqu’à 10 expressions Arcade à l’aide du profil de mise en page des widgets et notamment du contenu dynamique et du style dynamique définis par le script Arcade.
- Si vous utilisez une valeur d’agrégation dans plusieurs endroits, utilisez l’option Arcade de la fenêtre Add data (Ajouter des données) pour l’ajouter une fois pour toutes et l’utiliser ailleurs.
- Les champs utilisés dans le profil de mise en forme des widgets ne sont pas automatiquement ajoutés à la liste des champs utilisés. Si ces champs ne sont pas référencés ailleurs, le script Arcade peut être exécuté de manière incorrecte et générer une sortie incorrecte.
Vous avez un commentaire à formuler concernant cette rubrique ?