Didacticiel UI Builder

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 9 minutes de lecture

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

    Avant de commencer

    Rôle requis : ui_builder_admin

    Dans ce Générateur d'IU didacticiel, vous allez effectuer 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 taper UI Builder directement dans le navigateur de filtre.
      Figure 1. Démarrer Générateur d'IU
      Démarrage d’UI Builder.
    2. Sur la page d’accueil Générateur d'IU , choisissez une expérience dans laquelle vous souhaitez travailler.
      Si 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 et variantes .

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

      2. Sélectionnez Créer une nouvelle page.

        Modal de sélection du type de page.

      3. Sélectionnez Créer à partir de zéro à la place.

        Bouton Créer à partir de zéro à la place.

      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 , 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 remplacer ce chemin par ce que vous voulez, mais il doit être unique. Le chemin d’accès doit être en minuscules et ne pas contenir d’espace. L’aperçu de l’URL indique quel sera le chemin d’accès de votre page.

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

      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 tout 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 Créer.
      12. Une fois votre page créée, l’écran de vue de l’expérience s’affiche. Sélectionnez Ouvrir dans l’éditeur pour commencer à modifier la page. 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. Créer ma page de didacticiel
      Création d’une page appelée Ma première page.
      Félicitations ! Vous avez créé votre page de tutoriel ! La page est vide de contenu. Vous ajoutez des composants à la page pour lui créer 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. Modifiez la mise en page de la page pour une mise en page à deux colonnes.
      Pour en savoir plus sur les mises en page, reportez-vous à Organiser les composants dans les pages de 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 Corpsde l’arborescence de contenu pour mettre la page en surbrillance.
      2. Sélectionnez + Ajouter un composant dans l’arborescence de contenu.

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

      3. Sélectionnez la mise en page Deux colonnes .

        Flèche pointant vers la mise en page en deux colonnes dans la boîte à outils.

      4. La mise en page en deux colonnes s’affiche.

        La mise en page 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 la colonne de gauche Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d’informations sur les façons d’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.

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

      4. Sélectionnez l’en-tête 1 dans l’arborescence de contenu.
      5. Sélectionnez Aucun dans la liste des paramètres prédéfinis du panneau de configuration.
      6. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l’étiquette et l’ID du composant. Vous pouvez les changer pour tout ce que vous voulez, tant qu’ils sont uniques.

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

      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 de l’en-tête, comme la police, l’épaisseur et la couleur. Par exemple, si vous sélectionnez En-tête secondaire, le texte est plus petit. Des en-têtes de tailles différentes 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.
        • Saisissez Mon didacticiel comme texte d’en-tête dans le champ Étiquette .
        • Laissez le niveau sur 1.

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

      Ajoutez un composant de bouton à votre page. Configurez le bouton en changeant 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 créer un lien vers 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, reportez-vous à la rubrique Composants.

      1. Sélectionnez le signe + 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. Tapez Button 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 et l’ID du composant. Vous pouvez les changer pour tout 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 modifier le nom de votre bouton.
        • Définissez la taille sur Grand.
        • Entrez domicile dans le champ de recherche Icône .
        • Sélectionnez Contour de l’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 en savoir plus sur les gestionnaires d’événements, reportez-vous à la section Gérer les actions dans les pages UI Builder (fonctionnalité avancée).
      7. Sélectionnez Enregistrer. C’est toujours une bonne idée d’enregistrer votre page souvent 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 UI Builder avec un en-tête et un bouton configurés.

    6. Ajoutez un composant de visualisation de 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 d’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 à taper Visualisation des données jusqu’à ce que vous voyiez le composant Visualisation des 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 et l’ID du composant. Vous pouvez les changer pour tout ce que vous voulez, tant qu’ils sont uniques.
      4. Ajoutez une ressource de données à votre composant de visualisation de données pour apporter des données de compte client.
        • Sélectionnez le composant de visualisation de données, puis l’onglet 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 Ajouter cette source.

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

      5. Sélectionnez la liste déroulante Type de visualisation des données , puis sélectionnez Numérotation. 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 du 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 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 à tout moment dans votre expérience.
    8. Maintenant, prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur.
      Pour effectuer cette tâcheFaites ce qui suit
      Prévisualiser votre page
      1. Sélectionnez Aperçu dans l’en-tête Générateur d'IU .
      2. Consultez 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 du 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 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. Date de création d’une page en Générateur d'IU.
    2. Vous avez modifié la mise en page de votre page pour qu’elle comporte deux colonnes.
    3. Ajout d’un composant En-tête en tant que titre à votre colonne de gauche.
      • Modifiez le texte de l’en-tête.
      • Modification 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. Modification de l’étiquette de la colonne de droite.
    6. Ajout d’un composant de visualisation des données .
      • Configuré 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 a été enregistrée.
    8. Prévisualisez votre page.