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, un modal peut s’afficher lorsqu’un composant de bouton de suppression est cliqué, 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 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’un modal 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 dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
3. Ouvrez ou créez une variante de page.
   Pour plus d’informations sur la création d’une page dans , consultez Créer une page dansGénérateur d'IU UI Builder.
4. Ajoutez 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	Un modal d’alerte fournit des informations relatives à l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, une alerte contextuelle peut s’afficher pour informer l’utilisateur qu’il ne peut pas annuler une action de suppression.
      Confirmer	Un modal 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 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 relatif à la suppression ou à l’effacement de contenu. Elle 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éterminent également la position 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, tel que la couleur d’arrière-plan.
      Iframe	Utilisez iframe pour apporter du contenu dans votre modal à l’aide du contenu iframe existant à partir d’une URL et de données.
      Fenêtre d’affichage modale	Transmettez dynamiquement le contenu dans votre fenêtre modale Viewport via une liaison d’événement à l’aide d’un script client. Consultez Lier un événement à un composant pour plus d’informations sur la liaison d’un événement à un composant.

   3. Configurez les fenêtres modales comme indiqué dans la table.

      Configurez chaque fenêtre modale différemment, en fonction des besoins du modal. Modifiez les informations placées 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 de bouton. Cela peut être tout ce que vous voulez, comme OK, Oui, et ainsi de suite. Choisissez la taille de la fenêtre modale à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez l’action du bouton Empêcher par défaut, selon que vous souhaitez que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez Différer le chargement du contenu modal. 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 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’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 des utilisateurs, par exemple Oui, Ajouter, etc. Ajoutez du texte pour le bouton secondaire. Le bouton secondaire n’est généralement pas le choix des utilisateurs, tel que Annuler, Non, etc. Choisissez la taille de la fenêtre modale à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez l’action du bouton primaire Empêcher par défaut, selon que vous souhaitez 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 que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez Différer le chargement du contenu modal. 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 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’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 des utilisateurs, tel que Supprimer ou Effacer. Ajoutez du texte pour le bouton secondaire. Le bouton secondaire n’est généralement pas le choix des utilisateurs, tel que Annuler, Non, etc. Choisissez la taille de la fenêtre modale à l’écran. Sélectionnez Petit, Moyen, Grand ou Plein écran. Activez ou désactivez l’action du bouton primaire Empêcher par défaut, selon que vous souhaitez 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 que le modal se ferme en fonction de l’action par défaut. Activez ou désactivez Différer le chargement du contenu modal. 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 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’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 à votre fenêtre modale comme vous le souhaitez. Utilisez des 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 en savoir plus sur l’application d’un style, reportez-vous à Modifier 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’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 de la fenêtre modale à 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 uniquement lever l’option allow-scripts. Activez ou désactivez Différer le chargement du contenu modal. 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 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’une session utilisateur pour la transformation.
      Fenêtre d’affichage modale	Choisissez la taille de la fenêtre modale à 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 de fermeture ne s’affiche pas dans le modal. Activez ou désactivez Différer le chargement du contenu modal. 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 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 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 de la source de données de l’interpréteur de commandes d’application, de la session utilisateur pour GraphQL ou d’une session utilisateur pour la transformation. Sélectionnez le composant Viewport dans le modal Viewport. 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, puis 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éé aux é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 fenêtres modales que vous créez se trouvent au-dessus du corps de votre structure de page.

    
12. Cliquez sur Enregistrer.