Documentation du Widget Rate

Le widget Rate permet aux utilisateurs de fournir une évaluation en utilisant des étoiles ou d'autres symboles. Il est parfait pour collecter des retours, des avis ou tout type de notation de la part des utilisateurs.

Aperçu​

Le widget Rate affiche un composant d'évaluation interactif où les utilisateurs peuvent sélectionner une note en cliquant sur des étoiles. Il prend en charge diverses options de personnalisation, notamment les schémas de couleurs, la sélection de demi-étoiles et l'affichage du score.

Configuration​

Nom​

• Champ: Name
• Description: Libellé d'affichage pour le champ d'évaluation
• Type: Saisie de texte
• Exemple: "Évaluation du produit", "Qualité du service"

Variable/Modèle​

• Champ: Variable/Model
• Description: Le champ du modèle de données qui stockera la valeur de l'évaluation
• Type: Saisie de texte
• Exemple: productRating, serviceScore

Score Maximum​

• Champ: max Score
• Description: Définit le nombre maximum d'étoiles/points disponibles
• Type: Saisie numérique
• Plage: 1 à 50
• Défaut: 5
• Exemple: 5 (pour une évaluation sur 5 étoiles), 10 (pour une échelle de 10 points)

Autoriser les Demi-Étoiles​

• Champ: Allow Half
• Description: Active la sélection par incréments de demi-étoiles (par exemple, 3,5 étoiles)
• Type: Interrupteur à bascule
• Défaut: false
• Cas d'usage: Évaluation plus précise si nécessaire

Activer les Couleurs​

• Champ: Colors toggle
• Description: Active un schéma de couleurs personnalisé pour différentes plages d'évaluation
• Type: Interrupteur à bascule

Lorsque les couleurs sont activées, vous pouvez configurer trois zones de couleurs :

1. Couleur de Plage Basse: Couleur pour le premier tiers de l'échelle d'évaluation
2. Couleur de Plage Moyenne: Couleur pour le tiers moyen de l'échelle d'évaluation
3. Couleur de Plage Haute: Couleur pour le tiers le plus élevé de l'échelle d'évaluation

Chaque couleur peut être sélectionnée à l'aide de l'interface de sélection de couleur.

Afficher le Score​

• Champ: Score toggle
• Description: Affiche le score numérique à côté des étoiles
• Type: Interrupteur à bascule

Lorsque l'affichage du score est activé :

Couleur du Texte​

• Champ: Text color picker
• Description: Couleur du texte du score affiché
• Type: Sélecteur de couleur

Texte du Score​

• Champ: Score End Text
• Description: Texte personnalisé à afficher à côté du score
• Type: Saisie de texte
• Exemple: "points", "étoiles", "sur 5"

Configuration de l'Interaction​

Action On Click​

• Champ: On Click
• Description: Définir des actions à exécuter lorsque l'évaluation change
• Type: Code JavaScript ou générateur d'actions
• Variables d'Accès:
  • SF_input.value: La valeur de l'évaluation sélectionnée
  • SF_input.SF_currentIndex: Index de boucle actuel (si dans une boucle)

Exemple d'Actions :​

Validation et Règles​

Validation Basée sur l'Écran​

Configurez différents comportements sur plusieurs écrans :

Disponible​

• Contrôle si le widget apparaît sur des écrans spécifiques
• Type: Bascule par écran

Visible​

• Contrôle la visibilité du widget avec des conditions
• Type: Bascule ou condition JavaScript
• Exemple: {{userType}} === 'customer'

Requis​

• Rend l'évaluation obligatoire sur des écrans spécifiques
• Type: Bascule ou condition JavaScript

Désactivé​

• Désactive l'interaction sur des écrans spécifiques
• Type: Bascule ou condition JavaScript

Règles de Validation​

Ajoutez des règles de validation personnalisées :

Types de Règles Disponibles :​

• Requis: Rendre l'évaluation obligatoire
• Valeur Min: Évaluation minimale acceptable
• Valeur Max: Évaluation maximale acceptable
• Personnalisée: Validation basée sur JavaScript

Exemples de Règles :​

Options de Style​

Classes CSS​

• Champ: Class
• Description: Appliquer des classes CSS personnalisées
• Type: Saisie de texte
• Exemples: custom-rating, highlight-rating

Classes Dynamiques​

• Utilisez le bouton de pinceau de format pour définir des classes CSS conditionnelles
• Exemple: Appliquer différentes classes en fonction de la valeur d'évaluation

Fonctionnalités Avancées​

Intégration dans une Boucle​

Lorsqu'il est utilisé dans une boucle (grille avec boucle activée) :

• Accédez à l'index de la boucle via SF_input.SF_currentIndex
• Chaque itération maintient un état d'évaluation indépendant
• Utile pour évaluer plusieurs éléments dans une liste

Intégration dans un Formulaire​

Lorsqu'il est utilisé dans un formulaire :

• La valeur d'évaluation est automatiquement incluse dans la soumission du formulaire
• Les règles de validation sont appliquées lors de la validation du formulaire
• Les paramètres obligatoires sont appliqués lors de la soumission du formulaire

Exemples d'Implémentation​

Évaluation de Base​

Événements et Gestion des Données​

Événement​

Déclenché chaque fois que la valeur de l'évaluation change :

• Données de l'Événement: Nouvelle valeur de l'évaluation
• Cas d'Usage: Mises à jour en temps réel, logique conditionnelle
• Accès: Via la configuration de l'action onClick

Stockage des Données​

• Les valeurs d'évaluation sont stockées sous forme de nombres (entiers ou décimaux si les demi-étoiles sont activées)
• Automatiquement lié au modèle/variable spécifié
• Intégré à la collecte de données du formulaire

Bonnes Pratiques​

1. Choisir l'Échelle Appropriée: Utilisez 5 étoiles pour les évaluations générales, 10 points pour les retours détaillés
2. Activer les Demi-Étoiles: Pour une collecte de retours plus précise
3. Utiliser les Couleurs à Bon Escient: Aidez les utilisateurs à comprendre la signification de l'évaluation
4. Fournir du Contexte: Utilisez des libellés clairs et du texte d'aide
5. Définir des Valeurs par Défaut Raisonnables: Déterminez si une évaluation par défaut est appropriée
6. Validation: Rendez les évaluations obligatoires pour les retours critiques
7. Conception Responsive: Assurez-vous que les évaluations fonctionnent bien sur les appareils mobiles

Dépannage​

Problèmes Courants :​

1. L'évaluation ne se sauvegarde pas: Vérifiez la configuration du nom du modèle/variable
2. Les couleurs ne s'affichent pas: Assurez-vous que la bascule "Colors" est activée
3. Les demi-étoiles ne fonctionnent pas: Vérifiez que "Allow Half" est activé
4. La validation ne fonctionne pas: Vérifiez les règles de validation et les paramètres requis
5. L'action on click ne se déclenche pas: Vérifiez la syntaxe JavaScript dans le champ onClick

Conseils de Débogage :​

• Utilisez la console du navigateur pour vérifier les valeurs d'évaluation
• Vérifiez la liaison du modèle avec les données du formulaire
• Testez les règles de validation avec différentes valeurs d'entrée
• Vérifiez les classes CSS pour les problèmes de style