Générateur d'IU tutoriel

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 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 Générateur d'IU didacticiel, vous effectuez les tâches suivantes pour créer une page dans Générateur d'IU:

    Procédure

    1. Accédez à la Tout > 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. À partir de la page d’accueil Générateur d'IU , choisissez une expérience dans laquelle vous souhaitez travailler.
      Si aucune expérience dans laquelle travailler ne figure dans la liste, 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 et variantes .

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

      2. Sélectionnez 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. Entrez le nom de votre nouvelle page. Le nom peut être 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 d’accès est my-tutorial-page. Le chemin d’accès est l’URL de la page. Vous pouvez modifier ce chemin d’accès pour ce que 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 quel sera le chemin d’accès de votre page.

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

      6. Sélectionnez Continuer.
      7. (Facultatif) Ajoutez des paramètres à l’URL de votre page.
      8. Sélectionnez Ça a l’air bien.
      9. Saisissez le nom de votre variante de page. Le nom peut être ce que vous voulez. Dans cet exemple, vous pouvez saisir Ma première variante de page.
      10. Ajoutez une audience pour la variante de page en sélectionnant + Ajouter une audience. Dans cet exemple, sélectionnez Admin.
      11. Sélectionnez Continuer.
      12. Sur l’écran suivant, sélectionnez Version réactive.
      13. Sélectionnez Créer.
      14. Une fois votre page créée, l’écran de l’éditeur de page s’affiche. Vous pouvez modifier des paramètres avancés tels que les paramètres d’URL et les paramètres de variantes . 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 y créer des fonctionnalités. Les composants sont les blocs de construction 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. Changez la mise en page de la page en une mise en 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 mise en page Deux colonnes .

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

      4. La mise en page à 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 le 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 est un moyen d’ajouter du texte ou un titre à votre page.
      4. Sélectionnez Aucun dans la liste des paramètres prédéfinis du panneau de configuration.

        Ajout d’un composant d’en-tête à une colonne.

      5. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l’étiquette du composant et l’ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu’ils sont 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 d’en-têtes sont utiles si vous avez deux en-têtes et que vous souhaitez que le deuxième en-tête soit plus petit que l’en-tête principal.
        • Entrez Mon tutoriel comme texte d’en-tête dans le champ Étiquette .
        • Laissez le niveau 1.

          Champ É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. Modifiez ensuite 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.

        La flèche pointant vers l’icône + permet d’ajouter des composants après l’en-tête.

      2. Tapez le bouton 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 le tableau 1.

      4. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l’étiquette du composant et l’ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu’ils sont uniques.
      5. Configurez le composant de bouton comme suit.
        • Entrez Page d’accueil dans le champ Étiquette pour changer le nom de votre bouton.
        • Changez 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.
        • Saisissez 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éé lors des é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. Ajoutez-y ensuite 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 le tableau 1.
      1. Sélectionnez le bouton + au milieu de la colonne de droite.
      2. Dans le champ Rechercher , commencez à saisir Visualisation de données jusqu’à ce que vous voyiez le composant Visualisation de données , puis sélectionnez le composant pour l’ajouter à votre page.
      3. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l’étiquette du composant et l’ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu’ils sont uniques.
      4. Ajoutez une ressource de données à votre composant de visualisation de données pour importer les données de compte client.
        • Sélectionnez le composant de visualisation des données, puis l’onglet Configurer .
        • Sélectionnez Ajouter une source de données.
        • Tapez Task [task] dans le champ de recherche et recherchez une tâche disponible sur votre Générateur d'IU instance.
        • Sélectionnez Ajouter cette source.

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

      5. Sélectionnez la 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 apporter des 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 le coin le plus à droite 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. Prévisualiser la page de votre 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 dans Générateur d'IU.
    2. Vous avez changé la mise en page de votre page pour avoir deux colonnes.
    3. Ajout d’un composant En-tête en tant que 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. Changement de l’étiquette de la colonne de droite.
    6. Ajout d’un composant de visualisation des données .
      • Configurer le composant de visualisation des données.
      • Ajout d’une ressource de données pour apporter des données de tâche.
    7. Votre nouvelle page enregistrée.
    8. A prévisualisé votre page.