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 de suppression et invite 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 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é à un composant de bouton.

Procédure

1. Accédez à la Tous > 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 en savoir plus sur la création d’une page dans Générateur d'IU, consultez Créer une page dans Générateur d’IU.
4. Ajouter un modal à 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	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 Confirmer 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 du 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 la gravité 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 y ajouter. 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 entrent dans le modal, la taille du modal et son apparence. Vous pouvez ajouter au modal un gestionnaire d’événements 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. É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 l’option Empêcher l’action de bouton par défaut, selon que vous souhaitez que le modal se ferme ou non 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, le modal 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, comme ouvrir ou fermer 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 un 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 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 que le modal se ferme ou non 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 que le modal se ferme ou non 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, le modal 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, comme ouvrir ou fermer 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 un 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 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 que le modal se ferme ou non 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 que le modal se ferme ou non 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, le modal 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, comme ouvrir ou fermer 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 changer 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 Changer l’apparence par défaut des composants. Ajoutez des composants aux conteneurs dans le modal personnalisé. 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, comme ouvrir ou fermer 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 mettre en 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 et 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, le modal 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, comme ouvrir ou fermer 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. Activez ou désactivez 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. 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, le modal 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, comme ouvrir ou fermer 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 le Viewport modal. 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 votre structure de page.

    
12. Cliquez sur Enregistrer.