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 ServiceNow site développeur.
Procédure
-
Ajoutez des composants à votre page.
Générateur d'IU est fourni avec une bibliothèque de composants à 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 présente les différentes façons d’ajouter un composant à une page.
Pour ajouter un composant Faites ce qui suit Directement depuis votre page À partir de 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 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 votre souris sur un conteneur de 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.
La configuration des composants signifie les personnaliser en fonction de vos besoins. Pour plus d’informations sur la configuration des composants, voir 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 à 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 Now Code Editor (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 à ce schéma.L’éditeur JSON low-code prend en charge les objets simples, les propriétés de tableau simple, 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 avec des valeurs vides ou nulles pour une expérience de modification simplifiée.
-
Lorsque vous travaillez avec 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, voir 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 à 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 l’insérer 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 correspond aux données qu’une page extrait pour afficher le contenu dans des composants. Les composants utilisent les ressources de données pour réutiliser les données et les configurations dans différentes expériences, et dynamiser les composants sur une page.
Fonctions prises en charge dans l’éditeur de formule du 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 plus d’informations sur l’éditeur de formule du 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 |
|---|---|---|---|---|
| Tout est vide | [Description courte][ALL_EMPTY] | ALL_EMPTY | short_descriptionALL_EMPTY | Tous les enregistrements dans lesquels il n’y a aucune valeur dans le champ Description brève . |
| Toutes égales par ailleurs | [Description courte][ALL_EQ][Stockage réseau indisponible] | ALL_EQ | short_description=stockage réseau indisponible | Tous les enregistrements dans lesquels la valeur du champ Description brève est égale à « Le stockage réseau n’est pas disponible ». |
| Tous supérieurs à | [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 | [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 non égaux à | [Impact][ALL_NEQ][1 - Élevé] | != | impact !=1 | Tous les enregistrements dans lesquels la valeur dans le champ Impact est autre que 1 : élevé. |
| Tous non vides | [Impact][ALL_NOTEMPTY] | ALL_NOTEMPTY | impactALL_NOTEMPTY | Tous les enregistrements dans lesquels le champ Impact a une valeur. |
| Tous sauf un de | [Impact][ALL_NOTONEOF][1 - Élevé, 2 - Moyen] | ALL_NOTONEOF | impactALL_NOTONEOF1,2 | Tous les enregistrements dans lesquels le champ Impact est renseigné par quelque chose, à l’exception des valeurs suivantes :
|
| Tous les un de | [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 | [Description courte][ANY_EMPTY] | ANY_EMPTY | short_descriptionANY_EMPTY | Tout enregistrement dans lequel il n’y a aucune valeur dans le champ Description brève . |
| Tous égaux | [Description courte][ANY_EQ][Stockage réseau indisponible] | ANY_EQ | short_description=stockage réseau indisponible | Tout enregistrement dans lequel la valeur du champ Description brève est égale à « Le stockage réseau n’est pas disponible ». |
| Supérieur à | [Impact][ANY_GT][2 - Moyen] | ANY_GT | impactANY_GT2 | Tous les enregistrements dans lesquels le champ Impact a une valeur de 3 : faible |
| Toutes supérieures ou égales à | [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 à | [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 :
|
| N’importe lequel non égal | [Impact][ANY_NEQ][1 - Élevé] | ANY_NEQ | impactANY_NEQ1 | Tout enregistrement dans lequel la valeur dans le champ Impact est autre que 1 : élevé. |
| Aucun non vide | [Impact][ANY_NOTEMPTY] | ANY_NOTEMPTY | impactANY_NOTEMPTY | Tout enregistrement dans lequel le champ Impact a une valeur. |
| Aucun n’est l’un de | [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 | [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 chaîne qui combine toutes les chaînes fournies en une seule |
| VIDE | VIDE(valeur) | VIDE | VIDE (@context.session.user.roles) | Renvoie la valeur true si la valeur est nulle ou indéfinie |
| SI | SI (si, alors, sinon) | SI | IF(@context.props.bare,"page nue »,"page non nue ») | Si la condition est vraie, renvoyez la valeur alors. Si la condition est faux, renvoyer 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,"name ») | 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’à, incrémentation par étape |
| Somme | SOMME(tableau) | Somme | SOMME([1,2,3]) | En partant de 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 traduits dans les caractères spécifiés dans le troisième argument. |
| Si vide | [Description courte][WHERE_EMPTY] | WHERE_EMPTY | short_descriptionWHERE_EMPTY | Extrayez les enregistrements où il n’y a aucune valeur dans le champ Description brève . |
| Cas où l’égalité | [Description courte][WHERE_EQ][Stockage réseau indisponible] | WHERE_EQ | short_descriptionWHERE_EQnetwork stockage indisponible | Extraire les enregistrements où le champ Description brève est égal à « Le stockage réseau n’est pas disponible ». |
| Si la valeur est supérieure à | [Impact][WHERE_GT][2 - Moyen] | WHERE_GT | impactWHERE_GT2 | Extraire les enregistrements où le champ Impact a une valeur de 3 : faible |
| Cas supérieur ou égal à | [Impact][WHERE_GTE][2 - Moyen] | WHERE_GTE | impactWHERE_GTE2 | Extraire les enregistrements où le champ Impact a une valeur de 2 (Moyen ) ou de 3 (Faible). |
| Si inférieur à | [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. |
| Condition inférieure ou égale à | [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 :
|
| Non égal | [Impact][WHERE_NEQ][1 - Élevé] | WHERE_NEQ | impactWHERE_NEQ1 | Extraire les enregistrements dont la valeur dans le champ Impact est autre que 1 : élevé. |
| S’il n’est pas vide | [Impact][WHERE_NOTEMPTY] | WHERE_NOTEMPTY | impactWHERE_NOTEMPTY | Extraire les enregistrements où le champ Impact a une valeur. |
| Lorsqu’aucun des éléments | [Impact][WHERE_NOTONEOF][1 - Élevé, 2 - Moyen] | WHERE_NOTONEOF | impactWHERE_NOTONEOF1,2 | Extraire les enregistrements où le champ Impact est renseigné par quelque chose, à l’exception des valeurs suivantes :
|
| Lorsque l’un des | [Impact][WHERE_ONEOF][1 - Élevé, 2 - Moyen] | WHERE_ONEOF | impactWHERE_ONEOF1,2 | Extraire les enregistrements où le champ Impact est renseigné par l’une des valeurs suivantes :
|