Widget Textarea

Le widget Textarea permet aux utilisateurs de saisir du texte multiligne dans les formulaires et les interfaces. Il fournit des options de configuration étendues pour la validation, le style et la personnalisation du comportement.

Configuration de Base#Lien direct vers Configuration de Base

• Nom : Libellé d'affichage pour le champ textarea
• Variable/Modèle : Le nom de la variable utilisé pour stocker et récupérer la valeur du textarea
• Valeur par Défaut : Contenu texte pré-rempli (prend en charge les valeurs dynamiques). Dans le panneau, le champ commence à 5 lignes et s'agrandit jusqu'à 10, avec le placeholder Text or =formula. C'est le même éditeur que sur le widget Input : voir Valeurs par Défaut Dynamiques
  • Texte statique : Description par défaut
  • Valeur dynamique : Description de {{user.name}}
  • Formule : ="Préfixe : " + {{variable}}
  • Dans une boucle, {{champ}} lit le champ de la même ligne : voir Règles, Valeurs par Défaut et Textes d'une Ligne
  • Une valeur dynamique suit ses variables : quand l'une d'elles change, la valeur est recalculée et remplace ce que l'utilisateur a saisi
• On Change : les actions à exécuter quand la valeur change (voir Contexte d'Événement)

À l'exécution, le champ affiche 5 lignes de texte. L'utilisateur peut l'agrandir avec la poignée dans son coin.

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

On Change#Lien direct vers On Change

Dans la carte Global, le bouton Action on field change de la ligne On Change attache une action au widget. Une fois l'action attachée, View attached action ouvre le tiroir Actions. Les actions s'exécutent quand l'utilisateur a modifié la valeur et quitte le champ.

Contexte d'Événement#Lien direct vers Contexte d'Événement

Les Actions reçoivent l'objet SF_input contenant :

• value : Contenu actuel du textarea
• SF_currentIndex : Index de boucle (si dans un contexte répété)

Validation d'Écran#Lien direct vers Validation d'Écran

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

Configurer différents comportements sur plusieurs écrans/vues :

• Available (disponible) : Contrôle si le widget existe sur l'écran
• Visible : Contrôle la visibilité (prend en charge les conditions)
• Required (requis) : Rend le champ obligatoire sur des écrans spécifiques
• Disable (désactiver) : Empêche l'interaction utilisateur

Exemples de Configuration d'Écran#Lien direct vers Exemples de Configuration d'Écran

Conditions Avancées#Lien direct vers Conditions Avancées

Utiliser des conditions dynamiques pour la validation d'écran. Cliquez sur Advanced Setting sous les écrans : chaque case devient un crayon qui ouvre la boîte de dialogue Advanced Setting Condition. Quand un écran est sélectionné dans le sélecteur All Screens au-dessus du canevas, la carte ne liste que cet écran, et le crayon de chaque ligne (Visible, Required, Disable) ouvre directement la boîte de dialogue.

• Écrivez une condition en JavaScript ; les variables de la page se mettent entre doubles accolades, par exemple {{status}} === 'Draft'
• Apply applique la condition à cet écran, Apply to All screens à tous les écrans
• Easy Setting revient aux interrupteurs

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

Règles Intégrées#Lien direct vers Règles Intégrées

Dans la carte Rules, Add rule ajoute une ligne : le type de règle, sa valeur et le message affiché quand la règle n'est pas respectée. L'interrupteur Required de la carte Validation rend le champ obligatoire.

• Min (Char) : exige un nombre minimum de caractères
• Max (Char) : limite le nombre de caractères
• Type : le type attendu pour la valeur (array, date, number)
• Email : la valeur doit être une adresse e-mail
• Regex : validation par expression régulière
• Custom : une condition que la valeur doit respecter

Style#Lien direct vers Style

• Placeholder : texte d'indication affiché lorsque le champ est vide
• Width (largeur) : largeur du champ (100%, 300px, auto)
• Class : classes CSS personnalisées
• Dynamic classes (le bouton pinceau à côté de Class) : appliquer des classes CSS conditionnelles basées sur les données

Meilleures Pratiques#Lien direct vers Meilleures Pratiques

Performance#Lien direct vers Performance

• Considérer le chargement paresseux pour les grands formulaires

Expérience Utilisateur#Lien direct vers Expérience Utilisateur

• Fournir un texte de placeholder clair
• Utiliser des messages de validation appropriés
• Considérer les compteurs de caractères pour les limites de longueur
• Implémenter la sauvegarde automatique pour le contenu long

Accessibilité#Lien direct vers Accessibilité

• Assurer un étiquetage approprié
• Maintenir un ordre de tabulation logique
• Fournir des messages d'erreur clairs
• Prendre en charge la navigation au clavier

Gestion des Données#Lien direct vers Gestion des Données

• Valider à la fois côté client et serveur
• Gérer correctement les caractères spéciaux
• Considérer l'encodage du texte pour différentes langues
• Implémenter une désinfection appropriée pour la sécurité

Ce système de configuration complet permet des implémentations de textarea flexibles et puissantes adaptées à diverses exigences d'application.