U Salesforce LWC, ako želite dopustiti korisniku da odabere opciju s navedenog popisa opcija, koristi se kombinirani okvir. U ovom vodiču raspravljat ćemo o tome kako stvoriti kombinirani okvir i različite atribute koje podržava kombinirani okvir s primjerima.
Combobox
U osnovi, kombinirani okvir je polje samo za čitanje koje pruža unos za odabir opcije među navedenim opcijama. To možemo stvoriti pomoću oznake lightning-combobox. Atributi su brzina jedan za drugim koji su odvojeni razmakom. Raspravljajmo o nekim atributima koji su potrebni za izradu kombiniranog okvira.
- označiti – Ovo se koristi za određivanje oznake (teksta) za vaš kombinirani okvir.
- opcije – Svaka opcija ima atribute “label” i “value”. Možemo navesti više opcija na popisu odvojenim zarezom.
- rezerviranog mjesta : Prije odabira opcije, korisnik mora znati informacije koje se odnose na opcije. Dakle, ovaj je atribut naveden.
- potreban : U nekim je slučajevima obavezno odabrati opciju. Možemo ga učiniti obaveznim navođenjem ovog atributa.
- onemogućeno : Moguće je spriječiti korisnika odabirom opcije iz potvrdnog okvira. Ovaj atribut onemogućuje kombinirani okvir.
Sintaksa:
Pogledajmo kako stvoriti kombinirani okvir s nekim važnim atributima.
label='naziv_oznake'
vrijednost={vrijednost_iz_opcije}
placeholder='Tekst pomoći'
opcije={Lista_opcija}
onchange={handleChange} >
Specifikacija:
Pogledajmo korake za stvaranje kombiniranog okvira i rad s njim.
U JavaScript datoteci stvorite popis opcija s oznakom i vrijednošću unutar metode 'getter'.
Napravite varijablu koja pohranjuje zadanu opciju.
Napišite funkciju rukovanja koja pohranjuje opciju koju je korisnik odabrao iz korisničkog sučelja.
U HTML datoteci stvorite kombinirani okvir i proslijedite atribute. Također, moramo proslijediti rukovatelj događajima onchange() koji upravlja opcijama u kombiniranom okviru. Uzima funkciju 'Handler' stvorenu u 'js' datoteci.
U svim primjerima o kojima ćemo raspravljati u ovom vodiču, logika će biti navedena kao 'js' kod. Nakon toga specificiramo snimku zaslona koja uključuje cijeli 'js' kod.
Primjer 1:
Napravite kombinirani okvir s pet predmeta (pojedinosti) u Javascript datoteci. Navedite zadanu vrijednost kao 'JAVA'. Upravljajte kombiniranim okvirom u metodi handleSubjectsOnChange(). Proslijedite vrijednost i detalje atributima 'vrijednost i opcije' u HTML datoteci s oznakom i implementirajte komponentu.
prviPrimjer.html
< div razreda = 'slds-var-m-around_medium' >
označiti = 'Odaberite svoj predmet:'
vrijednost = { vrijednost }
opcije = { pojedinosti }
onchange = { rukovanje SubjectsOnChange } >< / lightning-combobox>
< br >
< str > Vaš predmet: < b > {vrijednost} < / b >< / str >
< / div >
< / karta munje>
< / predložak>
firstExample.js
// Stvorite zadanu vrijednost - 'JAVA' za Comboboxvrijednost = 'JAVA' ;
// Prikaži subjekte
dobiti pojedinosti ( ) {
// 5 predmeta
povratak [ { označiti : 'Java' , vrijednost : 'JAVA' } ,
{ označiti : 'Piton' , vrijednost : 'PITON' } ,
{ označiti : 'HTML' , vrijednost : 'HTML' } ,
{ označiti : 'C' , vrijednost : 'C' } ,
{ označiti : 'C++' , vrijednost : 'C++' } ] ;
}
// Rukovanje logikom za postavljanje vrijednosti
rukovanje SubjectsOnChange ( događaj ) {
ovaj . vrijednost = događaj. detalj . vrijednost ;
}
}
Cijeli kod:
firstComponent.js-meta.xml
verzija = '1,0' ?>< / mete>
< / LightningComponentBundle>
Izlaz:
Dodajte ovu komponentu na stranicu 'Zapis' bilo kojeg objekta. U HTML datoteci prikazujemo vrijednost u oznaci paragrafa. Kada korisnik odabere bilo koju opciju, ona će biti prikazana podebljano. Prema zadanim postavkama, 'JAVA' je odabrana i prikazana nakon što se komponenta renderira na stranici.
Odaberimo predmet kao 'C'. 'C' se vraća ispod kombiniranog okvira.
Primjer 2:
U ovom primjeru renderirat ćemo različite komponente na temelju vrijednosti popisa za odabir tipa kampanje (iz objekta kampanje).
- Ako je vrsta kampanje “Konferencija”, prikazat ćemo predložak koji vraća tekst – Status kampanje: PLANIRANO
- Ako je vrsta kampanje “Webinar”, prikazat ćemo predložak koji vraća tekst – Status kampanje: DOVRŠENO
- Ako je vrsta kampanje “Partneri”, prikazat ćemo predložak koji vraća tekst – Status kampanje: U TIJEKU
- Status kampanje: ODBAČENA za ostale opcije.
secondExample.html
< div razreda = 'slds-var-m-around_medium' stil = 'visina:20px; širina:400px' >
=
opcije = { CampaignTypeValues. podaci .vrijednosti }
onchange = { rukovanjePromjena } >
< / lightning-combobox>
< / predložak>< br / >
< / div >
< br >< br >
= { conferenceval } >
< centar > Status kampanje: < b >< ja > PLANIRANO< / ja >< / b > < / centar >
< / predložak>
= { webinarval } >
< centar > Status kampanje: < b >< ja > DOVRŠENO< / ja >< / b > < / centar >
< / predložak>
= { partnerval } >
< centar > Status kampanje: < b >< ja > U TIJEKU< / ja >< / b > < / centar >
< / predložak>
< centar > Status kampanje: < b >< ja > PREKINUTO< / ja >< / b > < / centar >
< / predložak>
< / karta munje>
< / predložak>
secondExample.js
Uvozimo objekt Campaign (Standard) kao CAMPAIGN i Type iz njega kao TYPE. Iz lightning/uiObjectInfoApi uvozimo getPicklistValues i getObjectInfo. Oni će dobiti vrijednosti popisa odabira dostupne u polju Vrsta. Oni će se koristiti kao opcije za kombinirani okvir. Sljedeće se obrađuje u handleChange().
- Ako je vrijednost === “Konferencija”, varijablu conferenceval postavljamo na true, a druge dvije na false.
- Ako je vrijednost === “Webinar”, postavljamo varijablu webinarval na true, a druge dvije na false.
- Ako je vrijednost === “Partneri”, varijablu partnerval postavljamo na true, a druge dvije na false.
- Ako vrijednost nije u danim opcijama, sve su lažne.
uvoz KAMPANJA od '@salesforce/schema/Campaign' ;
uvoz VRSTA od '@salesforce/schema/Campaign.Type' ;
uvoz { getPicklistValues } iz 'lightning/uiObjectInfoApi' ;
uvoz { getObjectInfo } iz 'lightning/uiObjectInfoApi' ;
izvoz zadano razreda Drugi primjer proteže se LightningElement {
@ pratiti vrijednost ;
// Dobivanje objekta
@ žica ( getObjectInfo , { objectApiName : KAMPANJA } )
objectInfo ;
// Dobivanje vrste kampanje - popis za odabir
@ žica ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TIP } )
CampaignTypeValues ;
conferenceval = lažno ;
webinarval = lažno ;
partnerval = lažno ;
drugo = lažno ;
// Rukovanje logikom
handleChange ( događaj ) {
ovaj . vrijednost = događaj. cilj . vrijednost ;
ako ( ovaj . vrijednost === 'Konferencija' ) {
// Prikaži status kao PLANIRANO
ovaj . conferenceval = pravi ;
ovaj . webinarval = lažno ;
ovaj . partnerval = lažno ;
}
drugo ako ( ovaj . vrijednost === 'Webinari' ) {
// Prikaži status kao DOVRŠENO
ovaj . webinarval = pravi ;
ovaj . conferenceval = lažno ;
ovaj . partnerval = lažno ;
}
drugo ako ( ovaj . vrijednost === 'Partneri' ) {
// Prikaži status kao U TIJEKU
ovaj . webinarval = lažno ;
ovaj . conferenceval = lažno ;
ovaj . partnerval = pravi ;
}
drugo {
// Prikaz statusa kao IN ABORTED
ovaj . webinarval = lažno ;
ovaj . conferenceval = lažno ;
ovaj . partnerval = lažno ;
}
}
}
secondComponent.js-meta.xml
verzija = '1,0' ?>< / mete>
< / LightningComponentBundle>
Izlaz:
Tip – “Konferencija”. Dakle, status je “PLANIRAN”.
Tip – “Webinar”. Dakle, status je “ZAVRŠENO”.
Tip – “Partneri”. Dakle, status je “U TIJEKU”.
Vrsta nije u ponuđenim opcijama. Dakle, status je 'PREKINUTO'.
Primjer 3:
Sada stvaramo kombinirani okvir sa zapisima kampanje kao opcijama. Ako odaberemo bilo koju opciju, odgovarajuća vrsta kampanje vratit će se na korisničko sučelje.
Prvo, moramo stvoriti Apex klasu s metodom getCampaign(). Ova metoda vraća popis svih kampanja s ID-om, nazivom, vrstom i statusom.
CampaignRecords. apxcjavno s dijeljenjem razreda CampaignRecords {
@ AuraOmogućeno ( predmemorijski = pravi )
// Dobivanje popisa kampanja
javnost statički Popis < Kampanja > getCampaign ( ) {
povratak [ ODABIR Id , Ime , Tip , Status iz kampanje ] ;
}
}
thirdExample.html
< div razreda = 'slds-var-m-around_medium' stil = 'visina:20px; širina:400px' >
označiti = 'Odaberite naziv kampanje'
opcije = { Opcije kampanje }
vrijednost = { vrijednost }
onchange = { handleonchange }
>
< / lightning-combobox>
< / div >< br >
< br >
< str > Vrsta kampanje za ovu kampanju: < b > {vrijednost} < / b >< / str >
< / karta munje>
< / predložak>
thirdExample.js
- Moramo navesti metodu koja dobiva popis kampanja unutar Connectedcallback() metode. Deklarirajte polje pod nazivom 'kampovi' i pohranite rezultat s oznakom kao ID kampanje i vrijednošću kao vrstom kampanje. Ovaj niz je ulaz za CampNames (ovo se mora stvoriti s dekoratorom staze).
- U Campaignoptions() getter metodi vratite polje CampaignNames. Dakle, kombinirani okvir koristi ove opcije.
- Postavite odabranu vrijednost u metodi rukovatelja handleonchange().
uvoz getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
izvoz zadano razreda TrećiPrimjer proteže se LightningElement {
vrijednost = '' ;
@ pratiti nazive kampanja = [ ] ;
dobiti Opcije kampanje ( ) {
povratak ovaj . nazivi kampanja ;
}
// Dodajte opcije nizu kampova iz Apexa.
// oznaka će biti naziv kampanje
// vrijednost će biti vrsta kampanje
povezan Povratni poziv ( ) {
getCampaign ( )
. zatim ( proizlaziti => {
neka kampovi = [ ] ;
za ( bio je k = 0 ; k < proizlaziti. duljina ; k ++ ) {
logorima. gurnuti ( { označiti : proizlaziti [ k ] . Ime , vrijednost : proizlaziti [ k ] . Tip } ) ;
}
ovaj . nazivi kampanja = logorima ;
} )
}
// Rukovanje vrijednošću
handleonchange ( događaj ) {
ovaj . vrijednost = događaj. detalj . vrijednost ;
}
}
Izlaz:
Odaberimo zapis i vidimo vrstu.
Zaključak
Naučili smo kako stvoriti kombinirani okvir u LWC-u s atributima i primjerima. Prvo smo stvorili kombinirani okvir s popisom vrijednosti i prikazali odabranu vrijednost. Zatim renderiramo HTML predložak na temelju odabrane vrijednosti putem uvjetnog renderiranja. Na kraju, naučili smo kako stvoriti opcije za kombinirani okvir iz postojećih Salesforce zapisa i prikazati povezana polja na korisničkom sučelju.