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#Lien direct vers 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#Lien direct vers Configuration de Base

Paramètres Globaux#Lien direct vers Paramètres Globaux

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

Type de Bouton#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Configuration des Icônes

Icône Préfixe#Lien direct vers 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#Lien direct vers 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#Lien direct vers Configuration des Actions

Action Au Clic#Lien direct vers 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#Lien direct vers 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é#Lien direct vers Validation et Visibilité

Validation Basée sur l'Écran#Lien direct vers Validation Basée sur l'Écran

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

Disponible#Lien direct vers Disponible

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

Visible#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Logique Conditionnelle Avancée

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

Style et Apparence#Lien direct vers Style et Apparence

Classes CSS#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Exemples d'Utilisation

Bouton Basique#Lien direct vers Bouton Basique

Bouton avec Icônes#Lien direct vers Bouton avec Icônes

Bouton d'Action avec Démarrage de Processus#Lien direct vers Bouton d'Action avec Démarrage de Processus

Bouton Conditionnel#Lien direct vers Bouton Conditionnel

Événements#Lien direct vers Événements

onClick#Lien direct vers 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#Lien direct vers É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#Lien direct vers Meilleures Pratiques

Conception des Actions#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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#Lien direct vers 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#Lien direct vers Fonctionnalités Avancées

Intégration du Formulaire#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers 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#Lien direct vers 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