Widget Switch

Aperçu#Lien direct vers Aperçu

Le widget Switch fournit un contrôle à bascule qui permet aux utilisateurs de basculer entre deux états (activé/désactivé, vrai/faux). Il est idéal pour les paramètres booléens, les bascules de fonctionnalités et les choix binaires dans les formulaires et les interfaces.

Configuration#Lien direct vers Configuration

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

Nom#Lien direct vers Nom

• Description : Libellé d'affichage pour le widget switch
• Type : Texte
• Requis : Oui
• Utilisation : Ce texte apparaît comme libellé à côté du contrôle switch

Variable/Modèle#Lien direct vers Variable/Modèle

• Description : La variable de liaison de données qui stocke l'état du switch
• Type : Chaîne de caractères
• Requis : Oui
• Format : Utilisez la convention de nommage camelCase (par exemple, isEnabled, showDetails)
• Note : Cette variable contiendra true lorsque le switch est activé, false lorsqu'il est désactivé

Valeur par Défaut#Lien direct vers Valeur par Défaut

• Description : État initial du switch lorsque l'interface se charge
• Type : Booléen
• Options :
  • true - Le switch démarre en position "activé"
  • false - Le switch démarre en position "désactivé"
• Par défaut : false

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

Action On Click#Lien direct vers Action On Click

• Description : Code JavaScript exécuté lorsque l'état du switch change
• Type : Code JavaScript
• Variables Disponibles :
  • SF_input.value - La nouvelle valeur du switch (true/false)
  • SF_input.SF_currentIndex - Index de boucle actuel (si à l'intérieur d'une boucle)
• Exemple :

Validation & Règles#Lien direct vers Validation & Règles

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

Le widget switch prend en charge différents états de validation sur plusieurs écrans/contextes :

Visible#Lien direct vers Visible

• Description : Contrôle quand le switch est affiché
• Options :
  • Booléen : true (toujours visible) / false (toujours caché)
  • Expression : Visibilité dynamique utilisant des variables
• Exemple d'Expression : {{userRole}} === 'admin'

Requis#Lien direct vers Requis

• Description : Rend le switch obligatoire pour la soumission du formulaire
• Options :
  • Booléen : true (requis) / false (optionnel)
  • Expression : Exigence dynamique basée sur des conditions
• Exemple d'Expression : {{agreementType}} === 'commercial'

Désactivé#Lien direct vers Désactivé

• Description : Contrôle si les utilisateurs peuvent interagir avec le switch
• Options :
  • Booléen : true (désactivé) / false (activé)
  • Expression : État de désactivation dynamique
• Exemple d'Expression : {{isProcessing}} === true

Règles de Validation#Lien direct vers Règles de Validation

Validation Personnalisée#Lien direct vers Validation Personnalisée

• Règle Requis : Appliquée automatiquement lorsque marqué comme requis
• Message Personnalisé : Message d'erreur personnalisé pour les échecs de validation
• Format : {field_name} is required (par défaut)

Fonctionnalités Avancées#Lien direct vers Fonctionnalités Avancées

Intégration aux Formulaires#Lien direct vers Intégration aux Formulaires

• Le switch s'intègre automatiquement à la validation du formulaire parent
• Participe aux cycles de soumission et de validation des formulaires
• Prend en charge les opérations de réinitialisation et d'effacement du formulaire

Support des Boucles#Lien direct vers Support des Boucles

• Peut être utilisé dans des sections répétitives
• Accès à l'index de boucle via SF_currentIndex
• Chaque instance maintient un état indépendant

Gestion des Écrans#Lien direct vers Gestion des Écrans

• Prend en charge plusieurs configurations d'écran
• Règles de validation différentes par écran
• Comportement réactif sur différents types d'appareils

Meilleures Pratiques#Lien direct vers Meilleures Pratiques

Conventions de Nommage#Lien direct vers Conventions de Nommage

• Utilisez des libellés descriptifs et orientés vers l'action
• Gardez les libellés concis mais clairs
• Utilisez une formulation positive ("Activer X" plutôt que "Désactiver X")

Valeurs par Défaut#Lien direct vers Valeurs par Défaut

• Définissez des valeurs par défaut sensées basées sur le cas d'utilisation le plus courant
• Considérez l'expérience utilisateur et la sécurité
• Documentez l'impact de chaque état

Validation#Lien direct vers Validation

• Utilisez la validation requise avec parcimonie pour les switches
• Fournissez un retour clair pour les erreurs de validation
• Considérez le flux utilisateur lors de la définition des conditions de visibilité

Accessibilité#Lien direct vers Accessibilité

• Assurez-vous que les libellés sont descriptifs et clairs
• Testez avec des lecteurs d'écran
• Maintenez un contraste adéquat pour les états du switch

Cas d'Utilisation Courants#Lien direct vers Cas d'Utilisation Courants

1. Bascules de Fonctionnalités : Activer/désactiver les fonctionnalités de l'application
2. Préférences Utilisateur : Sélection de thème, paramètres de notification
3. Options de Formulaire : Cases à cocher d'accord, sections optionnelles
4. Contrôles d'État : États actif/inactif, modes publié/brouillon
5. Affichage Conditionnel : Afficher/masquer les sections de formulaire associées

Dépannage#Lien direct vers Dépannage

Le Switch ne Change pas#Lien direct vers Le Switch ne Change pas

• Vérifiez que la variable du modèle est correctement liée
• Vérifiez les conditions d'état désactivé
• Assurez-vous qu'il n'y a pas de règles de validation conflictuelles

La Validation ne Fonctionne pas#Lien direct vers La Validation ne Fonctionne pas

• Confirmez que les règles requises sont correctement définies
• Vérifiez les paramètres de validation spécifiques à l'écran
• Vérifiez que l'intégration du formulaire est active

Les Actions ne s'Exécutent pas#Lien direct vers Les Actions ne s'Exécutent pas

• Validez la syntaxe JavaScript dans le gestionnaire onClick
• Vérifiez la console du navigateur pour les erreurs
• Assurez-vous des références de variables appropriées

Notes d'Intégration#Lien direct vers Notes d'Intégration

• Compatible avec tous les systèmes de validation de formulaire
• Prend en charge la liaison de valeur en temps réel
• S'intègre avec la logique d'affichage conditionnel
• Fonctionne dans des structures de formulaire complexes et des boucles