---
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
---
Mettre à jour l'état d'un composant à l'aide des paramètres de l'état du client
===============================================================================
Mettre à jour l'état d'un composant à l'aide des paramètres de l'état du client {#ariaid-title1}
================================================================================================
* Rversion finale: Yokohama
*
* Mis à jour 30 janv. 2025
*
*  3 minutes de lecture
Créez et liez une valeur de paramètre d'état client à un composant dans Générateur d'IU. En ajoutant des valeurs personnalisées à vos composants, ces composants peuvent ensuite être automatiquement mis à jour via un script.
Avant de commencer
------------------
Rôle requis : ui_builder_admin
Pourquoi et quand exécuter cette tâche
--------------------------------------
Vous pouvez ajouter deux composants à une page, puis les connecter à l'aide des [paramètres d'état du client](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-client-state-parameter-ui-builder "Les variables de page qui sont définies pour une page afin de stocker un élément de données (un état client) uniquement pour cette page. Par exemple, créez trois paramètres d’état du client pour stocker l’entrée nécessaire à la création d’un enregistrement et spécifiez quand actualiser la liste. Les variables de page peuvent être mises à jour à l’aide de scripts clients et d’événements pour rendre une page dynamique.") et des [scripts](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-client-script-ui-builder "JavaScript côté client qui interagissent avec les composants et les paramètres d’état du client sur une page. Les scripts clients sont mappés aux événements en tant que gestionnaires d’événements dans Générateur d’IU."). Commencez par créer un paramètre d'état client, puis liez-le à l'un des composants, tel qu'une étiquette. Ensuite, vous créez un script client et le liez à un deuxième composant, tel qu'un bouton, à l'aide d'un gestionnaire d'événements. Lorsque vous créez le gestionnaire d'événements, liez-lui la valeur du paramètre d'état du client pour connecter les deux composants. Si vous cliquez sur un composant, l'état de l'autre composant est modifié. Les états clients sont utiles car vous pouvez ajouter des valeurs personnalisées à vos composants qui peuvent être automatiquement mises à jour via un script. Considérez un état client comme une catégorie pour stocker des informations spécifiques à la page.
Par exemple, vous pouvez ajouter un composant de bouton et d'étiquette à votre page. Le bouton modifie la valeur de l'étiquette, par exemple la couleur du texte.
Procédure
---------
1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU.
2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpé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éez ou ouvrez une page.
Pour plus d'informations, consultez [Gérer les Générateur d'IU pages et les variantes de page](https://servicenow-prod.fluidtopics.net/JoYi7yXR~EalfphqUewmrg "Découvrir le contenu d’une page .Générateur d'IU Comprendre les blocs de construction d’une Générateur d'IU page, tels que les mises en page en colonnes et les composants.").
4. Ajoutez deux composants à votre page.
Pour plus d'informations, consultez [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants.").
5. Pour définir un paramètre d'état du client avec une valeur associée, sélectionnez Paramètres d'état du client dans le panneau inférieur gauche.
6. Sélectionnez + Ajouter.
7. Entrez un nom pour le nom de l'état du client, le type et la valeur initiale.
L'état du client prend en charge les chaînes, les nombres, les booléens et JSON. Par exemple, vous pouvez entrer le nom sous la forme dynamic_label_value, le type sous la forme Chaîne et la valeur initiale sous la forme Valeur initiale.
8. Liez la valeur du paramètre de l'état du client à votre composant.
1. Sélectionnez le composant auquel vous souhaitez lier le paramètre d'état du client.
2. Ouvrez le panneau de configuration et sélectionnez l'onglet Configurer .
3. Pointez sur le champ auquel vous souhaitez lier les données et sélectionnez l'icône de liaison de données dynamiques (icône de ![liaison de données dynamique]()).
La fenêtre modale de liaison de données s'affiche.
4. Sélectionnez les états du client dans l'onglet Types de données .
5. Double-cliquez sur le script client que vous souhaitez lier au composant.
6. Sélectionnez Appliquer.
{#state-parameters__substeps_dvq_rh2_cqb}
9. Sélectionnez Enregistrer.
10. Lier la valeur de l'état du client à un composant et créer un script pour connecter le deuxième composant au premier.
1. Dans le volet gauche, sélectionnez l'icône + en regard de Scripts clients.
2. Entrez un nom de script qui décrit la tâche.
Par exemple, vous pouvez entrer Mettre à jour la valeur de l’étiquette , car c'est ce que vous voulez que le script fasse.
3. Dans Now Code Editor, ajoutez votre script.
Supposons que vous choisissiez une API à appeler et les paramètres de l'API, tels qu'un état et une valeur. Par exemple, vous pouvez appeler api.setState et inclure le dynamic_label_value comme premier paramètre, et une NOUVELLE VALEUR comme deuxième paramètre.
{#state-parameters__substeps_w4m_nq3_d4b}
11. Ajoutez un gestionnaire d'événements à votre deuxième composant pour appeler le nouveau script client que vous avez créé.
1. Sélectionnez le composant de votre page auquel vous souhaitez lier le script.
2. Sélectionnez l'onglet Événements.
3. Sélectionnez + Ajouter un nouveau gestionnaire d'événements.
4. Dans la section Scripts des gestionnaires d'événements, sélectionnez le script que vous avez créé et sélectionnez + pour l'ajouter en tant que gestionnaire d'événements pour le composant.
12. Sélectionnez Enregistrer.
13. Pour prévisualiser votre page et tester les composants pour vous assurer qu'ils sont connectés, sélectionnez Aperçu.
Lorsque vous sélectionnez un composant, l'état du second doit être modifié. Par exemple, sélectionnez le composant Bouton pour modifier le texte du composant Valeur de l'étiquette de Valeur initiale à NOUVELLE VALEUR.
Résultats
---------
Ce que vous avez fait dans cette procédure :
* Ajoutez deux composants à votre page.
* Définition d'un paramètre d'état du client qui avait une valeur initiale.
* Lier le paramètre d'état du client au premier composant.
* Création d'un script client qui met à jour une valeur définie par le paramètre d'état du client.
* Un gestionnaire d'événements a été créé pour le deuxième composant afin d'appeler le nouveau script client que vous venez de créer
* A sélectionné le deuxième composant afin qu'il modifie l'état du premier composant.
{#state-parameters__ul_njc_2q3_d4b}