Générateur d'IU tutoriel

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

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

    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 Tout > Cadre de travail Now Experience > Générateur d'IU.
      Vous pouvez également taper Générateur d’IU 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 dans laquelle travailler n’est répertoriée, 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éer 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 n’importe quel que vous voulez. Dans cet exemple, vous pouvez taper 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 modifier ce chemin d’accès comme vous le souhaitez, 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 appelée Ma page de tutoriel.

      6. Sélectionnez Continuer.
      7. (Facultatif) Ajoutez des paramètres à l’URL de votre page.
      8. Sélectionnez Cela me semble bien.
      9. Saisissez le nom de votre variante de page. Le nom peut être n’importe quel 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 Administrateur.
      11. Sélectionnez Continuer.
      12. Sur l’écran suivant, sélectionnez Créer une dynamique.
      13. Sélectionnez Créer.
      14. 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 Page Créer un générateur d’IU : Paramètres avancés.
      Figure 2. Éditeur de page du générateur d'IU
      Éditeur de page du générateur d’IU montrant 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. Passez la mise en page de la page à une mise en page en deux colonnes.
      Pour en savoir plus 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 sur 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 en deux colonnes dans la boîte à outils.

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

        Mise en page en deux colonnes affichée à 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 façons. 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 Titre dans le champ de recherche.
      3. Sélectionnez le composant Heading (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 et l’ID du composant. Vous pouvez les remplacer par 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 de manière à exposer les propriétés appropriées nécessaires à la configuration de 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, 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.

          Le 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 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 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 section 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. Tapez 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 et l’ID du composant. Vous pouvez les remplacer par ce que vous voulez, tant qu’ils sont uniques.
      5. Configurez le composant du bouton comme suit.
        • Entrez Page d’accueil dans le champ Étiquette pour modifier le nom de votre bouton.
        • Remplacez la taille par grande.
        • Entrez la page d’accueil dans le champ de recherche Icône .
        • Sélectionnez le 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 à Gérer les actions dans les pages du générateur d’IU (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 du générateur d’IU 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 façons. 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 à saisir 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 remplacer par ce que vous voulez, tant qu’ils sont uniques.
      4. Ajoutez une ressource de données à votre composant de visualisation des données pour y intégrer des données de compte client.
        • Sélectionnez le composant de visualisation des données, puis sélectionnez 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.

          Ajout de 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 Dial. 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 My Tasks (Mes tâches) dans le champ Chart title (Titre du graphique).

        Flèche pointant vers le champ du titre du graphique.
      Vous avez ajouté un composant de visualisation des données dans la colonne de droite et l’avez configuré. Vous avez également ajouté une ressource de données pour importer les données du compte client.
    7. Enregistrez la nouvelle page une dernière fois.
      Pour effectuer cette tâcheFaites ce qui suit
      Enregistrez 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. Prévisualisez maintenant 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. Cliquez sur 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. Visualisez les 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. Création d’une page dans 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.
      • Changement du 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 .
      • Configurez le composant de visualisation des données.
      • Une ressource de données a été ajoutée pour apporter des données de tâche.
    7. Votre nouvelle page a été enregistrée.
    8. Prévisualisez votre page.