Widget Étapes

Aperçu​

Le widget Étapes est un indicateur visuel de progression qui affiche une séquence d'étapes dans un processus. Il montre la progression actuelle et permet aux utilisateurs de comprendre où ils se trouvent dans un workflow multi-étapes. Le widget est entièrement responsive et s'adapte aux différentes tailles d'écran.

Configuration​

Propriétés du Widget​

Nom​

• Champ : Nom
• Description : Un identifiant unique pour l'instance du widget
• Type : Saisie de texte
• Requis : Oui

Variable/Modèle​

• Champ : Variable/Modèle
• Description : Le modèle de données qui stocke l'index de l'étape actuelle
• Type : Saisie de texte
• Requis : Oui
• Par défaut : Généré automatiquement en fonction du nom du widget

Direction​

• Champ : Direction
• Description : Contrôle l'orientation de l'affichage des étapes
• Type : Liste déroulante
• Options :
  • horizontal : Les étapes sont affichées horizontalement (par défaut)
  • vertical : Les étapes sont affichées verticalement
• Utilisation : Choisir en fonction de l'espace disponible et des exigences de design

Configuration de la Source de Données​

Source de Données Statique​

Lors de l'utilisation de données statiques, configurez les étapes individuelles directement dans les paramètres du widget :

Configuration des Étapes​

Chaque étape requiert :

• Titre : Nom d'affichage de l'étape
• Description : Informations supplémentaires sur l'étape

Ajout d'Étapes​

1. Sélectionnez "Statique" comme source de données
2. Configurez chaque étape avec un titre et une description
3. Les étapes sont automatiquement numérotées à partir de 0

Source de Données Variable​

Pour du contenu dynamique, utilisez une source de données variable :

Liaison de Variable​

• Variable du Modèle : {model_name}_vb
• Propriété du Label : Configurez quel champ contient le titre de l'étape
• Propriété de Valeur : Configurez quel champ contient la description de l'étape

Configuration du Label​

• Champ : Label
• Description : Spécifie le nom de propriété pour les titres des étapes
• Options de Syntaxe :
  • Propriété simple : title
  • Expression dynamique : $.title + ' - ' + $.subtitle

Configuration de la Valeur​

• Champ : Valeur/Description
• Description : Spécifie le nom de propriété pour les descriptions des étapes
• Options de Syntaxe :
  • Propriété simple : description
  • Expression dynamique : $.description + ' (' + $.status + ')'

Validation et Visibilité​

Validation par Écran​

Configurez différents comportements pour chaque écran :

Disponible​

• Type : Booléen
• Description : Contrôle si le widget est disponible sur l'écran
• Par défaut : Vrai

Visible​

• Type : Booléen ou Expression
• Description : Contrôle la visibilité du widget
• Options :
  • Basculement booléen simple
  • Expression avancée utilisant des variables

Requis​

• Type : Booléen ou Expression
• Description : Rend le widget obligatoire pour la soumission du formulaire
• Par défaut : Faux

Désactiver​

• Type : Booléen ou Expression
• Description : Désactive l'interaction avec le widget
• Par défaut : Faux

Conditions Avancées​

Utilisez des expressions JavaScript avec des variables de modèle :

Style et Apparence​

Classes CSS​

• Champ : Class
• Description : Ajoutez des classes CSS personnalisées pour le style
• Type : Saisie de texte
• Utilisation : Noms de classes séparés par des espaces

Design Simple​

• Champ : Design Simple
• Description : Active une apparence visuelle simplifiée
• Type : Interrupteur à bascule
• Par défaut : Faux
• Effet : Lorsqu'activé, réduit la complexité visuelle pour une présentation plus épurée

Classes Dynamiques​

Configurez des classes CSS conditionnelles basées sur les données :

{
  "completed": "{{currentStep}} > 3",
  "error": "{{hasError}}",
  "highlight": "{{isImportant}}"
}

Exemples de Configuration Statique​

Bonnes Pratiques​

Lignes Directrices de Design​

1. Gardez les titres concis : Utilisez des titres courts et descriptifs
2. Fournissez des descriptions utiles : Ajoutez du contexte sans submerger
3. Choisissez la direction appropriée : Horizontal pour les mises en page larges, vertical pour les étroites
4. Considérez l'expérience mobile : Testez le comportement de l'accordéon sur les petits écrans

Performance​

1. Limitez le nombre d'étapes : Évitez trop d'étapes (maximum recommandé : 7-10)
2. Optimisez les données dynamiques : Utilisez des structures de données efficaces pour les sources variables
3. Mettez en cache les données statiques : Préconfigurez les étapes statiques lorsque possible

Accessibilité​

1. Utilisez des titres sémantiques : Assurez-vous que les lecteurs d'écran peuvent interpréter les étapes
2. Fournissez des descriptions claires : Aidez les utilisateurs à comprendre le but de chaque étape
3. Testez la navigation au clavier : Assurez la conformité en matière d'accessibilité

Dépannage​

Problèmes Courants​

Les étapes ne s'affichent pas​

• Vérifiez la configuration de la source de données
• Vérifiez la liaison de la variable du modèle
• Assurez-vous que la structure des données correspond au format attendu

Problèmes de mise en page responsive​

• Testez sur différentes tailles d'écran
• Vérifiez que les classes CSS n'entrent pas en conflit
• Vérifiez les contraintes de largeur du conteneur

Les données ne se mettent pas à jour​

• Vérifiez la syntaxe de liaison du modèle
• Recherchez les erreurs JavaScript dans les expressions
• Assurez-vous que la source de données est correctement connectée

Conseils de Débogage​

1. Utilisez les outils de développement du navigateur pour inspecter l'état du widget
2. Vérifiez la console pour les erreurs JavaScript
3. Vérifiez la structure des données dans l'onglet réseau
4. Testez d'abord avec une configuration simplifiée

Référence API​

Propriétés du Composant​

• prop : Propriétés du widget
• comp_model : Modèle de données
• comp_management : État de gestion
• models : Modèles disponibles
• management : Configuration de gestion
• visible : État de visibilité
• required : État requis
• disable : État désactivé
• class_config : Configuration des classes CSS

Options du Widget​

• direction : Direction de la mise en page
• classNames : Classes CSS
• defaultValue : Étape initiale
• remote : Type de source de données
• options : Données d'étapes statiques
• props.label : Chemin de la propriété label
• props.value : Chemin de la propriété value
• isSimple : Mode design simple