A Salesforce LWC-ben, ha engedélyezni szeretné a felhasználó számára, hogy válasszon egy beállítást a megadott listából, a kombinált mezőt használja. Ebben az útmutatóban példákkal megvitatjuk a kombinált doboz létrehozását és a kombinált doboz által támogatott különböző attribútumokat.
Combobox
Alapvetően a combobox egy írásvédett mező, amely bemenetet biztosít a megadott opciók közül egy opció kiválasztásához. Ezt létrehozhatjuk a lightning-combobox címkével. Az attribútumok egymás után a sebesség, amelyet szóköz választ el. Beszéljünk néhány attribútumról, amelyek szükségesek a kombinált doboz létrehozásához.
- címke – Ezzel adható meg a kombinált doboz címkéje (szövege).
- lehetőségek – Mindegyik opció felveszi a „label” és „value” attribútumot. A több opciót egy listában adhatjuk meg, vesszővel elválasztva.
- helykitöltő : Az opció kiválasztása előtt a felhasználónak ismernie kell az opciókkal kapcsolatos információkat. Tehát ez az attribútum meg van adva.
- kívánt : Bizonyos esetekben kötelező az opció kiválasztása. Ennek az attribútumnak a megadásával tehetjük szükségessé.
- Tiltva : A jelölőnégyzetből az opció kiválasztásával letiltható a felhasználó. Ez az attribútum letiltja a kombinált dobozt.
Szintaxis:
Nézzük meg, hogyan hozhatunk létre néhány fontos attribútumot tartalmazó kombinált dobozt.
label='címke_név'
érték={érték_a_beállítás_értékéből}
placeholder='Súgószöveg'
Options={List_of_options}
onchange={handleChange} >
Leírás:
Lássuk a kombinált doboz létrehozásának és a vele való munka lépéseit.
A JavaScript-fájlban hozzon létre egy listát az opciókról a „getter” metóduson belüli címkével és értékkel.
Hozzon létre egy változót, amely tárolja az alapértelmezett beállítást.
Írja be a kezelõ függvényt, amely a felhasználó által a felhasználói felületen kiválasztott opciót tárolja.
A HTML-fájlban hozzon létre egy kombinált mezőt, és adja át az attribútumokat. Ezenkívül át kell adnunk az onchange() eseménykezelőt, amely kezeli a kombinált doboz opcióit. Ehhez a „js” fájlban létrehozott „Handler” függvény szükséges.
Az ebben az útmutatóban tárgyalt összes példában a logika „js” kódként jelenik meg. Ezt követően megadjuk a képernyőképet, amely tartalmazza a teljes „js” kódot.
1. példa:
Hozzon létre egy kombinált dobozt öt témával (részletekkel) a Javascript-fájlban. Adja meg az alapértelmezett értéket „JAVA”-ként. Kezelje a combobox-ot a handleSubjectsOnChange() metódusban. Adja át az értéket és a részleteket a címkével ellátott HTML-fájl „érték és beállítások” attribútumainak, és telepítse az összetevőt.
firstExample.html
< div osztály = 'slds-var-m-around_medium' >
címke = 'Válaszd ki a tárgyat:'
érték = { érték }
lehetőségek = { részletek }
váltáskor = { handleSubjectsOnChange } >< / villám-kombibox>
< br >
< p > Az Ön tárgya: < b > {érték} < / b >< / p >
< / div >
< / villámkártya>
< / sablon>
firstExample.js
// Alapértelmezett érték létrehozása - 'JAVA' a Combobox számáraérték = 'JÁVA' ;
// Mutasd meg az alanyokat
kap részletek ( ) {
// 5 tantárgy
Visszatérés [ { címke : 'Jáva' , érték : 'JÁVA' } ,
{ címke : 'Piton' , érték : 'PITON' } ,
{ címke : 'HTML' , érték : 'HTML' } ,
{ címke : 'C' , érték : 'C' } ,
{ címke : 'C++' , érték : 'C++' } ] ;
}
// Logika kezelése az érték beállításához
handleSubjectsOnChange ( esemény ) {
ez . érték = esemény. Részlet . érték ;
}
}
Teljes kód:
firstComponent.js-meta.xml
változat = '1.0' ?>< / célpontok>
< / LightningComponentBundle>
Kimenet:
Adja hozzá ezt az összetevőt bármely objektum „Rekord” oldalához. A HTML fájlban a bekezdéscímkében jelenítjük meg az értéket. Ha a felhasználó bármelyik lehetőséget választja, az félkövéren jelenik meg. Alapértelmezés szerint a „JAVA” van kiválasztva, és azután jelenik meg, hogy az összetevőt az oldalon megjelenítették.
Válasszuk a tárgyat „C”-nek. „C” jelenik meg a combobox alatt.
2. példa:
Ebben a példában a különböző összetevőket a Campaign Type picklista értékei alapján jelenítjük meg (a Campaign objektumból).
- Ha a kampány típusa „Konferencia”, akkor a szöveget visszaadó sablont jelenítjük meg – Kampány állapota: TERVEZETT
- Ha a kampány típusa „Webinar”, akkor a szöveget visszaadó sablont jelenítjük meg – Kampány állapota: KÉSZ
- Ha a kampány típusa „Partnerek”, akkor a szöveget visszaadó sablont jelenítjük meg – Kampány állapota: FOLYAMATBAN
- Kampány állapota: MEGBESZÜLVE a többi lehetőséghez.
másodikPélda.html
< div osztály = 'slds-var-m-around_medium' stílus = 'height:20px; width:400px' >
lehetőségek = { CampaignTypeValues. adat .értékek }
váltáskor = { fogantyúChange } >
< / villám-kombibox>
< / sablon>< br / >
< / div >
< br >< br >
< központ > Kampány állapota: < b >< én > TERVEZETT< / én >< / b > < / központ >
< / sablon>
< központ > Kampány állapota: < b >< én > TELJES< / én >< / b > < / központ >
< / sablon>
< központ > Kampány állapota: < b >< én > FOLYAMATBAN< / én >< / b > < / központ >
< / sablon>
< központ > Kampány állapota: < b >< én > MEGSZABADÍTVA< / én >< / b > < / központ >
< / sablon>
< / villámkártya>
< / sablon>
secondExample.js
A Campaign objektumot (Standard) CAMPAIGN-ként importáljuk, a típust pedig TÍPUS-ként. A lightning/uiObjectInfoApi-ból importáljuk a getPicklistValues-t és a getObjectInfo-t. Ezek megkapják a Típus mezőben elérhető kiválasztási lista értékeket. Ezek a kombinált doboz opcióiként lesznek felhasználva. A következőket a handleChange() kezeli.
- Ha a === “Conference” érték, akkor a Conferenceval változót igazra, a másik kettőt hamisra állítjuk.
- Ha az érték === „Webinar”, akkor a webinarval változót igazra, a másik kettőt pedig hamisra állítjuk.
- Ha az === “Partners” érték, akkor a partnerval változót igazra, a másik kettőt hamisra állítjuk.
- Ha az érték nem szerepel a megadott opciókban, akkor mindegyik hamis.
import KAMPÁNY innen '@salesforce/schema/Campaign' ;
import TYPE innen '@salesforce/schema/Campaign.Type' ;
import { getPicklistValues } tól től 'lightning/uiObjectInfoApi' ;
import { getObjectInfo } tól től 'lightning/uiObjectInfoApi' ;
export alapértelmezett osztály Második példa kiterjed Villámelem {
@ nyomvonal értéke ;
// Szerezd meg az objektumot
@ huzal ( getObjectInfo , { objectApiName : KAMPÁNY } )
objectInfo ;
// A kampány típusának lekérése - Picklist
@ huzal ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TÍPUS } )
CampaignTypeValues ;
konferenciaval = hamis ;
webinarval = hamis ;
partnerval = hamis ;
Egyéb = hamis ;
// Kezelje a logikát
fogantyúChange ( esemény ) {
ez . érték = esemény. cél . érték ;
ha ( ez . érték === 'konferencia' ) {
// Az állapot megjelenítése TERVEZETT
ez . konferenciaval = igaz ;
ez . webinarval = hamis ;
ez . partnerval = hamis ;
}
más ha ( ez . érték === 'Webszemináriumok' ) {
// Az állapot megjelenítése KÉSZ
ez . webinarval = igaz ;
ez . konferenciaval = hamis ;
ez . partnerval = hamis ;
}
más ha ( ez . érték === 'Partnerek' ) {
// Az állapot megjelenítése FOLYAMATBAN
ez . webinarval = hamis ;
ez . konferenciaval = hamis ;
ez . partnerval = igaz ;
}
más {
// Állapot megjelenítése IN BORTED-ként
ez . webinarval = hamis ;
ez . konferenciaval = hamis ;
ez . partnerval = hamis ;
}
}
}
secondComponent.js-meta.xml
változat = '1.0' ?>< / célpontok>
< / LightningComponentBundle>
Kimenet:
Típus – „Konferencia”. Tehát az állapot „TERVEZETT”.
Típus – „Webinar”. Tehát az állapot „BEFEJEZETT”.
Típus – „Partnerek”. Tehát az állapot „FOLYAMATBAN”.
A típus nem szerepel a megadott opciók között. Tehát az állapot „MEGSZAKÍTOTT”.
3. példa:
Most létrehozunk egy kombinált mezőt a kampányrekordokkal opcióként. Ha bármelyik opciót kiválasztjuk, akkor a megfelelő Kampánytípus kerül visszaadásra a felhasználói felületen.
Először is létre kell hoznunk egy Apex osztályt a getCampaign() metódussal. Ez a módszer az összes kampány listáját adja vissza azonosítóval, névvel, típussal és állapottal.
CampaignRecords. apxcnyilvános megosztással osztály CampaignRecords {
@ Aura Enabled ( gyorsítótárazható = igaz )
// A kampányok listájának lekérése
nyilvános statikus Lista < Kampány > getCampaign ( ) {
Visszatérés [ SELECT Id , Név , típus , Állapot a kampányból ] ;
}
}
harmadikPélda.html
< div osztály = 'slds-var-m-around_medium' stílus = 'height:20px; width:400px' >
címke = 'Kampánynév kiválasztása'
lehetőségek = { Kampányok }
érték = { érték }
váltáskor = { kezelni vltozst }
>
< / villám-kombibox>
< / div >< br >
< br >
< p > Kampánytípus ehhez a kampányhoz: < b > {érték} < / b >< / p >
< / villámkártya>
< / sablon>
harmadikPélda.js
- Meg kell adnunk azt a metódust, amely lekéri a Kampányok listáját a connectcallback() metóduson belül. Deklaráljon egy „camps” nevű tömböt, és tárolja az eredményt Kampányazonosítóként, az érték pedig Kampánytípusként. Ez a tömb a kampányNames bemenete (ezt a pályadekorátorral kell létrehozni).
- A Campaignoptions() getter metódusban adja vissza a campaignNames tömböt. Tehát a combobox ezeket a beállításokat használja.
- Állítsa be a kiválasztott értéket a handleonchange() kezelő metódusban.
import getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
export alapértelmezett osztály HarmadikPélda kiterjed Villámelem {
érték = '' ;
@ nyomon követni a kampányneveket = [ ] ;
kap Kampányok ( ) {
Visszatérés ez . kampánynevek ;
}
// Adja hozzá a beállításokat a camps tömbhöz az Apex-ből.
// címke a kampány neve lesz
// érték lesz a Kampány típusa
csatlakoztatva Visszahívás ( ) {
getCampaign ( )
. akkor ( eredmény => {
hadd táborok = [ ] ;
számára ( volt k = 0 ; k < eredmény. hossz ; k ++ ) {
táborok. nyom ( { címke : eredmény [ k ] . Név , érték : eredmény [ k ] . típus } ) ;
}
ez . kampánynevek = táborok ;
} )
}
// Kezelje az értéket
kezelni vltozst ( esemény ) {
ez . érték = esemény. Részlet . érték ;
}
}
Kimenet:
Válasszuk ki a rekordot, és nézzük meg a típust.
Következtetés
Megtanultuk, hogyan hozhatunk létre kombinált dobozt LWC-ben attribútumokkal és példákkal. Először létrehoztunk egy kombinált mezőt az értékek listájával, és megjelenítettük a kiválasztott értéket. Ezután a feltételes rendereléssel a kiválasztott érték alapján rendereljük a HTML-sablont. Végül megtanultuk, hogyan hozhatjuk létre a kombinált mező beállításait a meglévő Salesforce-rekordokból, és hogyan jeleníthetjük meg a kapcsolódó mezőket a felhasználói felületen.