Skip to main content

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.

Textarea Widget

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). Contenu texte initial
    • Texte statique : "Description par dĂ©faut"
    • Valeur dynamique : Description de {{user.name}}
    • Formule : ="PrĂ©fixe : " + {{variable}}
  • Lignes : Nombre de lignes de texte visibles (par dĂ©faut : 5)
Textarea Configuration

Événements et Actions​

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Ă©)
Textarea [Actions](/docs/fr/ressources/project/web-interface/actions)

Validation d'Écran​

Validation Basée sur l'Écran​

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

  • Disponible : ContrĂ´le si le widget existe sur l'Ă©cran
  • Visible : ContrĂ´le la visibilitĂ© (prend en charge les conditions)
  • Requis : Rend le champ obligatoire sur des Ă©crans spĂ©cifiques
  • DĂ©sactivĂ© : EmpĂŞche l'interaction utilisateur

Exemples de Configuration d'Écran​

Textarea Basic Validation

Conditions Avancées​

Utiliser des conditions dynamiques pour la validation d'écran :

Textarea Advanced Validation

Règles de Validation​

Règles Intégrées​

  • Requis : Rend le champ obligatoire
  • Longueur Maximale : Limite le nombre de caractères
  • Longueur Minimale : Exige un nombre minimum de caractères
  • Modèle : Validation par expression rĂ©gulière
  • Règles PersonnalisĂ©es : Fonctions de validation basĂ©es sur JavaScript
Textarea Validation Rules

Style​

  • Largeur : Largeur du champ (100%, 300px, auto)
  • Placeholder : Texte d'indication affichĂ© lorsque le champ est vide
  • Noms de Classe : Classes CSS personnalisĂ©es
  • Classes Dynamiques : Appliquer des classes CSS conditionnelles basĂ©es sur les donnĂ©es
Textarea Styling

Meilleures Pratiques​

Performance​

  • Utiliser une valeur rows appropriĂ©e pour le contenu attendu
  • ImplĂ©menter un onChange avec anti-rebond pour les opĂ©rations lourdes
  • ConsidĂ©rer le chargement paresseux pour les grands formulaires

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

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

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