Documentation du Widget Input

Aperçu​

Le widget Input est un composant de formulaire polyvalent qui permet aux utilisateurs de saisir et de modifier du texte, des chiffres et d'autres types de données. Il fournit des options de validation, de formatage et de style complètes pour créer des interfaces de formulaire robustes.

Configuration de Base​

Paramètres Globaux​

Types de Données​

Le widget Input supporte deux types de données principaux:

Type String​

• Cas d'Utilisation: Saisie de texte, chaînes formatées, saisies masquées
• Fonctionnalités:
  • Masquage de saisie pour les entrées formatées
  • Règles de validation de texte
  • Texte placeholder personnalisé

Type Number​

• Cas d'Utilisation: Saisie numérique avec validation
• Fonctionnalités:
  • Contraintes de valeur Min/Max
  • Contrôle d'incrément d'étape
  • Paramètres de précision pour les décimales

Configuration du Type de Données​

Configuration String​

Masquage de Saisie​

Utilisez des masques pour formater automatiquement la saisie utilisateur:

Exemples de Masques:

• Numéro de Téléphone: + ## # ## ## ## ##
• Carte de Crédit: #### #### #### ####
• Date: ##/##/####

Configuration Number​

Validation et Règles​

Règles de Validation Personnalisées​

Ajoutez des règles de validation personnalisées avec:

• Type de Règle: Sélectionnez parmi les modèles de validation prédéfinis
• Valeur: Paramètre de validation (par ex., longueur minimale)
• Message: Message d'erreur personnalisé à afficher

Validation Basée sur l'Écran​

Configurez différents comportements de validation pour différents écrans:

Options de Style​

Style de Base​

Classes Dynamiques​

Configurez les classes qui changent selon les conditions:

• Utilisez l'éditeur de classes dynamiques
• Référencez les variables de formulaire et les données
• Appliquez le style conditionnel

Fonctionnalités Avancées​

Valeurs par Défaut Dynamiques​

Définissez les valeurs par défaut qui peuvent référencer d'autres données de formulaire:

Gestion des Événements​

Événement onChange​

Déclenché lorsque la valeur de l'entrée change:

• Accédez à la nouvelle valeur via le paramètre d'événement
• Applique automatiquement les contraintes min/max pour les nombres
• Peut déclencher des actions et des fonctions personnalisées

Travail avec les Actions et SF_input​

Attachement d'Actions à l'Événement onChange​

Vous pouvez attacher des actions personnalisées à l'événement onChange du widget input pour répondre aux changements de valeur en temps réel. C'est utile pour:

• Mettre à jour d'autres champs en fonction de la valeur de saisie
• Déclencher des calculs ou des validations
• Récupérer les données associées du backoffice
• Implémenter les mises à jour en cascade des champs

Comment Attacher une Action​

1. Accédez à la section Global dans la configuration du widget
2. Trouvez le bouton d'événement On Change
3. Vous pouvez attacher des actions au widget
4. Le système exécutera votre code à chaque fois que la valeur de l'entrée change

Accès aux Valeurs avec SF_input​

Lorsque vous travaillez avec les événements onChange, vous avez accès à l'objet SF_input qui contient les informations sur le changement de valeur:

Structure de SF_input pour le Widget Input​

{
  value: /* La valeur après le changement */,
  SF_currentIndex:  /*  L'index de la boucle où le changement s'est opéré, C'est seulement disponible pour les Inputs dans une boucle */
}

Meilleures Pratiques pour les Actions​

1. Gardez les Actions Légères: Évitez les calculs lourds dans les événements onChange
2. Débounce des Appels API: Si vous récupérez des données, envisagez le débounce pour éviter les requêtes excessives
3. Gestion des Erreurs: Incluez toujours la gestion des erreurs dans votre code d'action
4. Valider l'Entrée: Vérifiez si les valeurs existent avant de les utiliser
5. Utilisez des Noms de Variables Clairs: Rendez votre code lisible pour la maintenance future

Support des Devises​

Gestion spéciale pour les entrées de devises:

• Formatage automatique selon la locale
• Affichage du symbole de devise
• Contrôle de la précision décimale

Fonctionnalités d'Intégration​

Intégration de Formulaire​

Lorsqu'il est utilisé dans un formulaire:

• Validation automatique du formulaire
• Gestion du soumettre/réinitialiser
• Gestion de l'état du formulaire parent

Intégration de Boucle​

Lorsqu'il est utilisé dans les boucles:

• Accès à l'index de boucle via SF_currentIndex
• Validation indépendante par élément de boucle
• Dénomination dynamique des champs

Intégration d'Action​

Configurez les actions onClick:

• Fonctions JavaScript personnalisées
• Appels API et opérations de données
• Interactions de navigation et d'interface utilisateur

Exemples d'Utilisation​

Saisie de Texte Basique​

Numéro de Téléphone avec Masque​

Saisie Numérique avec Contraintes​

Valeur par Défaut Dynamique​

Visibilité Conditionnelle​

Conditions Simples​

Conditions Complexes​

Meilleures Pratiques​

Dénomination des Champs​

• Utilisez des noms de variables descriptifs
• Suivez les conventions de dénomination cohérentes
• Évitez les espaces et les caractères spéciaux dans les noms de variables

Validation​

• Fournissez des messages d'erreur clairs
• Utilisez les types de données appropriés
• Définissez des contraintes min/max raisonnables

Expérience Utilisateur​

• Utilisez des placeholders significatifs
• Groupez les champs connexes logiquement
• Fournissez un retour immédiat sur la validation

Performance​

• Évitez les expressions de valeur par défaut complexes
• Utilisez des règles de validation efficaces
• Minimisez les re-rendus inutiles

Dépannage​

Problèmes Courants​

1. Validation ne Fonctionnant Pas

   • Vérifiez la configuration du champ obligatoire
   • Vérifiez la syntaxe des règles de validation personnalisées
   • Assurez-vous d'une configuration appropriée de la validation d'écran

2. Masque Non Appliqué

   • Vérifiez la syntaxe du masque utilisant les caractères pris en charge
   • Assurez-vous que le type de données de chaîne est sélectionné
   • Vérifiez les styles CSS en conflit

3. Valeurs par Défaut ne se Chargeant Pas

   • Vérifiez que les références de variables existent
   • Vérifiez la syntaxe de l'expression
   • Assurez-vous que les données référencées sont disponibles

4. Problèmes de Style

   • Vérifiez les noms des classes CSS
   • Vérifiez les valeurs de largeur/hauteur
   • Assurez-vous d'une spécificité CSS appropriée

Conseils de Débogage​

• Utilisez les outils de développement du navigateur pour inspecter le HTML généré
• Vérifiez la console pour les erreurs JavaScript
• Vérifiez la liaison des données de formulaire dans Vue DevTools
• Testez les règles de validation indépendamment

Compatibilité des Navigateurs​

Le widget input est compatible avec:

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Composants Connexes​

• Widget Textarea: Pour la saisie de texte multi-ligne
• Widget Select: Pour les sélections déroulantes
• Widget Date: Pour la saisie de date/heure
• Widget Currency: Pour la gestion spécialisée des devises