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#Lien direct vers 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#Lien direct vers Propriétés de Configuration

Propriétés de Base#Lien direct vers Propriétés de Base

Nom#Lien direct vers 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#Lien direct vers 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#Lien direct vers Options de Sélection

Sélection Multiple#Lien direct vers 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#Lien direct vers 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#Lien direct vers Filtrage des Utilisateurs

Filtre par Groupes#Lien direct vers 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#Lien direct vers 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é#Lien direct vers Validation et Visibilité

Configuration par Écran#Lien direct vers 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#Lien direct vers Conditions de Visibilité Avancées

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

Style et Apparence#Lien direct vers Style et Apparence

Texte de Substitution#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Règles de Validation

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

Types de Règles#Lien direct vers 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#Lien direct vers Exemples d'Utilisation

Sélection Simple d'un Seul Utilisateur#Lien direct vers Sélection Simple d'un Seul Utilisateur

Sélection Multiple d'Utilisateurs avec Filtre de Groupe#Lien direct vers Sélection Multiple d'Utilisateurs avec Filtre de Groupe

Événements et Interactions#Lien direct vers Événements et Interactions

Événement onChange#Lien direct vers É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#Lien direct vers Structure de Données

Données d'Entrée (Valeurs Sélectionnées)#Lien direct vers 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)#Lien direct vers 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#Lien direct vers Intégration API

Point de Terminaison de Recherche d'Utilisateurs#Lien direct vers 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#Lien direct vers 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#Lien direct vers Bonnes Pratiques

Optimisation des Performances#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers Problèmes Courants

Aucun Utilisateur n'Apparaît#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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