Skip to main content

Fonctionnalité dynamique pour les éléments de l'interface utilisateur

Conception d’une interface utilisateur dynamique

La conception d’une interface utilisateur dynamique est la pratique consistant à concevoir une interface utilisateur capable de s’adapter à la saisie de l’utilisateur. Lorsque vous concevez une interface utilisateur (UI) dynamique, vous contrôlez les champs que les utilisateurs voient et avec lesquels ils interagissent, selon des conditions précises. Le contenu d’une UI dynamique est une composante essentielle de la conception d’une interface utilisateur basée sur l'intention. Les choix effectués par les utilisateurs définissent les contrôles qui s’affichent, de sorte que seuls les champs pertinents sont présentés.

Par exemple, lorsqu’un client effectue une demande de prêt, il doit indiquer son état civil. Si le client indique être marié, l’application affiche des champs de saisie pour son/sa conjoint(e).

Au centre de l’image suivante, faites glisser la ligne verticale pour afficher la demande de prêt avec l’option Single (célibataire) ou Married (marié) sélectionnée.

L’utilisation d’une interface utilisateur dynamique présente plusieurs avantages : une réponse en temps réel au comportement de l’utilisateur final ; des fonctionnalités puissantes pour la plupart des interactions utilisateur ; un affichage plus épuré ; des actualisations de la page entière moins nombreuses, et donc une meilleure réactivité de l’interface.

Attributs dynamiques pour les éléments de l’UI

Pour configurer un comportement dynamique pour les éléments de l’UI, vous pouvez choisir quand afficher et désactiver les éléments.

Visible

Configurez la visibilité d’un champ ou d’une mise en page pour l'afficher lorsqu’une condition spécifique est remplie.

Par défaut, le paramètre de visibilité des éléments de l’UI est Always, ce qui signifie qu’ils s’affichent toujours à l’écran. Le tableau suivant contient d’autres options de paramétrage de la visibilité.

Paramètre de visibilité Comportement de l’élément de l’UI Exemple Description de l'exemple
Always S’affiche toujours.
Name field example
Vous souhaitez que le champ Name, dans lequel l’utilisateur saisit son nom, soit toujours visible.
Condition (expression) S’affiche lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai. Utilisez cette option pour les expressions courtes que vous n’avez pas besoin de réutiliser tout au long du dossier.
Visible condition expression with special meal selected

Lorsqu’un utilisateur sélectionne l’option Special meal (Repas spécial), la liste déroulante Type of meal (Type de repas) s’affiche. Autrement, la liste déroulante ne s’affiche pas. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.

Condition (when rule) S’affiche lorsqu’une règle When renvoie la valeur vrai. Utilisez cette option pour des règles When plus complexes ou que vous réutilisez à plusieurs reprises dans un type de dossier.
Visible when rule with married vs single selected
Vous créez une règle When, quand Marital Status = Married, que vous prévoyez de réutiliser. Vous référencez cette règle When de sorte que, lorsque l’utilisateur sélectionne Married pour Marital Status, le champ Name of Spouse (nom de conjoint) est visible. S’il n’indique pas être marié, le champ Name of Spouse n’est pas visible.  
If not blank S’affiche si le champ contient une valeur.
Visible if not blank with Next appointment date value
Lorsqu’ils confirment un rendez-vous médical, les patients peuvent choisir la date de leur prochain rendez-vous. Si le patient sélectionne une date, le champ Next appointment date (date du prochain rendez-vous) est visible. Si le patient ne sélectionne pas de date, le champ Next appointment date (date du prochain rendez-vous) est masqué.
If not zero S’affiche si le champ contient une valeur autre que zéro.
Visible if not zero with order total value
Lorsqu’un client réalise un achat en ligne, le montant total de la commande est calculé. Si le champ Order total est supérieur à zéro, il s’affiche. Si le montant de la commande est égal à zéro, le champ Order total est masqué. 

Désactivé

Configurez ce paramètre lorsqu’un champ ou une mise en page est désactivé(e) pour limiter l’accès d’un utilisateur à un champ. Un champ ou une mise en page est désactivé(e) lorsqu’une condition spécifique est remplie.

Par défaut, les éléments de l’UI ne sont jamais désactivés, ce qui signifie que les utilisateurs ont toujours accès aux éléments de l’UI. Le tableau suivant présente les options permettant de désactiver les éléments de l’UI.

Paramètre Disabled Comportement de l’élément de l’UI Exemple Description de l'exemple
Never Jamais désactivé
Name field example
Un utilisateur doit toujours pouvoir saisir son nom dans le champ Name.
Always Toujours désactivé
Always disable the Account type field
Un client choisit le type de compte lorsqu’il ouvre un compte bancaire. Une fois le compte créé, le client peut voir mais ne peut plus modifier le type de compte. Pour que l’UI se comporte ainsi, vous devez configurer le champ Account type de sorte qu’il soit toujours désactivé.
Condition (expression) Désactivé lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai.
Disable the Preferred contact method field based on a conditional expression
Lorsque l’utilisateur choisit Email pour Preferred Contact Method (méthode de contact préférée), le champ Mobile number (numéro de téléphone portable) est désactivé. Lorsque l’utilisateur choisit Text (SMS) pour Preferred Contact Method (méthode de contact préférée), le champ Email est désactivé. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.
Condition (when rule) Désactivé lorsqu’une règle When renvoie la valeur vrai.
Disable cosigner information based on a when rule
Vous référencez une règle When, when age is greater than or equal to 21 (âge égal ou supérieur à 21 ans) de sorte que lorsqu’un client âgé de 21 ans ou plus demande une carte de crédit, le champ Cosigner information (coordonnées du cosignataire) est désactivé.

Required

Configurez ce paramètre lorsqu’un champ ou une mise en page est requis(e) pour obliger l’utilisateur à préciser une valeur. Un champ ou une mise en page est requis(e) lorsqu’une condition spécifique est remplie.

Par défaut, les éléments de l’UI ne sont jamais requis, ce qui signifie que l’utilisateur peut poursuivre le traitement du dossier sans préciser de valeur. Le tableau suivant présente les options permettant de rendre obligatoires certains éléments de l’UI.

Paramètre Required Comportement de l’élément de l’UI Exemple  Description de l'exemple
Never Jamais obligatoire
Email field is never required, or always optional
Vous souhaitez que le champ Email soit facultatif.
Always Toujours obligatoire
Account type field is always required
Quand un client ouvre un compte bancaire, il doit choisir le type de compte. Le champ Account type (type de compte) est toujours requis.
Condition (expression) Requis lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai.
Preferred contact method is required based on a conditional expression
Lorsque l’utilisateur choisit Email pour Preferred Contact Method (méthode de contact préférée), le champ Email est requis. Lorsque l’utilisateur choisit Text (SMS) pour Preferred Contact Method (méthode de contact préférée), le champ Mobile number (numéro de téléphone portable) est requis. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.
Condition (when rule) Requis lorsqu’une règle When renvoie la valeur vrai.
Cosigner information is conditionally required
Vous référencez une règle When, when age is less than 21 (âge inférieur à 21 ans) de sorte que lorsqu’un client âgé de moins de 21 ans demande une carte de crédit, le champ Cosigner information (coordonnées du cosignataire) est requis. Autrement, la saisie des coordonnées du cosignatare est facultative.

Vérifiez vos connaissances avec l’interaction suivante.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

100% found this content useful

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice