---
sourceDocument: Yokohama Créer ou modifier des applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Yokohama Créer ou modifier des applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Utilisation des paramètres d'état du client dans Générateur d'IU
================================================================

Utilisation des paramètres d'état du client dans Générateur d'IU {#ariaid-title1}
=================================================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes de lecture

Créez un compteur simple en ajoutant le composant de texte stylisé et deux boutons à une page d'expérience. Utilisez un paramètre d'état du client pour implémenter la fonctionnalité de sorte que lorsque les boutons sont sélectionnés, le nombre augmente ou diminue.

Avant de commencer
------------------

Rôle requis : ui_builder_admin

Procédure
---------

1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU.
2. Ouvrez une expérience pour travailler ou créez une expérience en sélectionnant Créer \> expérience.  
   Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences.
3. [Créer une page dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs.") ou ouvrez une page.
4. Ajoutez une mise en page en colonne en sélectionnant + Ajouter du contenu dans l'arborescence de contenu sous Corps.
5. Dans l'onglet Mises en page , sélectionnez Deux colonnes.
6. Ajoutez le premier composant en sélectionnant + Ajouter du contenu dans l'arborescence de contenu sous la colonne 1.  
   1. Dans Rechercher, tapez <kbd class="ph userinput">sty</kbd>.
   2. Sélectionnez le composant Texte stylisé .  
   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement.  
   {#create-simple-counter-component__substeps_ryf_bc3_x1c}
7. Ajoutez le deuxième composant en sélectionnant + Ajouter du contenu dans l'arborescence de contenu sous la colonne 2.
   1. Dans Rechercher, tapez <kbd class="ph userinput">le bouton</kbd>.
   2. Bouton Sélectionner iconique.  
   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement.
   4. Dans Icône, sélectionnez Flèche carrée vers le haut Remplir.  
   {#create-simple-counter-component__substeps_cxn_2c3_x1c}
8. Ajoutez le troisième composant en pointant vers le bouton d'icône 1 dans l'arborescence de contenu, en sélectionnant l'icône Menu , puis en sélectionnant Ajouter après.  
   1. Dans Rechercher, tapez <kbd class="ph userinput">le bouton</kbd> comme vous l'avez fait à l'étape précédente.
   2. Sélectionnez Bouton iconique comme vous l'avez fait à l'étape précédente.
   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement comme vous l'avez fait à l'étape précédente.
   4. Dans Icône, sélectionnez cette fois une icône différente, celle nommée Flèche carrée Remplissage vers le bas.  
   {#create-simple-counter-component__substeps_ebk_jc3_x1c}
9. Sélectionnez Enregistrer.  
   Le composant de texte stylisé et les deux composants d'icône de bouton sont enregistrés et apparaissent sur la scène.

10. Ajoutez un paramètre d'état client en accédant à Données et scripts, en pointant vers Paramètres d'état client et en sélectionnant l'icône Ajouter nouveau (plus).
    1. Changez le nom en saisissant <kbd class="ph userinput">le nombre</kbd>.
    2. Remplacez le type par numéro.
    3. Définissez la valeur initiale en saisissant le nombre <kbd class="ph userinput">0</kbd>.
    4. Sélectionnez le X pour fermer la fenêtre.  
    {#create-simple-counter-component__substeps_o1t_qc3_x1c}
11. Lier le composant de texte stylisé au paramètre d'état du client.
    1. Sélectionnez le composant de texte stylisé sur l'étape.
    2. Dans le panneau de configuration, pointez sur le champ Texte et sélectionnez l'icône Lier les données ou utiliser des scripts .  
    3. Dans l'onglet Types de données , sélectionnez États du client.
    4. Double-cliquez sur la pastille de comptage .
    5. Sélectionnez Appliquer.  

       Le champ Texte change pour compter.
    {#create-simple-counter-component__substeps_akq_xc3_x1c}
12. Configurez maintenant les boutons pour augmenter ou diminuer le nombre.
    1. Sélectionnez le bouton supérieur sur l'étape.
    2. Dans le panneau de configuration, sélectionnez l'onglet Événements .
    3. Sélectionnez + Ajouter un gestionnaire d'événements.
    4. Sous Gestionnaires d'événements au niveau de la page, sélectionnez Mettre à jour le paramètre de l'état du client.
    5. Dans Nom du paramètre de l'état du client, sélectionnez nombre.
    6. Pointez sur le champ Nouvelle valeur et sélectionnez l'icône Lier les données ou utiliser des scripts .  
    7. Dans l'onglet Types de données , sélectionnez États du client.
    8. Double-cliquez sur la pastille de comptage .
    9. Sélectionnez l'onglet Formules .
    10. Dans la liste, sélectionnez Math.
    11. Double-cliquez sur la pastille ADR .
    12. Dans la pastille de droite en haut, supprimez le texte et entrez <kbd class="ph userinput">1</kbd>.  
    13. Sélectionnez Appliquer.
    14. Sélectionnez Ajouter.
    {#create-simple-counter-component__substeps_apn_bd3_x1c}
13. Configurez maintenant le deuxième bouton en suivant le même processus que vous avez utilisé pour le premier bouton, mais sélectionnez la pilule SUB au lieu de la pastille ADD.
    1. Sélectionnez le bouton inférieur sur l'étape.
    2. Dans le panneau de configuration, sélectionnez l'onglet Événements .
    3. Sélectionnez + Ajouter un gestionnaire d'événements.
    4. Sous Gestionnaires d'événements au niveau de la page, sélectionnez Mettre à jour le paramètre de l'état du client.
    5. Dans Nom du paramètre de l'état du client, sélectionnez nombre.
    6. Pointez sur le champ Nouvelle valeur et sélectionnez l'icône Lier les données ou utiliser des scripts .
    7. Dans l'onglet Types de données , sélectionnez États du client.
    8. Double-cliquez sur la pastille de comptage .
    9. Sélectionnez l'onglet Formules .
    10. Dans la liste, sélectionnez Math.
    11. Double-cliquez sur la pastille SUB .
    12. Dans la pastille de droite en haut, supprimez le texte et tapez <kbd class="ph userinput">1</kbd>.
    13. Sélectionnez Appliquer.
    14. Sélectionnez Ajouter.
    {#create-simple-counter-component__substeps_g1s_kd3_x1c}
14. Testez le compteur en sélectionnant Aperçu.
15. Sélectionnez le bouton flèche vers le haut pour augmenter le nombre et le bouton flèche vers le bas pour le réduire.  
{#create-simple-counter-component__steps_dms_bg3_x1c}

Résultats
---------

Vous avez ajouté un composant de bouton pour augmenter le nombre d'unités et un autre composant de bouton pour le diminuer d'une unité. Vous avez ajouté le composant de texte stylisé pour afficher le nombre au fur et à mesure qu'il augmentait et diminuait.

Pour des informations techniques détaillées sur le composant de bouton, consultez [Vue d'ensemble du bouton et API](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-button/overview).

Pour des informations techniques détaillées sur le composant de texte stylisé, voir [Vue d'ensemble du texte stylisé](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-stylized-text/overview).