Ajouter et configurer des composants

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

    • Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Les composants sont les blocs de construction utilisés pour créer des pages personnalisées dans Générateur d'IU. Découvrez comment ajouter un composant à une page. Après avoir ajouté un composant à une page, vous devez configurer le composant. Pour plus d’informations sur la configuration des composants, consultez la documentation du composant sur le site développeur ServiceNow .

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
      Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
    3. Ouvrez ou créez une page.
      Si vous ouvrez une page existante, assurez-vous que vous êtes dans le même champ d’application que la page d’origine. Si ce n’est pas le cas, modifiez le champ d’application avant de commencer à modifier la page. Le périmètre de l'application protège les applications en identifiant et en limitant l'accès aux fichiers et données d'application. Les administrateurs définissent le périmètre de manière à spécifier quelles parties d’une application sont accessibles à d’autres applications. Le périmètre de l’application protège les données et les fichiers d’application. Consultez En savoir plus sur la sécurité et les rôles pour plus d’informations sur le périmètre de l’application.
    4. Sélectionnez un conteneur existant ou créez une mise en page de colonne.
      Consultez Organiser les composants dans les pages de Générateur d’IU pour plus d'informations.
    5. Ajoutez des composants à votre page.
      Générateur d'IU est livré avec une bibliothèque de composants parmi lesquels choisir. Vous ajoutez des composants en tant que blocs de construction de votre page. Par exemple, vous pouvez ajouter un en-tête, des visualisations de données, etc. Le tableau suivant vous montre les différentes façons d’ajouter un composant à une page.
      Pour ajouter un composant Faites ce qui suit
      Directement à partir de votre page Dans votre page, sélectionnez + et choisissez un composant dans la boîte à outils. Vous pouvez rechercher un composant ou faire défiler la liste.Icône Ajouter du contenu sélectionnée sur l’étape affichant la fenêtre de boîte à outils avec l’onglet Composants sélectionné.
      Menu flottant au-dessus de la page Sélectionnez le menu flottant au-dessus de votre composant.
      • Sélectionnez Ajouter avant ou Ajouter après.
      • Choisissez un composant dans la boîte à outils.
      Flèche pointant vers le menu flottant qui s’affiche après avoir sélectionné l’icône du menu.
      Arborescence de contenu Vous pouvez ajouter un composant à partir de l’arborescence de contenu des deux manières suivantes.
      • Sélectionnez +Ajouter un composant sous un conteneur dans l’arborescence de contenu. Choisissez ensuite un composant dans la boîte à outils.
      • Déplacez votre souris sur un conteneur dans l’arborescence de contenu, sélectionnez l’icône Menu , puis sélectionnez Ajouter un composant. Choisissez ensuite un composant dans la boîte à outils.
      Flèche noire pointant vers l’option + ajouter un composant dans l’arborescence de contenu en regard de la fenêtre de la boîte à outils avec l’onglet Composants sélectionné.
    6. Configurez maintenant les propriétés des composants que vous venez d’ajouter.
      Configurer les composants signifie les personnaliser en fonction de vos besoins. Pour plus d’informations sur la configuration des composants, consultez Next Experience Composants.
      1. Sélectionnez le composant que vous souhaitez configurer.
      2. Sélectionnez l’onglet Configurer dans le panneau de configuration dans Générateur d'IU.
      3. Personnalisez les propriétés du composant.
        Par exemple, vous pouvez ajouter un nom pour un composant de bouton. Certains composants, comme les visualisations de données, nécessitent une source de données avant que vous puissiez configurer les propriétés. Chaque composant possède des propriétés de configuration différentes en fonction des besoins et des options de chaque composant. Par exemple, la configuration du composant Bouton est simple, tandis qu’un composant Liste nécessite plus de configuration.
      4. Pour les composants dotés de propriétés JSON configurables, vous pouvez utiliser Générateur d'IUl’éditeur JSON low-code de pour modifier les propriétés des composants sans avoir à modifier le code JSON.

        L’interface utilisateur de l’éditeur JSON affiche toutes les propriétés disponibles, même celles qui ne sont pas définies dans les données factices ou les valeurs définies. Vous pouvez mettre à jour les propriétés ou ajouter vos propres propriétés personnalisées dans l’éditeur JSON. Pour en savoir plus sur la configuration des composants, reportez-vous à Modifier le code à l’aide de l’éditeur de code Now (fonctionnalité avancée).

        Remarque :
        L’éditeur JSON low-code n’est disponible que pour les propriétés qui ont un schéma et dont l’entrée JSON correspond audit schéma.

        L’éditeur JSON low-code prend en charge les objets simples, les propriétés de tableau simples, les tableaux complexes, les tableaux d’objets et prend partiellement en charge les objets complexes. Pour les tableaux complexes, vous pouvez ajouter, supprimer ou déplacer la position des éléments de tableau. Vous pouvez également sélectionner Masquer les éléments non définis pour masquer les objets dont les valeurs sont vides ou nulles pour une expérience de modification simplifiée.

        Éditeur JSON low-code UI Builder.
      5. Lorsque vous utilisez un composant de conteneur, vous pouvez modifier certains styles à l’aide des panneaux flottants.

        Sélectionnez l’icône Menu pour afficher un menu.

        Flèche pointant vers l’icône de menu avec le menu flottant développé.

        Sélectionnez l’option Mise en page, Dimensionnement ou Espacement pour ouvrir un panneau flottant affichant les options les plus courantes . Faites glisser le panneau flottant vers un autre emplacement selon vos besoins. Un seul panneau flottant peut être ouvert à la fois.

        Options de mise en page affichées dans un panneau flottant.
      Pour plus d’informations sur la configuration des composants, consultez Next Experience Composants.
    7. Facultatif : Sélectionnez l’onglet Événements pour ajouter un gestionnaire d’événements à votre composant.
      Ajoutez un gestionnaire d’événements pour ajouter des actions aux composants de votre page. Par exemple, un composant de bouton est statique et ne fait rien tant que vous ne lui avez pas lié une action d’événement, comme la sauvegarde d’un enregistrement. Certains composants n’ont pas d’action d’événement appliquée, comme un composant d’en-tête. Cependant, de nombreux composants exigent que vous mappiez un événement à votre composant pour qu’il effectue réellement une action. Consultez Lier un événement à un composant pour en savoir plus sur l’ajout de gestionnaires d’événements à votre composant.
    8. Facultatif : Vous pouvez remplacer n’importe quel style d’un composant en ajoutant un style CSS sous l’onglet Styles .
      Pour plus d'informations, consultez Modifier l’apparence par défaut des composants.
      Remarque :
      Les changements de style n’affectent qu’un seul composant à la fois. Pour modifier le style visuel de tous les composants de votre expérience, vous devez appliquer un thème à votre expérience. Pour plus d'informations, consultez Gérer le style visuel des expériences UI Builder.
    9. Facultatif : Ajoutez des conteneurs supplémentaires à votre page pour afficher vos composants de manière organisée.
      Par exemple, un conteneur peut avoir un composant d’en-tête. Un autre conteneur en dessous pourrait inclure un composant de liste, un composant de bouton, etc.
      1. Sélectionnez le signe + en haut de votre conteneur pour ajouter un composant de conteneur avant le composant existant, puis sélectionnez le signe + situé en bas d’un composant pour insérer un composant de conteneur après celui-ci.
      2. Faites glisser un composant de conteneur de la liste Composants vers votre conteneur existant sur la page ; Maintenez au-dessus de la ligne supérieure du conteneur pour insérer le nouveau conteneur avant le conteneur existant ou au-dessus de la ligne inférieure du conteneur existant pour l’ajouter après.
    10. Facultatif : Ajoutez d’autres composants à votre page en sélectionnant le signe + en haut ou en bas des composants de la page (le + devient + Ajouter).
      Signes plus en haut et en bas d’un composant permettant d’ajouter des composants supplémentaires.
      1. Sélectionnez le signe + en haut de votre composant pour ajouter un composant avant le composant existant, ou sélectionnez le signe + en bas d’un composant pour insérer un composant après celui-ci.
      2. Faites glisser un composant de la liste des composants pour insérer le composant avant ou après un composant existant.
    11. Facultatif : Pour qu’une fenêtre modale apparaisse lorsque vous sélectionnez un composant tel qu’un bouton, vous devez d’abord ajouter la fenêtre modale au composant.
      Une fenêtre modale est une fenêtre contextuelle de confirmation qui s’affiche lorsque vous sélectionnez le composant. Par exemple, si vous ajoutez un composant de bouton qui supprime un enregistrement, vous ajoutez un modal pour demander à l’utilisateur de confirmer qu’il souhaite supprimer l’enregistrement. Consultez Créer des modaux dans Générateur d'IU pour plus d'informations.
    12. Sélectionnez Enregistrer souvent sur votre page pendant que vous travaillez.
    13. Affichez et testez votre page en sélectionnant le bouton Aperçu .

    Que faire ensuite

    Vous avez ajouté et configuré des composants sur votre page. Consultez Exposer dynamiquement les données dans les pages du générateur d’IU (fonctionnalité avancée) pour plus d'informations. Une ressource de données dans Générateur d'IU est les données qu’une page récupère pour afficher le contenu dans les composants. Les composants utilisent les ressources de données comme moyen de réutiliser les données et les configurations dans différentes expériences et de rendre les composants dynamiques sur une page.

    Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant

    Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.

    Le tableau suivant répertorie les fonctions que vous pouvez utiliser dans l’éditeur de formule de Générateur d'IU composant. Pour en savoir plus sur l’éditeur de formules de composants, reportez-vous à la section Personnaliser les pages à l’aide de Générateur d'IU composants.

    Tableau 1. Opérateurs disponibles pour les créateurs de condition
    Étiquette de l’opérateur Exemple de condition Opérateur de requête équivalent Exemple de requête : Exemple de sortie
    Tous vides [Brève description] [ALL_EMPTY] ALL_EMPTY short_descriptionALL_EMPTY Tous les enregistrements dans lesquels il n’y a pas de valeur dans le champ Brève description .
    Tous égaux [Brève description] [ALL_EQ] [Stockage réseau non disponible] ALL_EQ short_description=Stockage réseau non disponible Tous les enregistrements dans lesquels la valeur du champ Brève description est égale à « Le stockage réseau n’est pas disponible ».
    Tous supérieurs à [L’impact] [ALL_GT] [2 - Moyen] > Impact>2 Tous les enregistrements dans lesquels le champ Impact a une valeur de 3 - Faible
    Tous supérieurs ou égaux [L’impact] [ALL_GTE] [2 - Moyen] >= impact>=2 Tous les enregistrements dans lesquels le champ Impact a une valeur de 2 (Moyen ) ou de 3 (faible).
    Tous inférieurs à [Nombre de réaffectations] [ALL_LT] [2] < reassignment_count&lt;2 Tous les enregistrements dans lesquels la valeur du champ Nombre de réaffectations est un nombre inférieur (mais non égal) à 2.
    Tous inférieurs ou égaux [Nombre de réaffectations] [ALL_LTE] [2] <= reassignment_count&lt;=2 Tous les enregistrements dans lesquels la valeur du champ Nombre de réaffectations est l’une des suivantes :
    • un nombre inférieur à 2
    • 2
    Tous sont différents de [L’impact] [ALL_NEQ] [1 - Élevé] != impact !=1 Tous les enregistrements dans lesquels la valeur du champ Impact est autre que 1 - Élevé.
    Tout n’est pas vide [L’impact] [ALL_NOTEMPTY] ALL_NOTEMPTY impactALL_NOTEMPTY Tous les enregistrements dans lesquels le champ Impact a une valeur.
    Tous, pas un seul [L’impact] [ALL_NOTONEOF] [1 - Élevé, 2 - Moyen] ALL_NOTONEOF impactALL_NOTONEOF1,2 Tous les enregistrements dans lesquels le champ Impact est renseigné par un élément autre que les valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen
    Tous les un [L’impact] [ALL_ONEOF] [1 - Élevé, 2 - Moyen] ALL_ONEOF impactALL_ONEOF1,2 Tous les enregistrements dans lesquels le champ Impact est renseigné par l’une des valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen
    N’importe lequel vide [Brève description] [ANY_EMPTY] ANY_EMPTY short_descriptionANY_EMPTY Tout enregistrement dans lequel il n’y a pas de valeur dans le champ Brève description .
    N’importe quel égal [Brève description] [ANY_EQ] [Stockage réseau non disponible] ANY_EQ short_description=Stockage réseau non disponible Tout enregistrement dans lequel la valeur du champ Brève description est égale à « Le stockage réseau n’est pas disponible ».
    Supérieur à [L’impact] [ANY_GT] [2 - Moyen] ANY_GT impactANY_GT2 Tous les enregistrements dans lesquels le champ Impact a une valeur de 3 - Faible
    Supérieur ou égal à [L’impact] [ANY_GTE] [2 - Moyen] ANY_GTE impactANY_GTE2 Tout enregistrement dans lequel le champ Impact a une valeur de 2 (Moyen ) ou de 3 (faible).
    Inférieur ou égal à [Nombre de réaffectations] [ANY_LT] [2] ANY_LT reassignment_countANY_LT2 Tout enregistrement dans lequel la valeur du champ Nombre de réaffectations est un nombre inférieur (mais non égal) à 2.
    Inférieur ou égal à [Nombre de réaffectations] [ANY_LTE] [2] ANY_LTE reassignment_countANY_LTE2 Tout enregistrement dans lequel la valeur du champ Nombre de réaffectations est l’une des suivantes :
    • un nombre inférieur à 2
    • 2
    N’importe lequel différent [L’impact] [ANY_NEQ] [1 - Élevé] ANY_NEQ impactANY_NEQ1 Tout enregistrement dans lequel la valeur du champ Impact est autre que 1 - Élevé.
    N’importe lequel non vide [L’impact] [ANY_NOTEMPTY] ANY_NOTEMPTY impactANY_NOTEMPTY Tout enregistrement dans lequel le champ Impact a une valeur.
    N’importe lequel n’est pas l’un des [L’impact] [ANY_NOTONEOF] [1 - Élevé, 2 - Moyen] ANY_NOTONEOF impactANY_NOTONEOF1,2 Tout enregistrement dans lequel le champ Impact est renseigné par un élément autre que les valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen
    N’importe lequel des [L’impact] [ANY_ONEOF] [1 - Élevé, 2 - Moyen] ANY_ONEOF impactANY_ONEOF1,2 Tout enregistrement dans lequel le champ Impact est renseigné par l’une des valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen
    CONCAT CONCAT(valeur) CONCAT CONCAT(« Bienvenue, « ,@context.session.utilisateur.prénom) Créer une nouvelle chaîne qui combine toutes les chaînes fournies en une seule
    VIDE EMPTY(valeur) VIDE EMPTY(@context.session.user.roles) Renvoie la valeur true si la valeur est nulle ou non définie
    SI SI (si, alors, sinon) SI IF(@context.props.bare,&quot;page nue »,&quot;page non nue ») Si la condition est true, renvoie alors la valeur. Si la condition est fausse, renvoie la valeur else.
    LEN LEN(liste) LEN LEN([1,2,3]) Renvoie le nombre d’éléments dans le tableau
    Choisir PICK(tableau, champ) Choisir PICK(@context.session.user.preferences,&quot;nom ») Crée un nouveau tableau où chaque élément est sélectionné dans le champ de chaque élément du tableau. Si le champ n’existe pas, l’élément du nouveau tableau sera VIDE
    Plage RANGE(de, à) Plage GAMME(1,10) Crée un tableau de nombres, en commençant par de, jusqu’à, en incrémentant par étape
    Somme SOMME(tableau) Somme SOMME([1,2,3]) En commençant par 0, ajoutez la valeur numérique de chaque élément du tableau et renvoyez la somme résultante
    Traduire TRADUIRE(texte) Traduire TRADUIRE(« Bon retour ») Renvoie la chaîne du premier argument une fois que les caractères spécifiés dans le deuxième argument sont convertis en caractères spécifiés dans le troisième argument.
    Là où vide [Brève description] [WHERE_EMPTY] WHERE_EMPTY short_descriptionWHERE_EMPTY Extrayez les enregistrements pour lesquels il n’y a pas de valeur dans le champ Brève description .
    À égalité [Brève description] [WHERE_EQ] [Stockage réseau non disponible] WHERE_EQ short_descriptionWHERE_EQnetwork stockage non disponible Extrayez les enregistrements dont le champ Brève description est égal à « Le stockage réseau n’est pas disponible ».
    Lorsqu’il est supérieur à [L’impact] [WHERE_GT] [2 - Moyen] WHERE_GT impactWHERE_GT2 Extraire les enregistrements dont le champ Impact a une valeur de 3 - Faible
    Cas où supérieur ou égal à [L’impact] [WHERE_GTE] [2 - Moyen] WHERE_GTE impactWHERE_GTE2 Extrayez les enregistrements dont le champ Impact a une valeur de 2 (Moyen ) ou de 3 (faible).
    Lorsque moins de [Nombre de réaffectations] [WHERE_LT] [2] WHERE_LT reassignment_countWHERE_LT2 Extraire les enregistrements dont la valeur dans le champ Nombre de réaffectations est un nombre inférieur (mais non égal) à 2.
    Cas où inférieur ou égal à [Nombre de réaffectations] [WHERE_LTE] [2] WHERE_LTE reassignment_countWHERE_LTE2 Extraire les enregistrements dont la valeur dans le champ Nombre de réaffectations est l’une des suivantes :
    • un nombre inférieur à 2
    • 2
    Cas où il est différent [L’impact] [WHERE_NEQ] [1 - Élevé] WHERE_NEQ impactWHERE_NEQ1 Extrayez les enregistrements dont la valeur dans le champ Impact est autre que 1 - Élevé.
    Là où n’est pas vide [L’impact] [WHERE_NOTEMPTY] WHERE_NOTEMPTY impactWHERE_NOTEMPTY Extrayez les enregistrements où le champ Impact a une valeur.
    S’il n’y en a pas un [L’impact] [WHERE_NOTONEOF] [1 - Élevé, 2 - Moyen] WHERE_NOTONEOF impactWHERE_NOTONEOF1,2 Extrayez les enregistrements dans lesquels le champ Impact est renseigné par un élément autre que les valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen
    Lorsque l’un des [L’impact] [WHERE_ONEOF] [1 - Élevé, 2 - Moyen] WHERE_ONEOF impactWHERE_ONEOF1,2 Extrayez les enregistrements dont le champ Impact est renseigné par l’une des valeurs suivantes :
    • 1 - Élevé
    • 2 - Moyen