Ajouter et configurer des composants
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 sur les composants sur le site développeur ServiceNow .
Procédure
-
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 présente 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. 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.
Arborescence de contenu Vous pouvez ajouter un composant à partir de l’arborescence de contenu de l’une des deux manières suivantes. - Sélectionnez +Ajouter du contenu sous un conteneur dans l’arborescence de contenu. Choisissez ensuite un composant dans la boîte à outils.
- Déplacez le périphérique de la 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.
-
Configurez maintenant les propriétés des composants que vous venez d’ajouter.
Configurer des composants signifie les personnaliser en fonction de vos besoins. Pour plus d’informations sur la configuration des composants, reportez-vous à la rubrique Next Experience Composants.
-
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 besoin de 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 plus d’informations sur la configuration des composants, reportez-vous à la section Modifier le code avec 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 du tableau. Vous pouvez également sélectionner Masquer les éléments non définis pour masquer les objets avec des valeurs vides ou nulles afin de simplifier l’expérience d’édition.
-
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.
Sélectionnez l’option Mise en page, Dimensionnement ou Espacement pour ouvrir un panneau flottant avec les options les plus courantes affichées. Faites glisser le panneau flottant vers un autre emplacement selon vos besoins. Un seul panneau flottant peut être ouvert à la fois.
Pour plus d’informations sur la configuration des composants, reportez-vous à la rubrique Next Experience Composants. -
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 besoin de modifier le code JSON.
- Facultatif :
Ajoutez d’autres composants à votre page en sélectionnant le + en haut ou en bas des composants de la page (le + devient + Ajouter).
- Sélectionnez le + en haut de votre composant pour ajouter un composant avant le composant existant ou sélectionnez le + en bas d’un composant pour insérer un composant après celui-ci.
- Faites glisser un composant de la liste des composants pour insérer le composant avant ou après un composant existant.
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 sont les données qu’une page extrait pour afficher le contenu dans les composants. Les composants utilisent les ressources de données comme un moyen de réutiliser les données et les configurations dans différentes expériences et de dynamiser les composants 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 formules 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 plus d’informations sur l’éditeur de formule de composant, reportez-vous à la section Personnaliser les Générateur d'IU pages à l’aide de composants.
| Étiquette d’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] | > | l’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 3 (Faible). |
| Tous inférieurs à | [Nombre de réaffectations] [ALL_LT] [2] | < | reassignment_count<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< = 2 | Tous les enregistrements dans lesquels la valeur du champ Nombre de réaffectations est l’une des suivantes :
|
| Tous sont différents de | [L’impact] [ALL_NEQ] [1 - Élevé] | != | l’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 une valeur autre que les valeurs suivantes :
|
| Tous les | [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 :
|
| 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 ». |
| N’importe quel 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 |
| Toute valeur supérieure ou égale à | [L’impact] [ANY_GTE] [2 - Moyen] | ANY_GTE | impactANY_GTE2 | Tout enregistrement dans lequel le champ Impact a une valeur de 2 (Moyen ) ou 3 (Faible). |
| N’importe quel inférieur à | [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 à 2 (mais pas égal à). |
| Toute valeur inférieure ou égale à | [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 :
|
| 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 n’est pas 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 de | [L’impact] [ANY_NOTONEOF] [1 - Élevé, 2 - Moyen] | ANY_NOTONEOF | impactANY_NOTONEOF1,2 | Tout enregistrement dans lequel le champ Impact est renseigné par quelque chose à l’exception des valeurs suivantes :
|
| 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 :
|
| CONCATÉNER | CONCAT(valeur) | CONCATÉNER | CONCAT(« Bienvenue, « ,@context.session.user.firstName) | 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,"page nue »,"pas la page 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 |
| Sélectionner | PICK(tableau, champ) | Sélectionner | PICK(@context.session.user.preferences,"nom ») | Crée un tableau dans lequel 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 | PLAGE (de, à) | Plage | PLAGE(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 à 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 après que les caractères spécifiés dans le deuxième argument ont été traduits 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 où il n’y a pas de valeur dans le champ Description brève . |
| Si égal | [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 ». |
| S’il est supérieur à | [L’impact] [WHERE_GT] [2 - Moyen] | WHERE_GT | impactWHERE_GT2 | Extraire les enregistrements où le champ Impact a une valeur de 3 : faible |
| Valeur supérieure ou égale à | [L’impact] [WHERE_GTE] [2 - Moyen] | WHERE_GTE | impactWHERE_GTE2 | Extrayez les enregistrements où le champ Impact a une valeur de 2 (Moyen ) ou 3 (Faible). |
| Où inférieur à | [Nombre de réaffectations] [WHERE_LT] [2] | WHERE_LT | reassignment_countWHERE_LT2 | Extrayez les enregistrements dont la valeur dans le champ Nombre de réaffectations est un nombre inférieur à 2 (mais différent de). |
| 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 :
|
| Cas 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é. |
| S’il n’est pas vide | [L’impact] [WHERE_NOTEMPTY] | WHERE_NOTEMPTY | impactWHERE_NOTEMPTY | Extraire les enregistrements où le champ Impact a une valeur. |
| Lorsqu’il n’y a pas l’un des | [L’impact] [WHERE_NOTONEOF] [1 - Élevé, 2 - Moyen] | WHERE_NOTONEOF | impactWHERE_NOTONEOF1,2 | Extraire les enregistrements où le champ Impact est renseigné par une valeur autre que les valeurs suivantes :
|
| Lorsque l’un des | [L’impact] [WHERE_ONEOF] [1 - Élevé, 2 - Moyen] | WHERE_ONEOF | impactWHERE_ONEOF1,2 | Extrayez les enregistrements où le champ Impact est renseigné par l’une des valeurs suivantes :
|