Widget Étapes

Aperçu#Lien direct vers 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#Lien direct vers Configuration

Propriétés du Widget#Lien direct vers Propriétés du Widget

Nom#Lien direct vers Nom

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

Variable/Modèle#Lien direct vers 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#Lien direct vers 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#Lien direct vers Configuration de la Source de Données

Source de Données Statique#Lien direct vers 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#Lien direct vers Configuration des Étapes

Chaque étape requiert :

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

Ajout d'Étapes#Lien direct vers 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#Lien direct vers Source de Données Variable

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

Liaison de Variable#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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é#Lien direct vers Validation et Visibilité

Validation par Écran#Lien direct vers Validation par Écran

Configurez différents comportements pour chaque écran :

Disponible#Lien direct vers Disponible

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

Visible#Lien direct vers 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#Lien direct vers Requis

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

Désactiver#Lien direct vers Désactiver

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

Conditions Avancées#Lien direct vers Conditions Avancées

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

Style et Apparence#Lien direct vers Style et Apparence

Classes CSS#Lien direct vers 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#Lien direct vers 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#Lien direct vers Classes Dynamiques

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

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

Exemples de Configuration Statique#Lien direct vers Exemples de Configuration Statique

Bonnes Pratiques#Lien direct vers Bonnes Pratiques

Lignes Directrices de Design#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers Problèmes Courants

Les étapes ne s'affichent pas#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Référence API

Propriétés du Composant#Lien direct vers 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#Lien direct vers 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