Documentation du Widget Signature

Aperçu​

Le widget Signature permet aux utilisateurs de capturer des signatures numériques directement dans les formulaires à l'aide d'un canevas interactif. Les utilisateurs peuvent dessiner leur signature à l'aide d'une souris, d'un écran tactile ou d'un stylet, et la signature est automatiquement enregistrée sous forme de données d'image une fois terminée.

Fonctionnalités​

• Canevas Interactif: Dessinez des signatures à l'aide d'une souris, d'un écran tactile ou d'un stylet
• Capture en Temps Réel: Les signatures sont automatiquement enregistrées pendant que l'utilisateur dessine
• Fonction d'Effacement: Bouton d'effacement intégré pour réinitialiser la signature
• Conception Responsive: Le canevas se redimensionne automatiquement en fonction du ratio de pixels de l'appareil
• Intégration dans les Formulaires: S'intègre parfaitement à la validation des formulaires
• Accessibilité: Prend en charge la navigation au clavier et les lecteurs d'écran

Options de Configuration​

Paramètres Globaux​

Configuration de Base​

Nom

• Description: Libellé d'affichage pour le champ de signature
• Type: Saisie de texte
• Requis: Oui
• Exemple: "Signature du Client", "Signature d'Autorisation"

Variable/Modèle

• Description: Nom de la variable pour stocker les données de la signature
• Type: Saisie de texte
• Requis: Oui
• Format: Nom de variable JavaScript valide
• Exemple: customer_signature, approval_sign
• Note: La signature est stockée sous forme d'URL de données encodée en base64

Paramètres de Validation​

Configurez la visibilité, l'exigence et l'accessibilité sur différents écrans/contextes.

Validation Basée sur l'Écran​

Options de Configuration:

• Disponible: Contrôle si le widget apparaît sur des écrans spécifiques
• Visible: Affiche/masque le widget en fonction des conditions
• Requis: Rend la signature obligatoire pour la soumission du formulaire
• Désactiver: Empêche l'interaction de l'utilisateur (la signature devient en lecture seule)

Conditions de Validation Avancées​

Utilisez des expressions JavaScript avec des variables dynamiques :

Exemples de Conditions:

Configuration du Style​

Dimensions du Canevas​

Largeur

• Description: Largeur du canevas
• Type: Saisie de texte
• Défaut: 100% (responsive)
• Format: Unités CSS (px, %, em, rem)
• Exemple: "400px", "100%", "20rem"

Hauteur

• Description: Hauteur du canevas
• Type: Saisie de texte
• Défaut: Calculé automatiquement
• Format: Unités CSS (px, %, em, rem)
• Exemple: "200px", "15vh"

Options de Style​

Noms de Classes

• Description: Classes CSS personnalisées pour le style
• Type: Saisie de texte
• Format: Noms de classes séparés par des espaces
• Exemple: "signature-large bordered-canvas"

Classes Dynamiques

• Description: Classes CSS conditionnelles basées sur l'état du formulaire
• Type: Expression JavaScript
• Exemple:

{
  'signature-required': {{isRequired}},
  'signature-error': {{hasError}},
  'signature-completed': {{signature}} !== undefined
}

Bonnes Pratiques​

Expérience Utilisateur​

1. Instructions Claires: Fournissez un étiquetage et des instructions claires
2. Taille Appropriée: Assurez-vous que le canevas est suffisamment grand pour une signature confortable
3. Gestion des Erreurs: Affichez des messages d'erreur clairs pour les échecs de validation
4. Conception Responsive: Testez sur différents appareils et tailles d'écran

Considérations de Sécurité​

1. Validation des Données: Validez les données de signature côté serveur
2. Taille du Fichier: Surveillez les tailles de fichiers de signature pour les performances
3. Stockage: Implémentez des politiques de conservation des données appropriées
4. Confidentialité: Assurez la conformité avec les réglementations de protection des données

Optimisation des Performances​

1. Taille du Canevas: Équilibrez la qualité avec les performances
2. Compression: Envisagez la compression d'image pour les grandes signatures
3. Mise en Cache: Implémentez des stratégies de mise en cache appropriées
4. Chargement: Affichez les états de chargement pendant la capture de signature

Dépannage​

Problèmes Courants​

La Signature ne se Sauvegarde Pas

• Vérifiez la configuration du nom du modèle
• Vérifiez la gestion de la soumission du formulaire
• Assurez-vous que le canevas est correctement initialisé

Le Canevas n'est Pas Responsive

• Vérifiez les paramètres de largeur/hauteur
• Vérifiez les conflits CSS
• Testez sur différents appareils

Erreurs de Validation

• Vérifiez les paramètres de champ requis
• Vérifiez la syntaxe des règles de validation
• Vérifiez les configurations spécifiques à l'écran

Problèmes de Performance

• Réduisez les dimensions du canevas si nécessaire
• Optimisez la compression d'image
• Vérifiez les fuites de mémoire dans la gestion des signatures

Informations de Débogage​

// Déboguer l'état du widget signature
console.log("Modèle de Signature:", this.models.customer_signature);
console.log("Widget Visible:", this.visible);
console.log("Widget Requis:", this.required);
console.log("Widget Désactivé:", this.disable);

Référence de l'API​

Événements​

• endStroke: Déclenché lorsque l'utilisateur termine un trait
• beforeClear: Déclenché avant que la signature ne soit effacée
• afterClear: Déclenché après que la signature soit effacée

Méthodes​

• clear(): Efface le canevas de signature
• fromDataURL(): Charge la signature à partir d'une URL de données
• toDataURL(): Exporte la signature sous forme d'URL de données
• on(): Active la saisie de signature
• off(): Désactive la saisie de signature

Propriétés​

• signaturePad: Référence à l'instance SignaturePad
• canvas: Référence à l'élément canvas
• data: URL de données de signature actuelle
• isDisable: État désactivé actuel