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

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 4 minutes de lecture

    • 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 la façon d’utiliser les boîtes de dialogue non modales. Les possibilités sont infinies. Ajoutez et configurez des boîtes de dialogue non modales pour répondre aux besoins de votre entreprise.

    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 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. 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 .
      Option de boîtes de dialogue non modales affichée dans l’arborescence de contenu avec l’icône + sélectionnée et la fenêtre contenant le composant de boîte de dialogue non modale ouverte.
    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.
      Panneau de configuration de la boîte de dialogue non modale avec onglet Configurer affichant les paramètres prédéfinis.

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

      Remarque :
      Pour plus d’informations 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.
      Flèche noire pointant vers le contrôleur de boîte de dialogue non modale dans le tiroir des ressources de données.
    8. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Actions de > par défaut de la boîte de dialogue non modale pour ajouter du contenu à l’en-tête de la boîte de dialogue non modale.
    9. Recherchez et sélectionnez le composant Texte stylisé .
    10. Dans le panneau de configuration Texte stylisé , sélectionnez Aucun pour configurer le composant manuellement.
      Panneau de configuration de texte stylisé avec des flèches noires pointant vers l’option Aucun.

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

      Panneau de configuration du composant de texte stylisé avec des flèches noires pointant vers la liste déroulante prédéfinie et l’option Aucun.
    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.
      Onglet de configuration du texte stylisé avec flèche noire pointant vers le champ de texte.
    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 sous Conteneur > 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 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.
      Panneau de configuration du composant Pièces jointes avec flèche noire pointant vers l’option prédéfinie Enregistrer les pièces jointes.

      Pour plus d’informations 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 des 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 la boîte de dialogue non modale.

      Arborescence de contenu avec des flèches noires pointant vers le composant par défaut de la boîte de dialogue non modale, le corps et le composant déroulant des boîtes de dialogue réduites.

    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 de colonne contenant une seule colonne est ajoutée au bas de la page.
      3. À l’étape, sélectionnez l’icône + dans la nouvelle disposition en colonne.
        Mise en page à colonne unique avec une flèche noire pointant vers l’icône + dans la colonne.
      4. Recherchez et sélectionnez le composant Bouton nu .
        Boîte à outils affichée avec une flèche noire pointant vers le champ de recherche contenant le bouton de terme et une autre flèche noire pointant vers 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.
        Panneau de configuration dénudé du bouton représenté par une flèche noire pointant vers l’onglet Événements et une seconde flèche noire pointant vers l’option + 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. Tapez 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 sans modalité.
        D’autres options peuvent être configurées ici, notamment un en-tête et une catégorie.
      11. Sélectionnez Ajouter.
        Fenêtre du gestionnaire d’événements avec des flèches noires pointant vers l’option Ouvrir la boîte de dialogue non modale, le champ d’en-tête réduit, le champ de boîte de dialogue non modale et le bouton d’ajout.
      12. Sélectionnez l’onglet Configurer .
      13. Tapez Ajouter des pièces jointes dans l’étiquette.
        Onglet de configuration du composant dénudé du bouton avec flèche noire pointant vers le champ d’étiquette.
    21. Sélectionnez Enregistrer.
    22. Sélectionnez la flèche déroulante en regard de Aperçu dans l’en-tête Générateur d'IU et 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.
      En-tête de boîte de dialogue non modale avec flèche noire pointant vers l’icône de réduction.
      La boîte de dialogue non modale est réduite et peut être consultée à partir de la liste déroulante des 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.
      Composant de boîtes de dialogue réduites sélectionné avec la liste déroulante affichant l’option de brouillon d’e-mail.