Paramètres de l'état du client

Utilisez les paramètres de l’état du client pour lier les valeurs aux configurations de composant. Lorsque la valeur du paramètre d’état client change, le composant se met à jour pour utiliser la nouvelle valeur.

Qu’est-ce qu’une interaction côté client ?

Dans les applications Web, tout ce qui se passe dans le navigateur est côté client. Les interactions côté client se produisent lorsque les utilisateurs interagissent avec les composants d’expérience en cliquant. Voici des exemples d’interactions côté client :

• Cliquer sur un bouton
• Application d’un filtre
• Tri d’une liste
• Actualisation d’une liste
• Fourniture de résultats de recherche en ligne
• Alerter un utilisateur de données incomplètes ou incorrectes

Les utilisateurs interagissent parfois avec les pages afin de naviguer vers d’autres pages. Dans d’autres cas, les utilisateurs souhaitent mettre à jour le contenu, l’apparence ou les données d’une page. Plutôt que d’actualiser la page entière, les interactions côté client ne mettent à jour que les parties affectées d’une page.

Par exemple, un utilisateur peut trier une liste en cliquant sur un en-tête de colonne. Le tri ne redessine que la liste et non la page entière.

La création d’interactions côté client implique Générateur d'IU :

• Paramètres de l'état du client
• Events
• Scripts clients

Que sont les paramètres de l’état du client ?

Les paramètres de l’état du client sont des variables de page. Définissez et configurez un paramètre d’état du client, puis utilisez la valeur pour configurer les composants. Les paramètres d’état du client centralisent la gestion des valeurs de configuration pour les composants de page. Générateur d'IU utilise les paramètres de l’état du client pour améliorer l’expérience utilisateur et fournir un contenu et des services personnalisés.

Exemple de paramètres de l’état du client

Dans l’exemple, une page possède un paramètre d’état client appelé couleur. Deux des trois composants sont configurés pour utiliser le paramètre d’état du client de couleur. Si la couleur est définie sur orange, les composants sont orange. Si la couleur est définie sur violet, les composants sont violets. Si la couleur est définie sur vert, les composants sont verts. Le paramètre d’état du client est un emplacement unique pour gérer une valeur commune pour la page. Sans le paramètre d’état du client, chaque composant qui utilise une valeur devrait être mis à jour individuellement si cette valeur change.

Par exemple, une expérience Web stocke la couleur primaire utilisée par les composants dans le paramètre d’état du client de couleur. Lorsque les composants sont configurés pour utiliser le paramètre d’état client, la modification de la valeur du paramètre d’état client met à jour les composants vers la nouvelle valeur.

Des boutons peuvent être ajoutés à l’expérience pour permettre aux utilisateurs de sélectionner une couleur pour les composants de la page. D’un simple clic, un utilisateur peut modifier simultanément la couleur de tous les composants d’une page. Stockez le choix de couleur de l’utilisateur dans un paramètre d’état client, puis utilisez le paramètre d’état client pour configurer les composants de la page. Lorsqu’une interaction de l’utilisateur entraîne la modification de la valeur du paramètre d’état du client, les composants de la page sont mis à jour en temps réel.

Panneau d’état du client

Le panneau d’état du client est réduit par défaut. Cliquez sur l’icône d’état du client dans la barre de navigation de gauche pour ouvrir le panneau d’état du client.

Le panneau d’état du client contient deux sections :

• Paramètres de l’état du client : paramètres de l’état du client pour la page
• Aperçu de l’état du client : JSON pour les paramètres d’état du client de la page

Création de paramètres de l'état du client

Pour ajouter un paramètre d’état client à une page, cliquez sur le bouton + Ajouter dans la section Paramètres d’état client.

Les paramètres de l’état du client ont trois champs de configuration.

• Nom : nom du paramètre. Les noms ne doivent pas inclure d’espaces
• Type : type du paramètre
  • Chaîne
  • Numéro
  • Booléen
  • JSON
• Valeur initiale : valeur par défaut du paramètre

Dans l’exemple, le panneau d’état du client comporte deux paramètres d’état du client.

• occasionTypeQuery est une chaîne sans valeur par défaut
• occasionListTitle est une chaîne dont la valeur par défaut est Toutes les occasions spéciales

Utilisation des paramètres de l’état du client

