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). Utilisez les raccourcis clavier de copier et coller standard (Ctrl+C et Ctrl+V sous Windows ; Cmde-C et Cmde-V sous 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
You can add a hyperlink to your content by using the Set link option, which allows you to direct users to another page, window, or section view in your app, to a print preview, or to another web address. 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 :
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.)
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.
Vous avez un commentaire à formuler concernant cette rubrique ?