Ajouter un modal au composant

Découvrez comment ajouter une fenêtre modale dans Générateur d'IU. Un modal est une fenêtre qui s’affiche lorsque vous cliquez sur un composant. Par exemple, une fenêtre modale peut s’afficher lors d’un clic sur un composant du bouton Supprimer pour demander à l’utilisateur de 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 s’affiche 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 d’ajout d’une fenêtre modale Confirmer et d’un gestionnaire d’événements associés à 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 dans laquelle 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, voir Créer une page dans le générateur d’IU.
4. Ajoutez une fenêtre modale à la page.
   1. Sélectionnez l’icône + dans l’arborescence de contenu en regard de Modaux et popovers.
      
   2. Choisissez un type de modal tel que Confirmer.
      

      Type de modal	Description
      Alerte	Un modal d’alerte fournit des informations relatives à l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, une fenêtre contextuelle d’alerte peut s’afficher pour l’informer qu’il ne peut pas annuler une action de suppression.
      Confirmer	Une fenêtre modale de confirmation demande à l’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 à partir des champs d’étiquette du bouton primaire et secondaire, tels que Oui/Annuler.
      Confirmer et détruire	Un modal de confirmation et de destruction est plus directif, généralement relatif à la suppression ou à l’effacement du contenu. Il permet à l’utilisateur de connaître le sérieux d’une action et lui demande s’il souhaite poursuivre l’action.
      Personnalisé	Le modal personnalisé utilise des mises en page pour vous permettre de concevoir entièrement les informations que vous voulez dans le modal. Les mises en page décident également de l’emplacement des informations dans l’écran modal. Vous pouvez utiliser le style de feuilles de style en cascade (CSS) pour modifier l’aspect visuel du modal, comme la couleur d’arrière-plan.
      iframe (en anglais)	Utilisez iframe pour apporter du contenu dans votre modal en utilisant 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. Pour plus d’informations sur la liaison d’un événement à un composant, consultez Lier un événement à un composant

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

      Configurez chaque fenêtre modale différemment, en fonction des besoins de la fenêtre modale. Modifiez les informations saisies dans le modal, sa taille et son apparence. Vous pouvez ajouter un gestionnaire d’événements au modal qui effectue l’action pour le modal, telle que l’ouverture ou la fermeture du modal.

      Modal	Configuration
      Alerte	Ajoutez un en-tête, qui est le titre du modal. Rédigez 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. Cela peut être tout ce que vous voulez, comme OK, Oui, et ainsi de suite. Choisissez la taille du modal à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activer ou désactiver Empêcher l’action de bouton par défaut, selon que vous souhaitez ou non que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez le chargement du contenu de la fenêtre modale Différer. Si vous la désactivez, la fenêtre modale se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lors du chargement de la page. 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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. Rédigez 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 non disponible 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 l’option Empêcher l’action du bouton primaire par défaut, selon que vous souhaitez ou non que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez l’option Empêcher l’action du bouton secondaire par défaut, selon que vous souhaitez ou non que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez le chargement du contenu de la fenêtre modale Différer. Si vous la désactivez, la fenêtre modale se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lors du chargement de la page. 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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. Rédigez 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 non disponible 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 l’option Empêcher l’action du bouton primaire par défaut, selon que vous souhaitez ou non que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez l’option Empêcher l’action du bouton secondaire par défaut, selon que vous souhaitez ou non que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez le chargement du contenu de la fenêtre modale Différer. Si vous la désactivez, la fenêtre modale se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lors du chargement de la page. 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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 fenêtre modale 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, comme la couleur d’arrière-plan et le remplissage. Pour en savoir plus sur la gestion d’un 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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 (en anglais)	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 l’option Désactiver le bac à sable pour lever les restrictions suivantes : options allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts et allow-downloads. Désactivez la désactivation du bac à sable pour lever uniquement l’option allow-scripts. Activez ou désactivez le chargement du contenu de la fenêtre modale Différer. Si vous la désactivez, la fenêtre modale se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lors du chargement de la page. 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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. Activez ou désactivez le bouton Masquer Fermer. Si vous l’activez, le bouton Fermer ne s’affiche pas dans le modal. Activez ou désactivez le chargement du contenu de la fenêtre modale Différer. Si vous la désactivez, la fenêtre modale se charge avec la page. Si vous l’activez, la fenêtre modale ne se charge pas lors du chargement de la page. 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 les gestionnaires d’événements hérités ou au niveau de la page. Les gestionnaires d’événements exécutent 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 Viewport 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. Une fois que 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.