Ajouter et connecter des widgets

Ajoutez des widgets fonctionnels et de mise en page aux applications que vous créez avec Experience Builder Vous pouvez accepter les styles par défaut ou personnaliser l’apparence et connecter les widgets à des données, des liens et d’autres widgets, pour une expérience Web unique.

Insérer des widgets

Les widgets représentent les blocs de construction de vos applications. Si vous n’utilisez pas les widgets des différents modèles disponibles pour les pages, les fenêtres, les groupes d’écrans et les blocs, vous pouvez ajouter des widgets à partir du volet Insert widget (Insérer un widget) par glisser-déposer. Les widgets Widget Controller (Contrôleur de widgets) et Placeholder (Espace réservé), ainsi que les panneaux déroulants d’un groupe d’écrans, comportent également un bouton Add widget (Ajouter un widget). Les widgets peuvent s’exécuter comme outils d’application ou agir comme conteneurs pour organiser la page et sont regroupés en six catégories :

• Les widgets cartographiques sont des outils d’application qui se connectent à un widget cartographique.
• Les widgets centrés sur les données sont des outils d’application qui interagissent avec les sources de données.
• Les widgets d’élément de page sont destinés à ajouter des images, du texte et d’autres supports.
• Les widgets de menu et de barre d’outils offrent des options pour aider les utilisateurs à utiliser et à partager votre application.
• Les widgets de mise en page représentent les conteneurs qui permettent d’organiser les widgets sur la page.
• Les widgets de section présentent un contenu dynamique dans plusieurs vues et permettent aux utilisateurs de basculer d’une vue à l’autre.

Lorsque vous ajoutez et imbriquez des widgets, reportez-vous au contour interactif de chaque page, qui montre la hiérarchie des widgets de la page et vous aide à organiser, sélectionner et configurer les widgets imbriqués. Lorsque vous survolez un widget dans le contour, le widget correspondant est mis en évidence dans la zone d’affichage. Dans la vue de contour, cliquez sur un widget puis sur le bouton More (Plus) pour afficher un menu d’opérations sur les widgets (renommer, dupliquer, supprimer, verrouiller la position et la taille, épingler, disposer et aligner). Pour les widgets qui contiennent d’autres widgets, cliquez sur Expand all (Tout développer) ou Collapse all (Tout réduire) pour afficher ou masquer la hiérarchie sous-jacente.

Utilisez les raccourcis clavier de copier et coller standards (Ctrl+C et Ctrl+V sous Windows ; Cmd-C et Cmd-V sur Mac) pour copier les widgets sur les pages. Le duplicata ou la copie d’un widget conserve tous ses paramètres, à l’exception de sa position sur la page et l’étiquette. Les étiquettes des nouveaux widgets suivent une règle de numérotation continue. Par exemple, dupliquer l’Image 1 génère l’Image 2 ou l’Image 3 si l’Image 2 existe déjà. Faire glisser des widgets dans la zone d’affichage pour les déplacer et les redimensionner permet d’afficher des lignes de capture ou des valeurs de distance qui vous aide à aligner et positionner avec précision les widgets dans une mise en page fixe. Lorsque les lignes de capture apparaissent, les widgets correspondants sont capturés ensemble quelle que soit la résolution de l’écran.

L’onglet Pending (Attente) du volet Insert widget (Insérer un widget) s’avère utile si vous devez concevoir votre application pour plusieurs tailles d’écran. Par exemple, une exigence de conception peut nécessiter l’implémentation du widget Map (Carte) sur des tailles d’écran moyennes et grandes, mais pas sur de petites tailles. Dans ce cas, vous pouvez retirer le widget Carte de la conception des petites tailles d’écran et l’ajouter à la liste en attente.

Connecter des widgets

Le panneau de configuration des widgets inclut les paramètres Content (Contenu), Style (Style) et Action (Opération). L’onglet Content (Contenu) définit le comportement, les connexions aux données et d’autres paramètres du widget. Les widgets sont alignés et stylisés dans l’onglet Style, selon des paramètres tels que la taille, la position, l’animation, l’arrière-plan, la bordure et l’ombre de contour. La localisation des panneaux de widget est mémorisée dans l’application en temps réel. Vous pouvez également utiliser les barres d’outils de widget pour aligner, supprimer ou dupliquer des widgets.

