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.