Ajouter une boîte de dialogue non modale à une Générateur d'IU page

Découvrez comment ajouter une boîte de dialogue non modale dans Générateur d'IU. Une boîte de dialogue non modale est une fenêtre flottante contenant du contenu au-dessus d’une page.

Avant de commencer

Rôle requis : ui_builder_admin

Les étapes suivantes vous guident tout au long du processus de configuration d’un bouton pour ouvrir une boîte de dialogue non modale contenant le composant Pièces jointes.

Remarque :

La procédure décrite ici n’est qu’un exemple de l’utilisation des boîtes de dialogue non modales. Les possibilités sont infinies. Ajoutez et configurez des boîtes de dialogue non modales pour répondre à vos besoins professionnels.

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 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. Dans l’arborescence de contenu, déplacez votre souris sur Boîtes de dialogue non modales, sélectionnez l’icône +, puis sélectionnez le composant de boîte de dialogue non modale .
   
5. Si la boîte de dialogue non modale n’apparaît pas automatiquement sur l’étape, sélectionnez la nouvelle boîte de dialogue non modale nommée Boîte de dialogue non modale par défaut dans l’arborescence de contenu.
6. Dans l’onglet Configurer du panneau de configuration, affichez les paramètres prédéfinis qui ont été ajoutés automatiquement avec la boîte de dialogue non modale, par exemple, la largeur, la hauteur, la position et activez le paramètre de glissement.
   

   Toutes ces propriétés prédéfinies peuvent être modifiées, si nécessaire.

   Remarque :

   Pour en savoir plus sur les propriétés avancées des boîtes de dialogue non modales, consultez le site ServiceNow Developer.
7. Dans le tiroir des ressources de données, le contrôleur de boîte de dialogue non modale a été ajouté automatiquement.
   
8. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Valeur par défaut de la boîte de dialogue non modale > actions pour ajouter du contenu à l’en-tête de boîte de dialogue non modale.
9. Recherchez et sélectionnez le composant Texte stylisé .
10. Dans le panneau de configuration de texte stylisé , sélectionnez Aucun pour configurer le composant manuellement.
    

    Si le paramètre prédéfini de sous en-tête d’enregistrement a été automatiquement ajouté, sélectionnez la flèche déroulante, sélectionnez Aucun, puis sélectionnez Supprimer dans l’onglet Configurer .

    
11. Si ce n’est pas déjà fait, sélectionnez Configurer pour ouvrir l’onglet de configuration.
12. Dans Texte, supprimez l’exemple de texte et saisissez Ajouter des pièces jointes.
    
13. Sélectionnez Enregistrer dans l’en-tête du générateur d’IU.
14. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu dans le conteneur de > de contenu de la boîte de dialogue non modale par défaut > pour ajouter du contenu au corps de la boîte de dialogue non modale.
15. Sélectionnez le composant Pièces jointes .
16. Dans le panneau de configuration des pièces jointes , si ce n’est pas déjà fait, sélectionnez Enregistrer les pièces jointes et Appliquer pour configurer le composant avec un paramètre prédéfini.
    

    Pour en savoir plus sur la configuration du composant Pièces jointes, consultez le site ServiceNow Developer.

17. Vous pouvez ajouter du contenu au pied de page de la boîte de dialogue non modale, mais dans cet exemple, laissez le pied de page vide.
18. Sélectionnez Enregistrer.
    Notez dans l’arborescence de contenu que la boîte de dialogue non modale et tous ses composants sont répertoriés au-dessus du corps de votre structure de page. En outre, le composant de liste déroulante Boîtes de dialogue réduites est ajouté automatiquement à la page (et est répertorié sous le corps dans l’arborescence de contenu) pour fournir la fonctionnalité de l’icône de réduction dans l’en-tête de boîte de dialogue non modale.

    

19. Dans l’arborescence de contenu, sélectionnez Corps.
20. Ajoutez un composant de bouton et configurez-le pour ouvrir la boîte de dialogue non modale.
    1. Dans l’arborescence de contenu, sélectionnez l’icône Menu en regard de Corps et sélectionnez Ajouter du contenu.
    2. Dans l’onglet Mises en page , sélectionnez Colonne unique.
       Une nouvelle mise en page en colonne contenant une seule colonne est ajoutée au bas de la page.
    3. Sur l’étape, sélectionnez l’icône + dans la nouvelle disposition en colonne.
       
    4. Recherchez et sélectionnez le composant Bouton nu .
       
    5. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun pour configurer le composant manuellement.
    6. Sélectionnez l’onglet Événements dans le panneau de configuration.
    7. Sélectionnez + Ajouter un gestionnaire d’événements.
       
    8. Dans la liste de gauche, sélectionnez Ouvrir la boîte de dialogue sans modèle (vous devrez peut-être faire défiler la liste vers le bas).
    9. Saisissez les pièces jointes dans l’intituléréduit.
    10. Sélectionnez la boîte de dialogue non modale par défaut dans la boîte de dialogue non modale.
        Il existe d’autres options qui peuvent être configurées ici, notamment un en-tête et une catégorie.
    11. Sélectionnez Ajouter.
        
    12. Sélectionnez l’onglet Configurer .
    13. Tapez Ajouter des pièces jointes dans l’étiquette.
        
21. Sélectionnez Enregistrer.
22. Sélectionnez la flèche déroulante en regard de Aperçu dans l’en-têteGénérateur d'IU, puis sélectionnez Ouvrir le chemin de l’URL dans la liste.
23. Sélectionnez le bouton Ajouter des pièces jointes pour tester la boîte de dialogue non modale.
    La boîte de dialogue non modale s’ouvre au-dessus de la page principale avec l’en-tête en haut et le composant Pièces jointes en dessous.
24. Pour tester la fonctionnalité de réduction, sélectionnez l’icône de réduction dans la boîte de dialogue non modale.
    
    La boîte de dialogue non modale est réduite et est accessible à partir de la liste déroulante Boîtes de dialogue réduites.
25. Sélectionnez l’icône des boîtes de dialogue réduites, puis sélectionnez Pièces jointes pour ouvrir à nouveau la fenêtre de boîte de dialogue non modale.