Certains widgets prennent en charge l’ajout d’actions qui permettent aux widgets de communiquer entre eux. Par exemple, une action dans un widget déclenche une action dans un autre widget, comme cliquer sur une entité cartographique pour mettre à jour les détails de l’entité indiqués dans un widget Informations d’entité. Vous pouvez ajouter des actions Messagepour une interaction automatique ou des actions Données pour que les utilisateurs finaux y accèdent au moment de l’exécution à partir d’un menu Actions. Combinez des outils et des widgets et connectez-les pour une plus grande interactivité. Aidez les utilisateurs à naviguer dans votre application en définissant des liens vers d’autres contenus, par exemple des pages, des fenêtres et des vues de section.

Définir des liens

Vous pouvez ajouter un hyperlien à votre contenu à l’aide de l’option Set link (Définir un lien), qui permet de renvoyer les utilisateurs vers une autre page, fenêtre ou vue de section de votre application, vers un aperçu avant impression ou vers une autre adresse Web. Dans les pages avec défilement, vous pouvez définir des liens sur les widgets de façon à accéder directement à un bloc déterminé de la page ou à revenir en haut de la page. Les widgets suivants prennent en charge la définition d’un lien :

• Widget Button (Bouton)
• Widget Fiche
• Widget Image (Image)
• Widget Text (Texte)

Paramètres

Lorsque vous définissez un lien, vous pouvez choisir une option parmi les suivantes :

• Page : lien renvoyant vers une autre page de votre application.
• View (Vue) : lien renvoyant vers une vue spécifique d’un widget Section.
• Window (Fenêtre) : lien ouvrant une fenêtre spécifique de votre application.
• URL* : lien renvoyant vers une adresse Web (saisissez une URL qui commence par https://).
• Block (Bloc) : lien qui permet d’accéder à un bloc spécifique sur la même page de défilement dans votre application. (Non disponible pour le widget Texte.)
• Page top (Haut de page) : lien qui permet d’accéder en haut de la page. (Non disponible pour le widget Texte.)
• Print preview (Aperçu avant impression) : lien renvoyant vers un aperçu avant impression.
• Cookie Banner (Bannière sur les cookies) : lien renvoyant vers la bannière sur les cookies.

*Vous pouvez également utiliser l’option URL pour renvoyer à une adresse e-mail, un numéro de téléphone, etc. (Par exemple, saisissez mailto:[e-mail]). Actuellement, Set link (Définir un lien) prend en charge les structures URI suivantes :

Structure	Objet	Remarques sur l’utilisation	Format	Exemples
https	Adresses Web		https://xxx	https://www.esri.com
mailto	Adresses e-mail	Les en-têtes sont facultatifs, mais comprennent fréquemment subject=. Pré-renseignez le corps du message avec body=.	mailto:<address> mailto:<address>[?<header1>=<value1>[&<header2>=<value2>]]	mailto:[e-mail] mailto:[e-mail]?subject=A%20Test&body=My%20idea%20is%3A%20%0A
tel	Numéros de téléphone		tel:<phonenumber>	tel:[phone]
sms	SMS	Il existe de légères différences de mise en forme avec la structure sms entre les appareils Android et iOS.	Android— sms:<phone number>[?actions] iOS—sms://<phone number>[&actions]	sms:[phone]?body=hello%20there sms:[phone],[phone]?body=hello%20there sms://[phone]&body=111222Hello%20There%20Hi!
FTP	Ressources FTP	Utilisez la syntaxe générique des ressources FTP.	ftp://xxx	ftp://user/example.com

Vous pouvez également choisir l’endroit où le contenu lié doit s’ouvrir :

• App window (Fenêtre d’application) : le contenu lié s’ouvre dans la fenêtre de navigateur actuelle que votre application utilise.
• Top window (Fenêtre supérieure) : le contenu lié quitte les cadres dans lesquels il est imbriqué et s’ouvre par dessus les autres fenêtres ouvertes.
• New window (Nouvelle fenêtre) : le contenu lié s’ouvre dans une nouvelle fenêtre de navigateur, en laissant l’application ouverte dans une autre fenêtre.