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 le configurer. 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 au choix. 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 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 : - 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.
Configurer 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 avec des 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 disposent d’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 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 avec des valeurs vides ou nulles pour une expérience de modification simplifiée.
-
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, voir Next Experience Composants. -
Pour les composants avec des 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.
- 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 Générateur d'IU de données dans correspond aux données qu’une page extrait pour afficher le contenu dans des 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 rendre les composants dynamiques 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 composant Générateur d'IU .
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 |
|---|---|---|---|---|
| Tout est vide | [Description brève][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 brève][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 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 de 3 : faible. |
| Tous inférieurs à | [Nombre de réaffectations][ALL_LT][2] | < | reassignment_count<2 | Tous les enregistrements dans lesquels la valeur dans le 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é] | != | l’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 brève][ANY_EMPTY] | ANY_EMPTY | short_descriptionANY_EMPTY | Tout enregistrement dans lequel il n’y a aucune valeur dans le champ Description brève . |
| N’importe lequel égal | [Description brève][ANY_EQ][Stockage réseau non disponible] | ANY_EQ | short_description=stockage réseau non disponible | 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 |
| Supérieur ou égal à | [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 dans le 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 est différent | [Impact][ANY_NEQ][1 - Élevé] | ANY_NEQ | impactANY_NEQ1 | Tout enregistrement dans lequel la valeur dans le champ Impact est autre que 1 : élevé. |
| N’importe lequel non vide | [Impact][ANY_NOTEMPTY] | ANY_NOTEMPTY | impactANY_NOTEMPTY | Tout enregistrement dans lequel le champ Impact a une valeur. |
| Aucun n’est l’un d’entre eux | [Impact][ANY_NOTONEOF][1 – Élevé, 2 – Moyen] | ANY_NOTONEOF | impactANY_NOTONEOF1,2 | Tout enregistrement dans lequel le champ Impact est renseigné par des éléments à l’exception des valeurs suivantes :
|
| N’importe lequel de | [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 | VIDE (valeur) | VIDE | VIDE (@context.session.user.roles) | Renvoie la valeur true si la valeur est nulle ou non définie |
| SI | SI(si, alors, autrement) | SI | IF(@context.props.bare,"page nue »,"page non nue ») | Si la condition est vraie, renvoyez la valeur alors. Si la condition est fausse, renvoyer 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 | CHOISISSEZ (@context.session.user.preferences,"name ») | Crée un tableau où chaque élément est prélevé 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 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 | TRANSLATE(« Bon retour ») | Renvoie la chaîne du premier argument après que les caractères spécifiés dans le deuxième argument sont traduits en caractères spécifiés dans le troisième argument. |
| Si vide | [Description brève][WHERE_EMPTY] | WHERE_EMPTY | short_descriptionWHERE_EMPTY | Extrayez les enregistrements où il n’y a aucune valeur dans le champ Description brève . |
| Si égal à | [Description brève][WHERE_EQ][Stockage réseau non disponible] | WHERE_EQ | short_descriptionWHERE_EQnetwork stockage indisponible | Extrayez 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 | Extrayez les enregistrements où le champ Impact a une valeur de 2 : moyen ou 3 : faible. |
| Cas 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 où inférieur ou égal à | [Nombre de réaffectations][WHERE_LTE][2] | WHERE_LTE | reassignment_countWHERE_LTE2 | Extrayez 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 | Extrayez 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. |
| Si 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 | Extrayez les enregistrements dont le champ Impact est renseigné par l’une des valeurs suivantes :
|