Documentation du Widget Bouton

Le widget Bouton crée des boutons cliquables interactifs qui peuvent déclencher diverses actions dans votre interface. Ce widget offre des options de personnalisation étendues pour l'apparence, le comportement et la fonctionnalité.

Aperçu​

Le widget Bouton est un composant d'interface utilisateur polyvalent qui permet aux utilisateurs de déclencher des actions, de soumettre des formulaires, de naviguer entre les pages ou d'exécuter des fonctions personnalisées. Il supporte plusieurs styles visuels, tailles, icônes et options de positionnement.

Configuration de Base​

Paramètres Globaux​

Nom​

• Champ: Nom
• Description: Nom d'affichage du bouton
• Type: Saisie de texte
• Utilisation: Ce texte s'affiche sur le bouton et peut être traduit

Variable/Modèle​

• Champ: Variable/Modèle
• Description: Le modèle de données ou le nom de la variable associé à ce bouton
• Type: Saisie de texte
• Utilisation: Utilisé pour la liaison de données et la référence au bouton dans les scripts

Propriétés du Bouton​

Type de Bouton​

• Champ: Type de Bouton
• Options:
  • primary - Bouton d'action primaire (généralement bleu)
  • success - Bouton de succès/confirmation (généralement vert)
  • info - Bouton informatif (généralement bleu clair)
  • warning - Bouton d'avertissement (généralement orange/jaune)
  • danger - Bouton d'action destructrice (généralement rouge)
• Par défaut: primary

Options de Taille​

• Champ: Taille
• Options:
  • medium - Bouton de taille standard
  • small - Bouton plus petit
  • mini - Bouton de taille minimale
• Par défaut: medium

Alignement​

• Champ: Flottant
• Options:
  • left - Aligner le bouton à gauche
  • center - Centrer le bouton
  • right - Aligner le bouton à droite
• Par défaut: left

Configuration des Icônes​

Icône Préfixe​

• Champ: Icône Préfixe
• Description: Icône affichée avant le texte du bouton
• Type: Sélecteur d'icônes
• Utilisation: Choisissez parmi la bibliothèque d'icônes disponibles

Icône Suffixe​

• Champ: Icône Suffixe
• Description: Icône affichée après le texte du bouton
• Type: Sélecteur d'icônes
• Utilisation: Choisissez parmi la bibliothèque d'icônes disponibles

Configuration des Actions​

Action Au Clic​

Le bouton supporte une configuration d'action complète via un éditeur d'action dédié:

• Exécution de Script: Exécutez du code JavaScript personnalisé
• Soumission de Formulaire: Soumettez les données du formulaire parent
• Navigation: Accédez à d'autres pages ou URLs
• Appels API: Effectuez des requêtes HTTP vers des services externes
• Mises à Jour de Variables: Modifiez les variables de l'interface
• Appels de Fonction: Déclenchez des fonctions prédéfinies

Propriétés des Actions​

• SF_input: Accès au contexte d'entrée et aux données actuelles
• SF_currentIndex: Index actuel dans les contextes de boucle
• État de Chargement: Indicateur de chargement automatique lors de l'exécution d'action
• Gestion des Erreurs: Gestion intégrée des erreurs

Validation et Visibilité​

Validation Basée sur l'Écran​

Configurez le comportement du bouton sur différents écrans/contextes:

Disponible​

• Description: Contrôle si le bouton existe dans l'interface
• Type: Booléen ou expression conditionnelle
• Par défaut: true

Visible​

• Description: Contrôle la visibilité du bouton
• Type: Booléen ou expression conditionnelle
• Options:
  • Bascule simple (true/false)
  • Expression conditionnelle avancée utilisant des variables

Requis​

