Documentation du Widget Input

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

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

Types de Données#Lien direct vers Types de Données

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

Type String#Lien direct vers 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#Lien direct vers 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#Lien direct vers Configuration du Type de Données

Configuration String#Lien direct vers Configuration String

Masquage de Saisie#Lien direct vers 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#Lien direct vers Configuration Number

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

Règles de Validation Personnalisées#Lien direct vers 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#Lien direct vers Validation Basée sur l'Écran

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

Options de Style#Lien direct vers Options de Style

Style de Base#Lien direct vers Style de Base

Classes Dynamiques#Lien direct vers 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#Lien direct vers Fonctionnalités Avancées

Valeurs par Défaut Dynamiques#Lien direct vers 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#Lien direct vers Gestion des Événements

Événement onChange#Lien direct vers É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#Lien direct vers Travail avec les Actions et SF_input

Attachement d'Actions à l'Événement onChange#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Fonctionnalités d'Intégration

Intégration de Formulaire#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Exemples d'Utilisation

Saisie de Texte Basique#Lien direct vers Saisie de Texte Basique

Numéro de Téléphone avec Masque#Lien direct vers Numéro de Téléphone avec Masque

Saisie Numérique avec Contraintes#Lien direct vers Saisie Numérique avec Contraintes

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

Visibilité Conditionnelle#Lien direct vers Visibilité Conditionnelle

Conditions Simples#Lien direct vers Conditions Simples

Conditions Complexes#Lien direct vers Conditions Complexes

Meilleures Pratiques#Lien direct vers Meilleures Pratiques

Dénomination des Champs#Lien direct vers 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#Lien direct vers 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#Lien direct vers Expérience Utilisateur

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

Performance#Lien direct vers Performance

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

Dépannage#Lien direct vers Dépannage

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

Le widget input est compatible avec:

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

Composants Connexes#Lien direct vers 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