Générateur d'IU Didacticiel sur la page de destination

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 6 minutes de lecture
  • Découvrez comment utiliser l’ancienne Générateur d'IU version pour créer une page de destination personnalisée.

    Avant de commencer

    Important :
    le générateur décrit sur cette page est destiné à la création et à la modification de pages de destination dans tous les espaces de travail, à l'exception de CSM. Pour en savoir plus sur le nouvel UI Builder permettant de créer et de modifier toutes les pages de l'espace de travail CSM, consultez la rubrique UI Builder.
    Cette tâche appartient à l’héritage Générateur d'IU qui vous permet uniquement de créer une page de destination. Utilisez la nouvelle version du générateur d’IU pour créer un espace de travail configurable. Pour en savoir plus, consultez UI Builder.

    Rôle requis : workspace_admin ou ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Avant de créer votre page de destination, voyons comment Générateur d'IU cela fonctionne en explorant une page de destination existante.

    Procédure

    1. Accédez à la Tout > Expérience d'espace de travail > Administration > Tous les espaces de travail et cliquez sur un espace de travail pour l’ouvrir.
    2. Si la page qui s’ouvre n’est pas modifiable, cliquez sur le lien icidans Pour modifier cet enregistrement, cliquez ici pour rendre la page modifiable.
    3. Cliquez sur Ouvrir dans UI Builder.
    4. Dans le volet Gestion des pages, sous l’onglet Pages , cliquez sur la page de destination Vue d’ensemble des incidents .
      Cette page de destination s’affiche dans le volet Étape. Notez les champs État et Application au-dessus du volet Configuration. L’état actif signifie que la page de destination est en cours d’utilisation. Le champ Application indique que la page de destination est utilisée par ITSM Espace de travail d'agent. Si vous avez cliqué sur :
      • Si la désactivation, l’état devient Inactif et la page de destination ne s’affiche plus dans l’espace de travail.

        Le bouton Désactiver sera remplacé par le bouton Activer , ce qui vous permettra de publier la page de destination dans l’espace de travail.

        En règle générale, vous désactivez les pages de destination lorsque vous travaillez dessus. Par exemple, pour mettre à jour la page de destination actuelle, vous pouvez :
        1. Clonez votre page de destination actuelle.
        2. Travailler dessus à l’état inactif.
        3. Activez la version mise à jour.
        4. Rendre la version d’origine inactive.
      • Enregistrer , vous enregistrerez toutes les modifications que vous avez apportées à la page de destination. Si l’état est :
        • Actif, les changements apparaissent immédiatement dans l’espace de travail.
        • Inactifs, les changements sont enregistrés, mais pas publiés.
    5. Cliquez sur les composants et observez l’évolution des paramètres de configuration dans le volet Configuration.
    6. Cliquez sur Se produire maintenant.

      Le conteneur devient visible autour des quatre composants, plus petits. Happening Now est l’étiquette du conteneur. Regardez dans le volet Configuration sous Étiquette. Les conteneurs permettent de regrouper d’autres composants.

    7. Une fois le conteneur toujours en surbrillance, faites glisser le curseur Afficher la bordure vers la droite.

      Une bordure s’affiche, qui montre le conteneur.

    8. Faites glisser le curseur Peut réduire vers la droite.

      Une icône d’accent circonflexe ( icône Réduire) apparaît au-dessus du conteneur. Un agent peut cliquer sur le curseur pour réduire le conteneur et tout ce qu’il contient.

    9. Dans l’angle supérieur droit du volet Configuration, cliquez sur la flèche vers la droite (>) pour réduire le volet.
    10. Dans le volet Étape, cliquez sur le conteneur, puis sur son icône de configuration ( icône Configuration).

      Fenêtre contextuelle Composant

      Le volet de configuration s’affiche à nouveau.

      Vous remarquez également l’icône de déplacement ( Saisir un composant) que vous pouvez utiliser pour faire glisser un composant. Ne le faites pas encore.

      Le curseur Réduit dans le volet Configuration signifie que le conteneur commence par être réduit et apparaît sous la forme d’une flèche vers le bas ( icône Développer) sur laquelle un agent peut cliquer pour développer le conteneur.

      Maintenant que vous avez vu comment utiliser les différentes parties de l’interface, voyons comment créer une landing page.

    Créer un didacticiel sur la page de destination

    Créez une nouvelle page de destination.

    Procédure

    1. Dans l'onglet Pages, cliquez sur l'icône plus (+) pour ouvrir une nouvelle page de destination.

      Créer une nouvelle page

      Vous pouvez également créer une nouvelle page en cliquant sur Actions de page > +Nouvelle page.

    2. Sur la page OK. Pour obtenir des informations générales sur cette page, saisissez le nom de votre page de destination et cliquez sur Créer une page de destination.

      Ce titre apparaît au-dessus de l'étape, mais pas sur votre page de destination.

      Nom de la page de destination

    Didacticiel sur l’ajout et la configuration de composants

    Ajoutez et configurez des composants sur une page de destination.

    Procédure

    1. Cliquez sur l’onglet +Ajouter un composant et faites glisser un composant d’image dans le volet Étape.

      Les paramètres de l’image s’affichent dans le volet Configuration.

    2. Faites glisser un composant de visualisation de données bien en dessous de l’image et déposez-le.

      Le composant n’apparaît pas dans le volet Étape.

    3. Faites glisser un composant de visualisation de données sur le composant d’image, mais ne le déposez pas.
      Déplacez le composant de visualisation des données sur les bords du composant d’image.

      Le côté du composant d’image est mis en surbrillance lorsque vous déplacez le composant de visualisation de données dessus. Faire glisser les composants

    4. Maintenez le composant de visualisation des données sur le côté gauche de l’image et déposez-le.

      Le composant de visualisation des données apparaît à gauche du composant d’image.

    5. Cliquez puis saisissez l’icône de déplacement ( Saisir le composant) au-dessus du composant de visualisation des données et faites-la glisser sur le bord inférieur du composant d’image et déposez-la.

      Maintenant, vous savez comment déplacer un composant sur l’espace d’atterrissage. Le composant de visualisation des données est vide. Remplissons-le pour qu’il soit visible.

    6. Dans le volet Configuration, dans le champ Rapport , saisissez incident.

      Une liste d’entrées possibles s’affiche.

    7. Cliquez sur Incidents ouverts par priorité dans la liste.
      Ce rapport s’ouvre dans le composant.
    8. Dans le volet Configuration, supprimez les incidents ouverts par priorité et, dans le champ Widget PA , saisissez incident.
      Une liste d’entrées possibles s’affiche. Ces entrées sont Analyse des performances des widgets (PA).

      Vous ne pouvez placer qu’une seule visualisation de données dans le composant. Ainsi, vous pouvez afficher un rapport ou un widget PA, mais pas les deux. Si vous placez des entrées pour un rapport et un widget PA, Générateur d'IU seul le rapport s’affiche.

      Vous savez maintenant comment ajouter et organiser des composants sur une page de destination. Voyons maintenant comment les regrouper.

    Didacticiel Grouper et organiser les composants

    Regroupez et organisez les composants sur une page de destination.

    Procédure

    1. Cliquez sur Actions de la page, sélectionnez Supprimer la page, puis confirmez la suppression.
    2. Sélectionnez le composant de visualisation des données, cliquez sur l’icône de la corbeille ( icône de corbeille), puis sur l’icône de suppression de la coche ( Supprimer le composant) au-dessus du composant pour le supprimer.
      Vous avez maintenant supprimé des composants sur une page de destination. Si vous le souhaitez, vous pouvez également supprimer le composant d’image.
    3. Faites glisser un composant de conteneur dans le volet Étape.
    4. Dans la fenêtre Component (Composant), saisissez une valeur dans le champ Label (Étiquette ) du conteneur et poussez le curseur Show border (Afficher la bordure ) vers la droite pour afficher le conteneur.
    5. Dans le champ Étiquette , ajoutez un titre au conteneur, par exemple Listes importantes.
    6. Faites glisser un composant de liste dans le conteneur.
    7. Dans la fenêtre Component (Composant), dans le champ Table (Table ), saisissez une valeur pour la table d’où provient la liste des enregistrements (par exemple, incident).
    8. Faites glisser un autre composant de liste dans le conteneur.

      Vous pouvez déposer la liste à l’intérieur ou à l’extérieur du conteneur. Déposez-le à l’intérieur du récipient.

      Ajouter une liste au conteneur

    9. Dans la fenêtre Component (Composant), dans le champ Table (Table ), saisissez une valeur pour une autre table d’où provient la liste des enregistrements (par exemple, tâche).

      Vous avez maintenant deux composants de liste à l’intérieur d’un composant de conteneur, dont l’étiquette décrit les listes.

    10. Continuez à ajouter des composants à l’intérieur ou à l’extérieur du conteneur et utilisez l’icône de déplacement ( Saisir un composant) pour faire glisser les composants afin de vous habituer à ajouter, supprimer, déplacer et regrouper des composants.
    11. Cliquez sur Enregistrer.

      Si vous créiez une vraie page de destination, vous cliqueriez également sur Activer. Étant donné que vous ne créez pas une véritable page de destination dans ce didacticiel, supprimons cette page de destination d’exercice.

    Didacticiel Supprimer une page de destination

    Supprimez une page de destination.

    Procédure

    1. Dans l'onglet Pages, sélectionnez votre page de destination.
    2. Sous Actions de la page, cliquez sur Supprimer la page.

    Que faire ensuite

    Vous savez maintenant comment utiliser Générateur d'IU. Vous êtes donc prêt à créer votre première page de destination.