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

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 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 guideront 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 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 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. 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 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 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 sans modalité, 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 un composant sous Boîte de dialogue non modale par défaut > actions 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 une flèche noire 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 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. S’il n’est pas déjà ouvert, sélectionnez Configurer pour ouvrir l’onglet Configurer.
    12. Dans Texte, supprimez l’exemple de texte et saisissez Ajouter des pièces jointes.
      Onglet de configuration du texte stylisé avec la flèche noire pointant vers le champ de texte.
    13. Sélectionnez Enregistrer dans l’en-tête de l’UI Builder.
    14. Dans l’arborescence de contenu, sélectionnez + Ajouter un composant sous Boîte de dialogue non modale par défaut > contenu > Conteneur 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 , s’il n’est pas déjà sélectionné, 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 la 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 non modal de la boîte de dialogue, 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 de 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 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 un composant.
      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. Sur l’étape, sélectionnez l’icône + dans la nouvelle disposition de colonne.
      4. Recherchez et sélectionnez le composant Button bare (Bouton dénudé ).
        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é des boutons représenté avec 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. Saisissez les pièces jointes dans l’en-tête réduit.
      10. Sélectionnez la boîte de dialogue non modale par défaut dans la boîte de dialogue non modale.
        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 nu de bouton avec la 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 la flèche noire pointant vers l’icône de réduction.
      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 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.