• Description: Exigence de validation (si partie d'un formulaire)
• Type: Booléen ou expression conditionnelle
• Contexte: S'applique uniquement lorsque le bouton fait partie de la validation du formulaire

Désactivé​

• Description: Contrôle si le bouton est interactif
• Type: Booléen ou expression conditionnelle
• Effet: Le bouton apparaît grisé et non-cliquable lorsqu'il est désactivé

Logique Conditionnelle Avancée​

Utilisez des expressions conditionnelles avec les variables de l'interface:

Style et Apparence​

Classes CSS​

• Champ: Classe
• Description: Classes CSS personnalisées pour le style
• Type: Saisie de texte (séparées par des virgules)
• Utilisation: Appliquez des styles personnalisés ou des classes de framework

Classes Dynamiques​

Style avancé basé sur des conditions:

• Configuration des Classes Dynamiques: Appliquez les classes conditionnellement
• Style Basé sur l'État: Styles différents pour différents états
• Classes Responsives: Classes qui s'adaptent à la taille de l'écran

Options de Mise en Page​

• Bloc vs Inline: Contrôlez le comportement de la mise en page du bouton
• Largeur: Paramètres de largeur personnalisés
• Hauteur: Paramètres de hauteur personnalisés

Exemples d'Utilisation​

Bouton Basique​

Bouton avec Icônes​

Bouton d'Action avec Démarrage de Processus​

Bouton Conditionnel​

Événements​

onClick​

• Déclencheur: Lorsque le bouton est cliqué
• Contexte: Fournit l'accès aux données actuelles et à l'état du formulaire
• Paramètres:
  • SF_input: Objet de contexte d'entrée
  • SF_currentIndex: Index de boucle actuel (le cas échéant)

États de Chargement​

• Chargement Automatique: Le bouton affiche un spinner de chargement lors des opérations asynchrones
• Désactivé Pendant le Chargement: Le bouton devient non-interactif lors de l'exécution d'une action

Meilleures Pratiques​

Conception des Actions​

1. Étiquettes Claires: Utilisez un texte de bouton descriptif
2. Types Appropriés: Associez le type de bouton à la gravité de l'action
3. Rétroaction de Chargement: Assurez-vous que les actions asynchrones affichent les états de chargement
4. Gestion des Erreurs: Mettez en œuvre une gestion appropriée des erreurs

Conception Visuelle​

1. Dimensionnement Cohérent: Utilisez des tailles cohérentes au sein des groupes de formulaires
2. Positionnement Logique: Placez les actions primaires de manière visible
3. Utilisation des Icônes: Utilisez les icônes pour améliorer, pas remplacer, le texte clair
4. Code Couleur: Suivez les conventions de couleur standard

Accessibilité​

1. Navigation au Clavier: Assurez-vous que les boutons sont accessibles au clavier
2. Support des Lecteurs d'Écran: Utilisez des noms de bouton significatifs
3. Gestion du Focus: Gestion appropriée du focus dans les formulaires
4. Contraste: Assurez-vous d'un contraste de couleur suffisant

Intégration du Formulaire​

1. Contexte de Validation: Considérez le rôle du bouton dans la validation du formulaire
2. Comportement de Soumission: Configurez la soumission appropriée du formulaire
3. Dépendances de Champs: Mettez en place les relations appropriées entre les champs

Fonctionnalités Avancées​

Intégration du Formulaire​

• Soumettre des Formulaires: Soumettez automatiquement les formulaires parents
• Déclencheurs de Validation: Déclenchez la validation du formulaire
• Dépendances de Champs: Réagissez aux modifications des autres champs du formulaire

Contexte de Boucle​

• Intégration de Boucle: Gestion spéciale au sein des boucles de données
• Accès à l'Index: Accès à l'itération de boucle actuelle
• Propriétés Dynamiques: Propriétés qui changent par élément de boucle

Style Personnalisé​

• Intégration du Thème: Intègre les paramètres de thème de l'interface
• Conception Réactive: S'adapte à différentes tailles d'écran
• CSS Personnalisé: Support du style personnalisé

Dépannage​

Problèmes Courants​

1. Le Bouton ne Répond Pas: Vérifiez si les conditions de désactivation ou de validation
2. Les Actions ne S'exécutent Pas: Vérifiez la configuration et les permissions des actions
3. Problèmes de Style: Vérifiez les conflits de classes CSS
4. États de Chargement: Assurez-vous que les actions asynchrones sont correctement gérées

Débogage​

• Console du Navigateur: Vérifiez les erreurs JavaScript
• Onglet Réseau: Surveillez les appels API lors des actions du bouton
• Inspection de l'État: Vérifiez les états et conditions des variables