Une fois que vous avez un paramètre d’état client, que pouvez-vous en faire ? Pour utiliser les paramètres d’état du client, liez d’abord la valeur du paramètre d’état du client aux configurations de composant. Lorsque la valeur du paramètre d’état client change, le composant se met à jour pour utiliser la nouvelle valeur. Une façon de modifier la valeur d’un paramètre d’état client consiste à utiliser des gestionnaires d’événements.

Dans l’exemple de page Création de paramètres d’état du client, deux paramètres d’état du client ont été ajoutés à l’application Occasions spéciales : occasionTypeQuery et occasionListTitle. Le paramètre occasionTypeQuery n’a pas de valeur par défaut et occasionListTitle a la valeur par défaut Toutes les occasions spéciales. Ces paramètres d’état du client sont appliqués au composant Liste d’occasions pour définir le titre et le filtre de la liste. Un bouton sera utilisé pour mettre à jour les valeurs de ces paramètres d’état du client afin de mettre à jour dynamiquement la liste.

Liaison des paramètres de l’état du client

Les valeurs des paramètres de l’état du client peuvent être liées aux champs de configuration des composants de la même manière que le contexte de la page, la charge utile et les ressources de données. Lors de la configuration des composants, survolez un champ, puis sélectionnez le bouton de liaison de données dynamiques (icône de pour lier un paramètre d’état de client à la valeur du champ. Dans l’exemple, le bouton Liaison de données dynamiques est mis en surbrillance pour le champ de filtre du composant Liste d’occasions.

Le caractère @ indique la liaison de données et l’objet d’état contient les paramètres d’état du client. Sélectionnez un paramètre d’état du client dans la liste de choix. L’exemple montre la sélection du paramètre d’état du client occasionTypeQuery . La valeur par défaut du paramètre d’état du client occasionTypeQuery est vide, par conséquent aucun filtre n’est appliqué par défaut.

Le titre du composant est défini de la même manière : sélectionnez le bouton de liaison de données dynamiques pour le champ Titre ou tapez @, puis sélectionnez le paramètre d’état du client state.occasionListTitle dans la liste de choix. La valeur par défaut du paramètre d’état du client occasionListTitle est Toutes les occasions spéciales. L’exemple montre Titre et Filtre configurés pour utiliser les paramètres d’état du client.

Lorsque les deux paramètres d’état du client sont appliqués, aucun filtre n’est appliqué à la liste et le titre est Toutes les occasions spéciales.

Les valeurs des paramètres d’état du client occasionTypeQuery et occasionListTitle restent inchangées jusqu’à ce qu’un utilisateur interagisse avec un composant qui modifie la valeur du paramètre d’état du client.

Modifier les valeurs des paramètres de l’état du client

Utilisez le gestionnaire d’événements Mettre à jour le paramètre d’état du client pour modifier la valeur d’un paramètre d’état du client pendant l’exécution. Le gestionnaire d’événements Mettre à jour le paramètre d’état du client a deux propriétés : le paramètre d’état du client à mettre à jour et la nouvelle valeur à utiliser pour le paramètre d’état du client.

Par exemple, un bouton Birthdays (Anniversaires ) est ajouté au-dessus du composant Occasion List (Liste d’occasions ) dans l’application Special Occasions (Occasions spéciales ). L’objectif de ce bouton est de changer le Titre de la liste en Tous les anniversaires et d’ajuster le filtre de la liste pour n’afficher que les anniversaires. Pour atteindre cet objectif, deux gestionnaires d’événements sont mappés à l’événement Bouton cliqué pour le bouton, un pour modifier le paramètre d’état du client occasionTypeQuery et un autre pour modifier le paramètre d’état du client occasionListTitle . L’image montre le gestionnaire d’événements Mettre à jour le paramètre d’état du client configuré pour définir le paramètre d’état du client occasionTypeQuery sur special_occasion=birthday, ce qui permet de filtrer la liste pour afficher uniquement les anniversaires.

Lorsque l’événement Bouton sélectionné est mappé aux gestionnaires d’événements pour mettre à jour les paramètres d’état du client occasionTypeQuery et occasionListTitle , un clic sur le bouton met à jour les paramètres d’état du client, ce qui met automatiquement à jour le composant de liste d’occasions avec les nouvelles valeurs.

• Utilisation des paramètres de l’état du client dans Générateur d'IU
  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.
• Mettre à jour l’état d’un composant à l’aide des paramètres de l’état du client
  Créez et liez une valeur de paramètre d’état de 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.