Sélecteur visuel

Le Sélecteur visuel d’Avonni transforme le choix d’options en une expérience ludique et interactive ! Au lieu de simples menus déroulants ou listes, il offre aux utilisateurs une manière visuellement engageante de sélectionner des éléments

Aperçu

Le sélecteur visuel est idéal pour les scénarios où la représentation visuelle des options améliore l'expérience utilisateur. Les fonctionnalités clés incluent :

• Options visuelles: Afficher des options avec des images, des icônes et du texte, les rendant plus attrayantes que de simples listes de texte.

• Sélection unique ou multiple: Configurez le composant pour permettre aux utilisateurs de sélectionner soit une seule option (comme des boutons radio), soit plusieurs options (comme des cases à cocher).

• Disposition personnalisable: Contrôlez l'apparence et l'agencement des options (par ex. ratio d'aspect, style).

• Basé sur les données: Remplissez les options à partir de diverses sources de données (Manuelle, Variable, Requête, Liste de sélection).

• Réactif: La ou les valeurs sélectionnées sont stockées dans une ressource Variable, ce qui les rend disponibles pour une utilisation dans d'autres parties de votre composant dynamique (filtres, formules, interactions).

Configuration du sélecteur visuel

Sélectionnez le composant Visual Picker sur la zone de travail pour accéder à ses propriétés dans le panneau Propriétés (panneau droit).

Propriétés de base

Ces propriétés contrôlent les données fondamentales et l'étiquetage du sélecteur visuel.

• Nom API: (Texte) Un identifiant unique pour cette instance de composant (ex. ProductCategoryPicker, PriorityPicker).

• Étiquette: (Texte) Le texte de l'étiquette affiché au-dessus ou à côté du sélecteur visuel. Exemple : "Sélectionnez une catégorie :", "Choisissez vos centres d'intérêt :".

• Aide au niveau du champ: (Texte, optionnel) Texte d'aide affiché à côté de l'étiquette.

• Valeur: (Texte ou Collection - Crucialement important) Cette propriété contient la ou les valeurs des éléments actuellement sélectionnés.

  • Sélection unique (Type radio) : Liez ceci à une ressource Variable de type Texte. La variable contiendra la valeur de l'élément sélectionné.

  • Sélection multiple (Type case à cocher) : Liez ceci à une ressource Variable de type Collection (généralement de type Texte). La variable contiendra une liste des propriétés de valeur des éléments sélectionnés.

• Espace réservé : L'espace réservé est affiché lorsqu'aucune option n'est sélectionnée.

Configuration de la source de données

• Source de données: Choisissez comment les options du sélecteur visuel sont peuplées :

  • Manuelle : Vous saisissez manuellement les options (étiquette, valeur, image/icône, etc.) directement dans les propriétés du composant. Convient pour des ensembles d'options petits et statiques.

  • Variable : Utilisez une ressource Variable (généralement une variable de collection) pour définir les options. Cela permet des options plus dynamiques.

  • Requête : Utilisez une source de données Avonni Query pour récupérer des options à partir d'un objet Salesforce.

  • Picklist : Utilisez une source de données Avonni Picklist pour remplir les options à partir d'un champ de liste de sélection Salesforce.

• Éléments/Options: Les paramètres disponibles dans cette section dépendent de la source de données.

  • Source de données manuelle : Si vous avez sélectionné "Manuelle" comme source de données : Ajoutez des options. Vous pouvez ajouter des valeurs telles que : étiquette, valeur, image ou icône.

  • Mappages de données (pour les sources de données Variable, Requête et Picklist) : Si vous choisissez une source de données Variable, Requête ou Picklist :

    • Étiquette: Mappez le champ de votre source de données qui contient le texte à afficher pour chaque option (par ex. Name pour un compte, ProductName pour un produit).

    • Valeur: Mappez le champ contenant l'identifiant unique de chaque option (par ex. Id pour un enregistrement Salesforce). Cela sera stocké dans la propriété Valeur lorsque l'utilisateur sélectionne.

    • Description: (Optionnel) Mappez un champ pour afficher un texte supplémentaire sous l'étiquette.

    • Source image/icône: (Optionnel) Mappez un champ pour afficher une image ou une icône pour chaque option.

Comportement et apparence

• Type: (Texte - Sélectionnez parmi les options) Détermine si l'utilisateur peut sélectionner une ou plusieurs options :

  • Radio : Permet uniquement la sélection unique (comme des boutons radio).

  • Case à cocher : Permet des sélections multiples (comme des cases à cocher).

• Plage de sélection (Type case à cocher uniquement) : Si le Type est case à cocher, vous pouvez définir :

  • Min : Le nombre minimum d'options que l'utilisateur doit sélectionner.

  • Max : Le nombre maximum d'options que l'utilisateur peut sélectionner.

• Ratio: (Texte - Sélectionnez parmi les options) Contrôle le ratio d'aspect des éléments visuels (forme). Exemples : 1:1 (carré), 2:3 (rectangle plus haut), 16:9 (grand écran). Cela affecte la façon dont les images/icônes sont affichées.

• Variante: (Texte - Sélectionnez parmi les options) Contrôle le style visuel des éléments sélectionnés :

  • Non recouvrable : Un indicateur visuel subtil (par ex. un contour ou une coche) est affiché pour les éléments sélectionnés.

  • Recouvrable : Un indicateur visuel plus prononcé (par ex. un remplissage de couleur d'arrière-plan) est affiché pour les éléments sélectionnés.

Propriétés générales du composant

• Désactivé: (Booléen - Case à cocher) Si activé, le sélecteur visuel est désactivé et l'utilisateur ne peut pas interagir avec.

• Lecture seule: (Booléen - Case à cocher) Si activé, l'utilisateur peut voir les options, mais il ne peut pas modifier la sélection.

• Requis: (Booléen - Case à cocher) Si activé, l'utilisateur doit sélectionner une option.

Interactions

• Au changement: Il s'agit de l'interaction principale pour le sélecteur visuel. Elle se déclenche chaque fois que la sélection de l'utilisateur change (ajout ou suppression d'une sélection).

  • Cas d'utilisation :

    • Mettre à jour d'autres composants en fonction de la sélection (par ex. filtrer un tableau de données).

    • Définir des valeurs de Variable.

    • Exécuter des flux.

    • Naviguer vers d'autres pages.

  • Accéder aux valeurs sélectionnées :

    • !VisualPickerName.value : renvoie une valeur unique ou une liste de valeurs.

Considérations clés

• Choix de la source de données: Choisissez la source de données (Manuelle, Variable, Requête, Picklist) qui correspond le mieux à vos besoins. Pour des données dynamiques, utilisez Requête ou Picklist.

• Interactions: Envisagez d'utiliser une interaction Au changement.

En résumé

Le composant Visual Picker est un composant flexible et interactif pour sélectionner des options