Widget Switch

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​

Propriétés du Widget​

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​

• 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​

• 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​

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​

Validation Basée sur l'Écran​

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

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​

• 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é​

• 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​

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​

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​

• 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​

• 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​

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​

• 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​

• 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é​

• 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​

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​

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​

• 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​

• 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​

• 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