Widget Sélecteur d'Utilisateur

Le widget Sélecteur d'Utilisateur fournit une interface déroulante avec recherche pour sélectionner un ou plusieurs utilisateurs de la base d'utilisateurs de votre application. Il prend en charge la recherche à distance, le filtrage par groupe et des options d'affichage flexibles.

Aperçu​

Le widget Sélecteur d'Utilisateur s'affiche sous la forme d'un composant de sélection Element UI avec des capacités de recherche à distance. Les utilisateurs peuvent rechercher et sélectionner dans le répertoire d'utilisateurs de l'application avec un filtrage en temps réel et des restrictions basées sur les groupes.

Propriétés de Configuration​

Propriétés de Base​

Nom​

• Description : Libellé d'affichage du widget
• Type : Chaîne de caractères
• Par défaut : "Sélectionnez un utilisateur"
• Utilisation : Apparaît comme étiquette de formulaire au-dessus du champ de sélection

Variable/Modèle​

• Description : Le nom de la variable du modèle de données qui stockera le(s) utilisateur(s) sélectionné(s)
• Type : Chaîne de caractères
• Requis : Oui
• Format : Doit être un nom de variable valide (par ex., selectedUser, assignedUsers)

Options de Sélection​

Sélection Multiple​

• Propriété : multiple
• Type : Booléen
• Par défaut : false
• Description : Active la sélection de plusieurs utilisateurs
• Lorsque activé : Renvoie un tableau d'emails d'utilisateurs sélectionnés
• Lorsque désactivé : Renvoie une seule chaîne d'email d'utilisateur

Effaçable​

• Propriété : clearable
• Type : Booléen
• Par défaut : false
• Description : Ajoute un bouton d'effacement pour supprimer toutes les sélections

Filtrage des Utilisateurs​

Filtre par Groupes​

• Propriété : groupes
• Type : Tableau d'objets de groupe
• Description : Restreindre la sélection d'utilisateurs à des groupes spécifiques
• Configuration : Sélectionnez un ou plusieurs groupes dans la liste déroulante
• Comportement API : Seuls les utilisateurs appartenant aux groupes sélectionnés apparaîtront dans les résultats de recherche

Affichage de l'Étiquette​

• Propriété : label
• Type : Chaîne de caractères
• Options :
  • "name" : Afficher le prénom + nom de l'utilisateur
  • "Email" : Afficher l'adresse email de l'utilisateur
• Par défaut : "Email"
• Description : Détermine comment les utilisateurs sont affichés dans les options déroulantes

Validation et Visibilité​

Configuration par Écran​

Le widget prend en charge différentes configurations pour différents écrans/contextes :

• Disponible : Contrôle la disponibilité du widget sur l'interface
• Visible : Contrôle la visibilité du widget sur l'interface
• Requis : Rend la sélection d'utilisateur obligatoire pour la soumission du formulaire
• Désactiver : Désactive le widget en empêchant l'interaction utilisateur

Conditions de Visibilité Avancées​

Utilisez des expressions JavaScript pour une logique de visibilité complexe :

Style et Apparence​

Texte de Substitution​

• Propriété : placeholder
• Type : Chaîne de caractères
• Par défaut : "Rechercher un utilisateur..."
• Description : Texte de substitution affiché lorsqu'aucune sélection n'est effectuée

Largeur​

• Propriété : width
• Type : Chaîne de caractères
• Par défaut : "100%"
• Exemples : "300px", "50%", "auto"
• Description : Contrôle la largeur du champ de sélection

Classes CSS​

• Propriété : classNames
• Type : Chaîne de caractères
• Description : Classes CSS personnalisées pour le style
• Format : Noms de classes séparés par des espaces

Classes Dynamiques​

• Propriété : classes
• Type : Objet JavaScript
• Description : Classes CSS conditionnelles basées sur l'état du formulaire
• Utilisation : Style avancé basé sur les conditions de données

Règles de Validation​

Ajoutez des règles de validation personnalisées au-delà de la validation de base obligatoire :

Types de Règles​

• Modèle : Validation par expression régulière
• Personnalisé : Validation par fonction JavaScript
• Longueur : Nombre de sélections minimum/maximum (pour la sélection multiple)

Exemples d'Utilisation​

Sélection Simple d'un Seul Utilisateur​

Sélection Multiple d'Utilisateurs avec Filtre de Groupe​

Événements et Interactions​

Événement onChange​

• Déclenchement : Lorsque la sélection d'utilisateur change
• Données Disponibles :
  • SF_input.value : Email(s) de l'utilisateur sélectionné
  • SF_input.SF_data : Objet(s) utilisateur complet(s)
  • SF_input.SF_currentIndex : Index de boucle actuel (si dans une boucle)

Structure de Données​

Données d'Entrée (Valeurs Sélectionnées)​

// Sélection simple
"user@example.com"[
  // Sélection multiple
  ("user1@example.com", "user2@example.com", "user3@example.com")
];

Objets Utilisateur Complets (Disponibles dans SF_data)​

{
  "email": "john.doe@example.com",
  "firstName": "John",
  "lastName": "Doe",
  "_id": "user_id_123",
  // Propriétés utilisateur supplémentaires
}

Intégration API​

Point de Terminaison de Recherche d'Utilisateurs​

• URL : /api/v1/user
• Méthode : GET
• Paramètres :
  • limit : Résultats maximum (par défaut : 10)
  • groups : ID de groupes séparés par des virgules pour le filtrage
  • key : Chaîne de requête de recherche
  • SF_mode : Paramètre de mode d'application

Filtrage par Groupe​

Lorsque des groupes sont configurés, la requête API inclut automatiquement des filtres de groupe pour restreindre les résultats aux utilisateurs appartenant aux groupes spécifiés.

Bonnes Pratiques​

Optimisation des Performances​

• Utilisez le filtrage par groupe pour réduire la taille des résultats de recherche
• Définissez des limites de recherche appropriées pour les grandes bases d'utilisateurs
• Envisagez la mise en cache des données utilisateur fréquemment consultées

Expérience Utilisateur​

• Fournissez un texte de substitution clair indiquant l'objectif de la sélection
• Utilisez des étiquettes descriptives qui correspondent à votre cas d'usage
• Activez l'option effaçable pour un meilleur contrôle utilisateur
• Choisissez le format d'étiquette approprié (nom vs email) en fonction du contexte

Stratégie de Validation​

• Utilisez la validation obligatoire pour les sélections critiques
• Implémentez une validation conditionnelle basée sur le contexte du formulaire
• Fournissez des messages d'erreur significatifs pour les échecs de validation

Accessibilité​

• Assurez-vous d'un étiquetage approprié pour les lecteurs d'écran
• Maintenez la prise en charge de la navigation au clavier
• Utilisez le HTML sémantique via les composants Element UI

Dépannage​

Problèmes Courants​

Aucun Utilisateur n'Apparaît​

• Vérifiez la configuration du filtre de groupe
• Vérifiez la disponibilité du point de terminaison API utilisateur
• Assurez-vous que des utilisateurs existent dans les groupes spécifiés

La Sélection ne Se Sauvegarde Pas​

• Vérifiez que le nom du modèle/variable est correctement configuré
• Vérifiez les erreurs de validation du formulaire
• Assurez-vous d'une liaison de données appropriée dans le formulaire parent

Problèmes de Performance​

• Réduisez la portée du groupe si trop d'utilisateurs
• Implémentez la pagination pour les grands ensembles de données
• Optimisez les paramètres de requête de recherche