Ajouter un modal au composant

Découvrez comment ajouter un modal dans Générateur d'IU. Un modal est une fenêtre qui s’affiche lorsque vous cliquez sur un composant. Par exemple, un modal peut s’afficher lorsque l’utilisateur clique sur un composant de bouton Supprimer, invitant l’utilisateur à confirmer la suppression d’un enregistrement.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Un modal est un écran qui apparaît lorsqu’un gestionnaire d’événements est déclenché par un événement tel qu’un clic sur un bouton. La procédure suivante montre un exemple de la façon d’ajouter une fenêtre modale Confirmer et un gestionnaire d’événements associé à un composant de bouton.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
3. Ouvrez ou créez une page ou une variante de page.
   Pour plus d’informations sur la création d’une page dans Générateur d'IU, consultez Créer une page dans le générateur d’IU.
4. Ajoutez un modal à la page.
   1. Sélectionnez l’icône + dans l’arborescence de contenu en regard de Fenêtres modales et popovers.
      
   2. Choisissez un type de modal tel que Confirmer.
      

      Type de modal	Description
      Alerte	Une fenêtre modale d’alerte fournit des informations relatives à l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, vous pouvez avoir une fenêtre contextuelle d’alerte qui indique à l’utilisateur qu’il ne peut pas annuler une action de suppression.
      Confirmer	Une fenêtre modale de confirmation demande à un utilisateur de confirmer l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, il doit confirmer la suppression des données. Vous pouvez choisir les options de confirmation dans les champs d’étiquette de bouton primaire et secondaire, tels que Oui/Annuler.
      Confirmer et détruire	Un modal Confirmer et détruire est plus directif, généralement lié à la suppression ou à l’effacement de contenu. Il permet à l’utilisateur de connaître le sérieux d’une action et lui demande s’il souhaite poursuivre l’action.
      Personnalisé	La fenêtre modale Personnalisé utilise des mises en page pour vous permettre de concevoir entièrement les informations que vous souhaitez afficher dans la fenêtre modale. Les mises en page décident également où se trouvent les informations dans l’écran modal. Vous pouvez utiliser le style CSS (Cascading Style Sheets) pour modifier l’aspect visuel du modal, comme la couleur d’arrière-plan.
      iframe	Utilisez iframe pour importer du contenu dans votre fenêtre modale à l’aide du contenu iframe existant à partir d’une URL et de données.
      Fenêtre modale	Transmettez dynamiquement du contenu dans votre fenêtre modale Viewport via une liaison d’événements à l’aide d’un script client. Voir Lier un événement à un composant pour plus d’informations sur la liaison d’un événement à un composant.

   3. Configurez les modaux comme indiqué dans la table.

      Configurez chaque modal différemment, en fonction des besoins du modal. Modifiez les informations qui sont entrées dans le modal, sa taille et son apparence. Vous pouvez ajouter au modal un gestionnaire d’événements qui effectue l’action pour le modal, comme l’ouverture ou la fermeture du modal.

      Modal	Configuration
      Alerte	Ajoutez un en-tête, qui est le titre du modal. Écrivez le contenu que vous souhaitez afficher dans le modal. Le contenu indique à l’utilisateur la nature de l’alerte. Ajoutez du texte pour l’étiquette du bouton. Il peut s’agir de tout ce que vous voulez, tel que OK,Oui, etc. Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez Empêcher l’action de bouton par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut ou non. Activer ou désactiver Différer le chargement du contenu de la fenêtre modale. Si vous le désactivez, le modal se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lorsque la page se charge. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal, puis sélectionnez Ajouter pour l’ajouter à la page. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation.
      Confirmer	Ajoutez un en-tête, qui est le titre du modal. Écrivez le contenu que vous souhaitez afficher dans le modal. Le contenu indique à l’utilisateur la nature de l’alerte. Ajoutez du texte pour le bouton primaire. Le bouton primaire est le bouton d’action principal pour les utilisateurs, tel que Oui, Ajouter, etc. Ajoutez du texte pour le bouton secondaire. Le bouton secondaire est généralement le choix interdit pour les utilisateurs, tel que Annuler, Non, etc. Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez Empêcher l’action de bouton primaire par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut ou non. Activez ou désactivez Empêcher l’action de bouton secondaire par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut. Activer ou désactiver Différer le chargement du contenu de la fenêtre modale. Si vous le désactivez, le modal se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lorsque la page se charge. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation.
      Confirmer ou détruire	Ajoutez un en-tête, qui est le titre du modal. Écrivez le contenu que vous souhaitez afficher dans le modal. Le contenu indique à l’utilisateur la nature de l’alerte. Ajoutez du texte pour le bouton primaire. Primaire est le bouton d’action principal pour les utilisateurs, tel que Supprimer ou Effacer. Ajoutez du texte pour le bouton secondaire. Le bouton secondaire est généralement le choix interdit pour les utilisateurs, tel que Annuler, Non, etc. Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez Empêcher l’action de bouton primaire par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut ou non. Activez ou désactivez Empêcher l’action de bouton secondaire par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut. Activer ou désactiver Différer le chargement du contenu de la fenêtre modale. Si vous le désactivez, le modal se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lorsque la page se charge. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation.
      Personnalisé	Choisissez une mise en page pour votre fenêtre modale. Vous pouvez utiliser une mise en page de grille flexbox ou CSS. Ces mises en page vous permettent d’ajouter du contenu dans votre modal comme vous le souhaitez. Utilisez les options de style pour modifier l’apparence de votre fenêtre modale. Vous pouvez appliquer n’importe quel style CSS standard à votre modal, tel que la couleur d’arrière-plan et le remplissage. Pour plus d’informations sur le style, reportez-vous à la section Modifier l’apparence par défaut des composants. Ajoutez des composants aux conteneurs dans la fenêtre modale personnalisée. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation.
      iframe	Ajoutez un en-tête, qui est le titre du modal. Ajoutez une URL source qui pointe vers votre contenu iframe existant. Définissez les paramètres et les données initiales que vous souhaitez iframe. Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez Désactiver le bac à sable pour lever les restrictions suivantes : options allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts, allow-downloads. Désactivez le bac à sable pour lever uniquement l’option allow-scripts. Activer ou désactiver Différer le chargement du contenu de la fenêtre modale. Si vous le désactivez, le modal se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lorsque la page se charge. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation.
      Fenêtre modale	Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activer ou désactiver Masquer le remplissage. Activer ou désactiver le bouton Masquer la fermeture. Si vous l’activez, le bouton Fermer ne s’affiche pas dans le modal. Activer ou désactiver Différer le chargement du contenu de la fenêtre modale. Si vous le désactivez, le modal se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lorsque la page se charge. Sélectionner Événements > Ajouter un mappage d'événements pour ajouter un gestionnaire d’événements au modal. Sélectionnez un gestionnaire d’événements à appliquer au modal. Choisissez parmi des gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements effectuent une action telle que l’ouverture ou la fermeture d’un modal. Selon le type de modal, vous pouvez actualiser les données pour la source de données de l’interpréteur de commandes d’application, la session utilisateur pour GraphQL ou une session utilisateur pour la transformation. Sélectionnez le composant de fenêtre d’affichage dans la fenêtre modale. Sélectionnez + Ajouter dans l’onglet Configurer pour ajouter une collection de pages à la fenêtre d’affichage. Sélectionnez une collection de pages dans la liste et cliquez sur Ajouter.

5. Ajoutez un composant à votre page pour déclencher le modal que vous venez d’ajouter, tel qu’un composant de bouton.
   Consultez Ajouter et configurer des composants pour plus d'informations.
6. Sélectionnez l’onglet Événements dans le panneau de configuration.
7. Sélectionnez + Ajouter un gestionnaire d’événements.
   
8. Sélectionnez Ouvrir ou fermer la boîte de dialogue modale.
9. Sélectionnez le modal que vous avez créé lors des étapes précédentes à l’aide de la liste déroulante Modal .
10. Cliquez sur Ajouter.
    
11. Lorsque vous avez terminé de configurer le modal, fermez-le.

    Notez dans l’arborescence de contenu que les modaux que vous créez se trouvent au-dessus du corps de la structure de votre page.

    
12. Cliquez sur Enregistrer.