Dans Salesforce LWC, si vous souhaitez permettre à l'utilisateur de sélectionner une option dans la liste d'options spécifiée, la liste déroulante est utilisée. Dans ce guide, nous verrons comment créer une combobox et les différents attributs pris en charge par combobox avec des exemples.
Boîte combo
Fondamentalement, combobox est un champ en lecture seule qui fournit une entrée permettant de choisir une option parmi les options spécifiées. Nous pouvons créer cela en utilisant la balise Lightning-Combobox. Les attributs sont la vitesse l'un après l'autre, séparés par un espace. Discutons de certains attributs requis lors de la création d'une liste déroulante.
- étiquette – Ceci est utilisé pour spécifier l’étiquette (texte) de votre liste déroulante.
- choix – Chaque option prend les attributs « label » et « value ». Nous pouvons spécifier les multiples options dans une liste séparées par des virgules.
- espace réservé : Avant de sélectionner une option, l'utilisateur doit connaître les informations relatives aux options. Ainsi, cet attribut est spécifié.
- requis : Dans certains cas, il est obligatoire de sélectionner l'option. Nous pouvons le rendre obligatoire en spécifiant cet attribut.
- désactivé : Il est possible d'empêcher l'utilisateur en sélectionnant l'option dans la case à cocher. Cet attribut désactive la combobox.
Syntaxe:
Voyons comment créer une combobox avec quelques attributs importants.
nom = 'nom'
label='nom_étiquette'
valeur={value_from_the_option}
placeholder='Texte d'aide'
options={Liste_of_options}
onchange={handleChange} >
Spécification:
Voyons les étapes pour créer la liste déroulante et travailler avec elle.
Dans le fichier JavaScript, créez une liste d'options avec une étiquette et une valeur à l'intérieur de la méthode « getter ».
Créez une variable qui stocke l'option par défaut.
Écrivez la fonction handle qui stocke l’option sélectionnée par l’utilisateur à partir de l’interface utilisateur.
Dans le fichier HTML, créez une combobox et transmettez les attributs. De plus, nous devons transmettre le gestionnaire d'événements onchange() qui gère les options de la liste déroulante. Il reprend la fonction « Handler » créée dans le fichier « js ».
Dans tous les exemples que nous allons aborder dans ce guide, la logique sera fournie sous forme de code « js ». Après cela, nous spécifions la capture d'écran qui inclut l'intégralité du code « js ».
Exemple 1:
Créez une liste déroulante avec cinq sujets (détails) dans le fichier Javascript. Spécifiez la valeur par défaut comme « JAVA ». Gérez la liste déroulante dans la méthode handleSubjectsOnChange(). Transmettez la valeur et les détails aux attributs « valeur et options » dans le fichier HTML avec une étiquette et déployez le composant.
premierExemple.html
< div classe = 'slds-var-m-around_medium' >
étiquette = 'Sélectionnez votre sujet :'
valeur = { valeur }
choix = { détails }
sur le changement = { handleSubjectsOnChange } >< / combobox éclair>
< br >
< p > Votre sujet: < b > {valeur} < / b >< / p >
< / div >
< / carte-éclair>
< / modèle>
premierExemple.js
// Créer une valeur par défaut - 'JAVA' pour la Comboboxvaleur = 'JAVA' ;
// Afficher les sujets
obtenir détails ( ) {
// 5 matières
retour [ { étiquette : 'Java' , valeur : 'JAVA' } ,
{ étiquette : 'Python' , valeur : 'PYTHON' } ,
{ étiquette : 'HTML' , valeur : 'HTML' } ,
{ étiquette : 'C' , valeur : 'C' } ,
{ étiquette : 'C++' , valeur : 'C++' } ] ;
}
// Gère la logique pour définir la valeur
handleSubjectsOnChange ( événement ) {
ce . valeur = événement. détail . valeur ;
}
}
Code entier :
firstComponent.js-meta.xml
version = '1,0' ?>< / cibles>
< / LightningComponentBundle>
Sortir:
Ajoutez ce composant à la page « Enregistrement » de n'importe quel objet. Dans le fichier HTML, nous affichons la valeur dans la balise paragraphe. Lorsqu'un utilisateur choisit une option, elle sera affichée en gras. Par défaut, « JAVA » est sélectionné et affiché une fois le composant rendu sur la page.
Choisissons le sujet comme « C ». « C » est renvoyé sous la liste déroulante.
Exemple 2 :
Dans cet exemple, nous allons afficher les différents composants en fonction des valeurs de la liste de sélection Type de campagne (de l'objet Campagne).
- Si le type de campagne est 'Conférence', nous afficherons le modèle qui renvoie le texte – Statut de la campagne : PLANIFIÉ
- Si le type de campagne est 'Webinaire', nous afficherons le modèle qui renvoie le texte – Statut de la campagne : TERMINÉ
- Si le type de campagne est 'Partenaires', nous afficherons le modèle qui renvoie le texte – Statut de la campagne : EN COURS
- État de la campagne : ABORTED pour le reste des options.
secondExemple.html
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
choix = { Valeurs de type de campagne. données .valeurs }
sur le changement = { handleChange } >
< / combobox éclair>
< / modèle>< br / >
< / div >
< br >< br >
< centre > Statut de la campagne : < b >< je > PRÉVU< / je >< / b > < / centre >
< / modèle>
< centre > Statut de la campagne : < b >< je >TERMINÉ< / je >< / b > < / centre >
< / modèle>
< centre > Statut de la campagne : < b >< je > EN COURS< / je >< / b > < / centre >
< / modèle>
< centre > Statut de la campagne : < b >< je > ABORTÉ< / je >< / b > < / centre >
< / modèle>
< / carte-éclair>
< / modèle>
secondExample.js
Nous importons l'objet Campaign (Standard) en tant que CAMPAIGN et le tapons en tant que TYPE. À partir de l'API Lightning/uiObjectInfo, nous importons les getPicklistValues et getObjectInfo. Ceux-ci obtiendront les valeurs de liste de sélection disponibles dans le champ Type. Ceux-ci seront utilisés comme options pour la liste déroulante. Les éléments suivants sont gérés dans handleChange().
- Si la valeur === « Conference », nous définissons la variable conferenceval sur true et les deux autres sur false.
- Si la valeur === « Webinar », nous définissons la variable webinarval sur true et les deux autres sur false.
- Si la valeur === « Partners », nous définissons la variable Partnerval sur true et les deux autres sur false.
- Si la valeur ne figure pas dans les options données, toutes sont fausses.
importer CAMPAGNE de '@salesforce/schema/Campagne' ;
importer TYPE à partir de '@salesforce/schema/Campaign.Type' ;
importer { obtenir des valeurs de liste de sélection } depuis 'foudre/uiObjectInfoApi' ;
importer { obtenirObjectInfo } depuis 'foudre/uiObjectInfoApi' ;
exporter défaut classe Deuxième exemple s'étend Élément Lightning {
@ suivre la valeur ;
// Récupère l'objet
@ fil ( obtenirObjectInfo , { objectApiName : CAMPAGNE } )
objetInfo ;
// Récupère le type de campagne - Liste de sélection
@ fil ( obtenir des valeurs de liste de sélection , { IDTyped'enregistrement : '$objectInfo.data.defaultRecordTypeId' , champApiName : TAPER } )
Valeurs de type de campagne ;
conférenceval = FAUX ;
webinaire = FAUX ;
partenariat = FAUX ;
autre = FAUX ;
// Gérer la logique
handleChange ( événement ) {
ce . valeur = événement. cible . valeur ;
si ( ce . valeur === 'Conférence' ) {
// Afficher le statut comme PRÉVU
ce . conférenceval = vrai ;
ce . webinaire = FAUX ;
ce . partenariat = FAUX ;
}
autre si ( ce . valeur === « Webinaires » ) {
// Afficher le statut comme TERMINÉ
ce . webinaire = vrai ;
ce . conférenceval = FAUX ;
ce . partenariat = FAUX ;
}
autre si ( ce . valeur === 'Les partenaires' ) {
// Afficher le statut comme EN COURS
ce . webinaire = FAUX ;
ce . conférenceval = FAUX ;
ce . partenariat = vrai ;
}
autre {
// Afficher l'état comme IN ABORTED
ce . webinaire = FAUX ;
ce . conférenceval = FAUX ;
ce . partenariat = FAUX ;
}
}
}
secondComponent.js-meta.xml
version = '1,0' ?>< / cibles>
< / LightningComponentBundle>
Sortir:
Tapez – « Conférence ». Le statut est donc « PLANIFIÉ ».
Tapez – « Webinaire ». Le statut est donc « TERMINÉ ».
Tapez – « Partenaires ». Le statut est donc « EN COURS ».
Le type n'est pas dans les options fournies. Le statut est donc « ABORTÉ ».
Exemple 3 :
Maintenant, nous créons une combobox avec les enregistrements de campagne comme options. Si nous sélectionnons une option, le type de campagne correspondant sera renvoyé sur l'interface utilisateur.
Tout d’abord, nous devons créer une classe Apex avec la méthode getCampaign(). Cette méthode renvoie une liste de toutes les campagnes avec l'identifiant, le nom, le type et le statut.
Enregistrements de campagne. apxcpublic avec partage classe Enregistrements de campagne {
@ AuraActivé ( pouvant être mis en cache = vrai )
// Récupère la liste des campagnes
publique statique Liste < Campagne > obtenirCampagne ( ) {
retour [ ID SELECT , Nom , Taper , Statut de la campagne ] ;
}
}
troisièmeExemple.html
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
étiquette = 'Sélectionner le nom de la campagne'
choix = { Options de campagne }
valeur = { valeur }
sur le changement = { gérer le changement }
>
< / combobox éclair>
< / div >< br >
< br >
< p > Type de campagne pour cette campagne : < b > {valeur} < / b >< / p >
< / carte-éclair>
< / modèle>
troisièmeExample.js
- Nous devons spécifier la méthode qui obtient une liste de campagnes dans la méthodeconnectedcallback(). Déclarez un tableau nommé « camps » et stockez le résultat avec l'étiquette comme ID de campagne et la valeur comme Type de campagne. Ce tableau est l'entrée des CampaignNames (cela doit être créé avec le décorateur de piste).
- Dans la méthode getter Campaignoptions(), renvoyez le tableau CampaignNames. Ainsi, combobox utilise ces options.
- Définissez la valeur sélectionnée dans la méthode de gestionnaire handleonchange().
importer obtenir la campagne de '@salesforce/apex/CampaignRecords.getCampaign' ;
exporter défaut classe Troisième exemple s'étend Élément Lightning {
valeur = '' ;
@ suivre les noms de campagne = [ ] ;
obtenir Options de campagne ( ) {
retour ce . Noms de campagne ;
}
// Ajoute les options au tableau camps depuis Apex.
// le label sera le nom de la campagne
// la valeur sera le type de campagne
connectéRappel ( ) {
obtenirCampagne ( )
. alors ( résultat => {
laisser les camps = [ ] ;
pour ( était k = 0 ; k < résultat. longueur ; k ++ ) {
camps. pousser ( { étiquette : résultat [ k ] . Nom , valeur : résultat [ k ] . Taper } ) ;
}
ce . Noms de campagne = camps ;
} )
}
// Gère la valeur
gérer le changement ( événement ) {
ce . valeur = événement. détail . valeur ;
}
}
Sortir:
Sélectionnons l'enregistrement et voyons le type.
Conclusion
Nous avons appris à créer une combobox dans LWC avec des attributs et des exemples. Tout d’abord, nous avons créé une liste déroulante avec une liste de valeurs et affiché la valeur sélectionnée. Ensuite, nous rendons le modèle HTML en fonction de la valeur sélectionnée via le rendu conditionnel. Enfin, nous avons appris à créer les options de la liste déroulante à partir des enregistrements Salesforce existants et à afficher les champs associés sur l'interface utilisateur.