Documentation du Widget Case à Cocher

Le widget Case à Cocher permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste prédéfinie. Il offre des options flexibles de sourçage de données et des capacités de validation complètes.

Aperçu​

Le widget Case à Cocher s'affiche sous la forme d'un groupe de cases à cocher avec lesquelles les utilisateurs peuvent interagir pour faire des sélections. Il supporte diverses sources de données, notamment les listes statiques, les collections de bases de données, les rapports et les bases de données externes.

Configuration de Base​

Paramètres Globaux​

Nom: Libellé d'affichage pour le groupe de cases à cocher Variable/Modèle: Variable du modèle de données qui stockera les valeurs sélectionnées Valeur par Défaut: Options présélectionnées au chargement du widget

Configuration de la Source de Données​

Le widget Case à Cocher supporte plusieurs types de sources de données:

Données Statiques​

• Liste Personnalisée: Sélectionnez à partir de listes statiques prédéfinies
• Configurez les propriétés d'étiquette et de valeur pour chaque option

Données de Collection​

• Collection: Connectez-vous aux collections de bases de données
• Requête: Filtrez et personnalisez la récupération des données
• Agrégation: Utilisez des requêtes d'agrégation avancées pour le traitement complexe des données
• Trier par: Définissez le champ de tri et la direction (1 pour croissant, -1 pour décroissant)
• Limite: Limitez le nombre d'options affichées

Données de Rapport​

• Rapport: Connectez-vous aux rapports existants
• Requête: Appliquez des filtres aux données du rapport
• Agrégation: Utilisez les pipelines d'agrégation sur les données du rapport

Base de Données Externe (EDS)​

• Base de Données: Connectez-vous aux connexions de bases de données externes
• Source EDS: Définissez des requêtes SQL ou des opérations spécifiques à la base de données

Données de Variable​

• Utilisez les variables d'interface existantes comme source de données
• Se lie automatiquement à la variable {model}_vb

Configuration des Propriétés​

Propriété d'Étiquette: Définissez quel champ contient le texte d'affichage

• Utilisation statique: firstName
• Utilisation dynamique: $.firstName + ' - ' + $.lastName

Propriété de Valeur: Définissez quel champ contient la valeur stockée

• Utilisation statique: ref
• Utilisation dynamique: $.ref + ' - ' + $.name

Validation et Règles​

Validation Basée sur l'Écran​

Configurez le comportement du widget sur différents écrans:

Disponible: Contrôlez la disponibilité du widget par écran

Visible: Afficher/masquer le widget conditionnellement

Requis: Rendez les sélections obligatoires

Désactivé: Empêchez l'interaction utilisateur

Des conditions avancées peuvent être définies à l'aide de variables avec la syntaxe {{variable_name}}.

Règles de Validation​

Ajoutez des règles de validation personnalisées:

• Requis: Assurez-vous qu'au moins une option est sélectionnée
• Sélection Min/Max: Contrôlez le nombre de sélections (pour la sélection multiple)
• Règles Personnalisées: Définissez la logique de validation spécifique
• Messages d'Erreur: Personnalisez les commentaires de validation

Configuration du Style​

Options de Mise en Page​

• Mise en Page: Choisissez entre l'affichage Bloc ou Inline
• Bordure: Ajoutez des bordures autour des options de case à cocher
• Largeur: Définissez la largeur du widget (par exemple, "100%", "300px")

Personnalisation CSS​

• Noms de Classe: Ajoutez des classes CSS personnalisées
• Classes Dynamiques: Utilisez le style conditionnel basé sur les données

Événements​

Le widget Case à Cocher supporte plusieurs événements:

onChange​

Déclenché lorsque la sélection de la case à cocher change

// Accédez aux valeurs sélectionnées et aux données
SF_input.value; // Tableau des valeurs sélectionnées
SF_input.SF_data; // Tableau des objets sélectionnés
SF_input.SF_currentIndex; // Index de boucle actuel

onClick​

Gestionnaire de clic personnalisé avec accès à:

• Valeurs sélectionnées
• Objets de données complets
• Informations de contexte actuel

Travail avec les Actions et SF_input​

Attacher les Actions à l'Événement onChange​

L'événement onChange du widget Case à Cocher vous permet d'exécuter des Actions personnalisées chaque fois que l'utilisateur change sa sélection. Ceci est particulièrement utile pour:

• Remplir les champs connexes avec les données des options sélectionnées
• Déclencher les mises à jour en cascade dans les autres champs du formulaire
• Récupérer les données supplémentaires du back-office basées sur la sélection
• Mettre en œuvre la logique conditionnelle basée sur les valeurs sélectionnées

Comment Attacher une Action​

