Générateur d'IU didacticiel

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 9 minutes de lecture

    • Apprenez à utiliser les bases de Générateur d'IU pour créer une page appelée Mon tutoriel.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Dans ce didacticiel Générateur d'IU , vous effectuerez les tâches suivantes pour créer une page dans Générateur d'IU:

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
      Vous pouvez également saisir Générateur d’IU directement dans le navigateur de filtre.
      Figure 1. Démarrer Générateur d'IU
      Démarrage de Générateur d’IU.
    2. Dans la Générateur d'IU page d’accueil, choisissez une expérience dans laquelle vous souhaitez travailler.
      Si vous ne voyez aucune expérience répertoriée dans laquelle travailler, contactez votre administrateur pour accéder à une expérience ou créer une expérience. Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
    3. Créez une page.
      Pour effectuer cette tâcheFaites ce qui suit
      Créer une page
      1. Sélectionnez l’icône + dans la section Pages .

        Bouton Créer une page sur la page de vue de l’expérience.

      2. Sélectionnez Create a new page (Créer une nouvelle page).

        Modal de sélection du type de page.

      3. Sélectionnez plutôt Créer à partir de zéro.

        Bouton Créer plutôt à partir de zéro.

      4. Saisissez le nom de votre nouvelle page. Le nom peut être tout ce que vous voulez. Dans cet exemple, vous pouvez saisir Ma page de didacticiel.
      5. Dans le champ Chemin d’accès , un chemin d’accès est automatiquement saisi en fonction du nom de votre page. Dans cet exemple, le chemin est my-tutorial-page. Le chemin d’accès est l’URL de la page. Vous pouvez modifier ce chemin d’accès comme vous voulez, mais le chemin d’accès doit être unique. Le chemin d’accès doit être en minuscules et ne contenir aucun espace. L’aperçu de l’URL indique le chemin d’accès de votre page.

        Créez une page intitulée Ma page de didacticiel.

      6. Sélectionnez un type de page d’URL dans la liste déroulante Type . Les types de page d’URL vous aident à classer et à rechercher les pages importantes dans la vue de l’expérience.
      7. Sélectionnez Continuer.
      8. (Facultatif) Ajoutez des paramètres à l’URL de votre page.
      9. Sélectionnez Looks good (Tout semble correct).
      10. Saisissez le nom de votre variante de page. Le nom peut être tout ce que vous voulez. Dans cet exemple, vous pouvez saisir Ma première variante de page.
      11. Ajoutez une audience pour la variante de page en sélectionnant + Ajouter une audience. Dans cet exemple, sélectionnez Administrateur.
      12. Sélectionnez Continuer.
      13. Sur l’écran suivant, sélectionnez Build responsive.
      14. Sélectionnez Créer.
      15. Une fois votre page créée, l’écran de l’éditeur de page s’affiche. Vous pouvez modifier les paramètres avancés tels que les paramètres d’URL et les paramètres de variante . Pour ce didacticiel, vous pouvez ignorer ces options avancées. Pour plus d’informations sur la modification des paramètres avancés, reportez-vous à la section Créer une page UI Builder : paramètres avancés.
      Figure 2. Éditeur de page du générateur d'IU
      Éditeur de page du générateur d’IU affichant la nouvelle page créée dans le didacticiel.
      Félicitations ! Vous avez créé votre page de tutoriel ! La page est vide de contenu. Vous ajoutez des composants à la page pour lui apporter des fonctionnalités. Les composants sont les éléments constitutifs d’une page. Générateur d'IU est livré avec de nombreux composants prêts à être ajoutés à votre page. Les composants peuvent être aussi simples qu’un en-tête ou aussi complexes qu’une liste.
    4. Passez la mise en page de la page à deux colonnes.
      Pour plus d’informations sur les mises en page, reportez-vous à la section Organiser les composants dans les pages du générateur d'IU.
      Pour effectuer cette tâcheFaites ce qui suit
      Changer la mise en page de la page en deux colonnes
      1. Sélectionnez le niveau Corps de l’arborescence de contenu pour mettre la page en surbrillance.
      2. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu.

        Pointeur sélectionnant + Ajouter du contenu dans l’arborescence de contenu.

      3. Sélectionnez la disposition Deux colonnes .

        Flèche pointant vers la disposition à deux colonnes dans la boîte à outils.

      4. Sélectionnez Ajouter.
      5. La disposition en deux colonnes s’affiche.

        La disposition en deux colonnes affichée sur l’étape.
    5. Ajoutez un composant En-tête et un composant Bouton dans la colonne de gauche.
      Pour effectuer cette tâcheFaites ce qui suit
      Ajouter un composant d’en-tête à votre conteneur de colonne de gauche Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d’informations sur les façons dont vous pouvez ajouter des composants à votre page, consultez Tableau 1.
      1. Sélectionnez le bouton + au milieu de la colonne de gauche.
      2. Tapez En-tête dans le champ de recherche.
      3. Sélectionnez le composant En-tête pour l’ajouter à votre conteneur. Un composant d’en-tête permet d’ajouter du texte ou un titre à votre page.
      4. Sélectionnez Ajouter.
      5. Sélectionnez le nom du composant dans le panneau de configuration pour voir l’étiquette et l’ID du composant. Vous pouvez les remplacer par ce que vous voulez, à condition qu’elles soient uniques.

        Mise à jour de l’étiquette et de l’ID du composant.

      6. Sélectionnez Appliquer.
      7. Configurez votre composant En-tête . Les auteurs de composants configurent les composants pour exposer les propriétés appropriées requises pour configurer leurs composants.
        • Définissez le style sur En-tête-primaire. Le style modifie la classe du texte d’en-tête, comme la police, le poids et la couleur. Par exemple, si vous sélectionnez En-tête-secondaire, le texte est plus petit. Différentes tailles de titres sont utiles si vous avez deux titres et que vous souhaitez que le deuxième titre soit plus petit que le titre principal.
        • Entrez Mon didacticiel comme texte d’en-tête dans le champ Étiquette .
        • Laissez le niveau à 1.

          Champ d’étiquette d’en-tête dans l’onglet de configuration du composant avec mon tutoriel ajouté.
      Ajouter et configurer un composant de bouton à votre conteneur de colonne de gauche

      Ajoutez un composant de bouton à votre page. Configurez le bouton en modifiant le texte et son apparence. Ensuite, modifiez ce qui se passe lorsque vous cliquez sur le bouton en ajoutant un gestionnaire d’événements pour le bouton. Le gestionnaire d’événements ajoute une action au bouton pour le lier à la page d’accueil ServiceNow® . Ainsi, lorsque vous cliquez sur le bouton, la page d’accueil s’ouvre ServiceNow® dans un nouvel onglet de votre navigateur. Pour plus d’informations sur la configuration des composants, voir Composants.

      1. Sélectionnez le + sur le bord inférieur du composant d’en-tête que nous avons ajouté dans la section précédente.

        Flèche pointant vers l’icône + pour ajouter des composants après l’en-tête.

      2. Taper dans le champ de recherche.
      3. Sélectionnez le composant Bouton dans la liste.

        Pour plus d’informations sur l’ajout de composants à votre page, consultez Tableau 1.

      4. Sélectionnez le nom du composant dans le panneau de configuration pour voir l’étiquette et l’ID du composant. Vous pouvez les remplacer par ce que vous voulez, à condition qu’elles soient uniques.
      5. Configurez le composant de bouton comme suit.
        • Entrez Page d’accueil dans le champ Étiquette pour changer le nom de votre bouton.
        • Passez la taille en grande.
        • Entrez Accueil dans le champ de recherche Icône .
        • Sélectionnez Plan d’accueil.

          Configuration du bouton de la page d’accueil.

      6. Ajoutez un gestionnaire d’événements pour configurer l’action qui s’applique au bouton.
        • Sélectionnez l’onglet Événements dans le panneau de configuration.
        • Sous Bouton cliqué, sélectionnez + Ajouter un nouveau gestionnaire d’événements.

          Flèche pointant vers le lien + Ajouter un gestionnaire d’événements.

        • Sous Gestionnaires d’événements hérités, sélectionnez Lien vers la destination.
        • Cliquez sur Sélectionner la destination.
        • Dans l’écran Sélectionner la destination , sélectionnez URL externe.
        • Tapez votre URL. Pour ce didacticiel, tapez https://www.servicenow.com Sélectionnez OK.
        • Sélectionnez Ajouter.

          Gestionnaire d’événements configuré pour le composant de bouton.

          Pour plus d’informations sur les gestionnaires d’événements, reportez-vous à la section Gérer les actions dans les pages du générateur d’IU.
      7. Sélectionnez Enregistrer. C’est toujours une bonne idée d’enregistrer souvent votre page pendant que vous travaillez.
      8. Sélectionnez Aperçu.
      9. Testez le bouton que vous avez créé dans les étapes précédentes.
      Vous avez ajouté et configuré le composant En-tête et bouton pour votre page.

      Page du générateur d’IU avec un en-tête et un bouton configurés.

    6. Ajoutez un composant de visualisation des données au conteneur.
      Un composant de visualisation de données contient des données que vous affichez de manière visuelle. Configurez les paramètres du composant de visualisation des données. Ensuite, ajoutez-y une ressource de données.
      Pour effectuer cette tâcheFaites ce qui suit
      Ajouter et configurer un composant de visualisation de données à votre conteneur de colonne de droite Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d’informations sur les façons dont vous pouvez ajouter des composants à votre page, consultez Tableau 1.
      1. Sélectionnez le bouton + au milieu de la colonne de droite.
      2. Dans le champ Rechercher , commencez à taper Visualisation des données jusqu’à ce que le composant Visualisation des données s’affiche, puis sélectionnez le composant pour l’ajouter à votre page.
      3. Sélectionnez le nom du composant dans le panneau de configuration pour voir l’étiquette et l’ID du composant. Vous pouvez les remplacer par ce que vous voulez, à condition qu’elles soient uniques.
      4. Ajoutez une ressource de données à votre composant de visualisation de données pour intégrer les données de compte client.
        • Sélectionnez le composant Data Visualization (Visualisation des données), puis l’onglet Configure (Configurer ).
        • Sélectionnez Ajouter une source de données.
        • Tapez Tâche [task] dans le champ de recherche et recherchez une tâche disponible sur votre Générateur d'IU instance.
        • Sélectionnez Add this source (Ajouter cette source).

          Ajout de la source de données au composant de visualisation des données.

      5. Sélectionnez Liste déroulante de type de visualisation de données , puis sélectionnez Composer. Vous pouvez choisir différents types de visualisation en fonction de vos données.
      6. Sélectionnez En-tête et bordure dans le panneau de configuration.
      7. Entrez Mes tâches dans le champ Titre du graphique .

        Flèche pointant vers le champ Titre du graphique.
      Vous avez ajouté un composant de visualisation de données à la colonne de droite et l’avez configuré. Vous avez également ajouté une ressource de données pour importer les données de compte client.
    7. Enregistrez la nouvelle page une dernière fois.
      Pour effectuer cette tâcheFaites ce qui suit
      Enregistrer votre page
      1. Dans l’angle droit de Générateur d'IU, sélectionnez Enregistrer.
      2. Maintenant que vous avez enregistré votre page, vous pouvez y accéder dans votre expérience à tout moment.
    8. Maintenant, prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur.
      Pour effectuer cette tâcheFaites ce qui suit
      Aperçu de votre page
      1. Sélectionnez Aperçu dans l’en-tête Générateur d'IU .
      2. Reportez-vous à l’en-tête dans la colonne de gauche de votre page.
      3. Sélectionnez le bouton Page d’accueil . La ServiceNow® page d’accueil s’ouvre dans un autre onglet de navigateur. Fermez l’onglet du navigateur pour revenir à votre page d’aperçu.
      4. Consultez la visualisation des données du compte client dans la colonne de droite de votre page.
        Figure 3. Aperçu de votre page de didacticiel
        Sélectionnez Aperçu pour afficher la page du didacticiel.
      Félicitations ! Vous avez terminé le Générateur d'IU didacticiel.

    Résultats

    1. A créé une page en Générateur d'IU.
    2. Vous avez changé la mise en page de votre page pour avoir deux colonnes.
    3. J’ai ajouté un composant En-tête comme titre à votre colonne de gauche.
      • Modification du texte de l’en-tête.
      • Changement de l’étiquette de l’en-tête.
    4. Ajout d’un composant de bouton sous votre composant d’en-tête.
      • Configurez votre bouton.
      • Ajout d’un gestionnaire d’événements pour votre bouton.
      • Ajout d’un gestionnaire d’événements pour configurer un lien vers une page Web. Lorsque vous cliquez sur le bouton, la page Web s’ouvre.
    5. Étiquette changée pour la colonne de droite.
    6. Ajout d’un composant de visualisation des données .
      • Configuration du composant de visualisation des données.
      • Ajout d’une ressource de données pour apporter les données de la tâche.
    7. Votre nouvelle page a été enregistrée.
    8. A prévisualisé votre page.