1. Accédez à la section Général dans la configuration du widget Case à Cocher
2. Trouvez le champ d'événement On Change (ou On Click selon votre version d'interface)
3. Écrivez du JavaScript pur directement dans le champ d'action
4. Votre code s'exécute automatiquement lorsque la sélection change

Accéder aux Valeurs avec SF_input​

Le widget Case à Cocher fournit un accès riche aux données via l'objet SF_input. Contrairement aux simples champs de saisie, les cases à cocher peuvent retourner à la fois les valeurs sélectionnées et les objets de données complets de votre source de données.

Structure SF_input pour le Widget Case à Cocher​

{
  value: [/* Tableau des valeurs sélectionnées */],
  SF_data: [/* Tableau des objets sélectionnés complets */],
  SF_currentIndex: /* Index de boucle si le widget est dans une boucle */
}

Comprendre les Propriétés SF_input​

Exemples Pratiques​

Exemple 1: Accéder aux Valeurs Sélectionnées​

// Obtenez le tableau des valeurs sélectionnées
console.log(SF_input.value);
// Sortie: ['value1', 'value2', 'value3']

// Vérifiez combien d'éléments sont sélectionnés
const selectionCount = SF_input.value.length;

// Vérifiez si une valeur spécifique est sélectionnée
const isSelected = SF_input.value.includes('value1');

Exemple 2: Accéder aux Objets JSON Complets (SF_data)​

Ceci est la fonctionnalité la plus puissante - accéder aux objets de données complets, pas seulement les valeurs:

// Accédez aux objets de données complets pour les éléments sélectionnés
console.log(SF_input.SF_data);
// Sortie: [
//   { id: '001', name: 'Produit A', price: 100, category: 'Électronique' },
//   { id: '002', name: 'Produit B', price: 200, category: 'Vêtements' }
// ]

// Extrayez les propriétés spécifiques des éléments sélectionnés
const selectedNames = SF_input.SF_data.map(item => item.name);
const totalPrice = SF_input.SF_data.reduce((sum, item) => sum + item.price, 0);

// Utilisez les données du premier élément sélectionné
if (SF_input.SF_data.length > 0) {
  const firstItem = SF_input.SF_data[0];
  model.selected_category = firstItem.category;
  model.selected_supplier = firstItem.supplier;
}

Meilleures Pratiques​

1. Toujours Vérifier la Longueur de SF_data: Avant d'accéder à SF_data, vérifiez qu'il n'est pas vide

   if (SF_input.SF_data && SF_input.SF_data.length > 0) {
     // Votre code ici
   }
   

2. Utilisez SF_data pour les Informations Enrichies: Lorsque vous avez besoin de plus que la valeur, utilisez toujours SF_data pour accéder à l'objet complet

3. Gérez les Sélections Multiples: Rappelez-vous que la case à cocher retourne des tableaux, utilisez donc les méthodes de tableau de manière appropriée

4. Validez l'Existence des Données: Vérifiez si les propriétés existent avant d'accéder aux données imbriquées

   const supplierName = SF_input.SF_data[0]?.supplier?.name || 'Inconnu';
   

5. Considérations de Performance: Pour les grands ensembles de données ou les opérations complexes, envisagez de rebondir vos actions onChange

6. Documentation Claire: Commentez le code de votre action pour expliquer la logique métier pour la maintenance future

Exemples de Configuration​

Case à Cocher Statique Basique​

Case à Cocher Basée sur une Collection​

Fonctionnalités Avancées​

Personnalisation des Requêtes​

Pour les sources de données collection et rapport, vous pouvez définir des requêtes personnalisées:

Requêtes d'Agrégation​

Activez l'agrégation pour les opérations de données complexes:

Visibilité Conditionnelle​

Définissez des conditions de visibilité avancées:

Meilleures Pratiques​

1. Sélection de la Source de Données: Choisissez le type de source de données approprié en fonction de vos besoins
2. Performance: Utilisez des limites et des requêtes efficaces pour les grands ensembles de données
3. Expérience Utilisateur: Fournissez des étiquettes claires et des messages de validation significatifs
4. Conception Réactive: Considérez les mises en page mobiles lors du choix entre l'affichage inline et bloc
5. Accessibilité: Assurez-vous un bon étiquetage pour les lecteurs d'écran

Dépannage​

Options Vides: Vérifiez la configuration de la source de données et la syntaxe des requêtes

Sélection ne S'Enregistrant Pas: Vérifiez le nom de la variable du modèle et les règles de validation

Problèmes de Performance: Mettez en œuvre la pagination ou le filtrage pour les grands ensembles de données

Problèmes de Style: Vérifiez les noms des classes CSS et les paramètres de conception réactive