Salesforce LWC இல், குறிப்பிட்ட விருப்பங்களின் பட்டியலில் இருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்க பயனரை அனுமதிக்க விரும்பினால், காம்போபாக்ஸ் பயன்படுத்தப்படும். இந்த வழிகாட்டியில், காம்போபாக்ஸை எவ்வாறு உருவாக்குவது மற்றும் காம்போபாக்ஸால் ஆதரிக்கப்படும் பல்வேறு பண்புகளை எடுத்துக்காட்டுகளுடன் விவாதிப்போம்.
காம்போபாக்ஸ்
அடிப்படையில், காம்போபாக்ஸ் என்பது படிக்க-மட்டும் புலமாகும், இது குறிப்பிட்ட விருப்பங்களிலிருந்து ஒரு விருப்பத்தைத் தேர்வுசெய்ய உள்ளீட்டை வழங்குகிறது. மின்னல்-காம்போபாக்ஸ் குறிச்சொல்லைப் பயன்படுத்தி இதை உருவாக்கலாம். பண்புக்கூறுகள் ஒன்றன் பின் ஒன்றாக வேகம் ஆகும், அவை விண்வெளியால் பிரிக்கப்படுகின்றன. காம்போபாக்ஸை உருவாக்கும் போது தேவைப்படும் சில பண்புகளைப் பற்றி விவாதிப்போம்.
- முத்திரை - இது உங்கள் காம்போபாக்ஸிற்கான லேபிளை (உரை) குறிப்பிட பயன்படுகிறது.
- விருப்பங்கள் - ஒவ்வொரு விருப்பமும் 'லேபிள்' மற்றும் 'மதிப்பு' பண்புகளை எடுக்கும். கமாவால் பிரிக்கப்பட்ட பட்டியலில் உள்ள பல விருப்பங்களை நாம் குறிப்பிடலாம்.
- இடப்பெயர்ச்சி : ஒரு விருப்பத்தைத் தேர்ந்தெடுப்பதற்கு முன், பயனர் விருப்பங்கள் தொடர்பான தகவல்களைத் தெரிந்து கொள்ள வேண்டும். எனவே, இந்த பண்பு குறிப்பிடப்பட்டுள்ளது.
- தேவை : சில சந்தர்ப்பங்களில், விருப்பத்தைத் தேர்ந்தெடுப்பது கட்டாயமாகும். இந்தப் பண்புக்கூறைக் குறிப்பிடுவதன் மூலம் நாம் அதைத் தேவைப்படுத்தலாம்.
- ஊனமுற்றவர் : தேர்வுப்பெட்டியிலிருந்து விருப்பத்தைத் தேர்ந்தெடுப்பதன் மூலம் பயனரைத் தடுக்க முடியும். இந்த பண்பு காம்போபாக்ஸை முடக்குகிறது.
தொடரியல்:
சில முக்கியமான பண்புகளுடன் ஒரு காம்போபாக்ஸை எவ்வாறு உருவாக்குவது என்று பார்ப்போம்.
<மின்னல்-காம்போபாக்ஸ்
பெயர்='பெயர்'
label='label_name'
மதிப்பு={value_from_the_option}
placeholder='உதவி உரை'
விருப்பங்கள்={List_of_options}
onchange={handleChange} >
விவரக்குறிப்பு:
காம்போபாக்ஸை உருவாக்கி அதனுடன் வேலை செய்வதற்கான படிகளைப் பார்ப்போம்.
ஜாவாஸ்கிரிப்ட் கோப்பில், 'கெட்டர்' முறையில் லேபிள் மற்றும் மதிப்புடன் விருப்பங்களின் பட்டியலை உருவாக்கவும்.
இயல்புநிலை விருப்பத்தை சேமிக்கும் ஒரு மாறியை உருவாக்கவும்.
UI இலிருந்து பயனரால் தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை சேமிக்கும் கைப்பிடி செயல்பாட்டை எழுதவும்.
HTML கோப்பில், காம்போபாக்ஸை உருவாக்கி, பண்புக்கூறுகளை அனுப்பவும். மேலும், காம்போபாக்ஸில் உள்ள விருப்பங்களைக் கையாளும் onchange() நிகழ்வு ஹேண்ட்லரை நாம் அனுப்ப வேண்டும். இது 'js' கோப்பில் உருவாக்கப்பட்ட 'ஹேண்ட்லர்' செயல்பாட்டை எடுக்கும்.
இந்த வழிகாட்டியில் நாம் விவாதிக்கப் போகும் அனைத்து எடுத்துக்காட்டுகளிலும், தர்க்கம் 'js' குறியீடாக வழங்கப்படும். அதன் பிறகு, முழு 'js' குறியீட்டையும் உள்ளடக்கிய ஸ்கிரீன்ஷாட்டை நாங்கள் குறிப்பிடுகிறோம்.
எடுத்துக்காட்டு 1:
ஜாவாஸ்கிரிப்ட் கோப்பில் ஐந்து பாடங்களுடன் (விவரங்கள்) காம்போபாக்ஸை உருவாக்கவும். இயல்புநிலை மதிப்பை 'JAVA' எனக் குறிப்பிடவும். HandleSubjectsOnChange() முறையில் காம்போபாக்ஸைக் கையாளவும். HTML கோப்பில் உள்ள 'மதிப்பு மற்றும் விருப்பங்கள்' பண்புக்கூறுகளுக்கு மதிப்பு மற்றும் விவரங்களை லேபிளுடன் அனுப்பவும் மற்றும் கூறுகளை வரிசைப்படுத்தவும்.
firstExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'பாடங்கள் சேர்க்கை' >
< div வர்க்கம் = 'slds-var-m-around_medium' >
<மின்னல்-காம்போபாக்ஸ்
முத்திரை = 'உங்கள் தலைப்பைத் தேர்ந்தெடுக்கவும்:'
மதிப்பு = { மதிப்பு }
விருப்பங்கள் = { விவரங்கள் }
மாற்றம் = { கைப்பிடி பாடங்கள்ஆன் மாற்றம் } >< / lightning-combobox>
< br >
< ப > உங்கள் பொருள்: < பி > {மதிப்பு} < / பி >< / ப >
< / div >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
firstExample.js
// இயல்புநிலை மதிப்பை உருவாக்கவும் - காம்போபாக்ஸிற்கான 'JAVA'மதிப்பு = 'ஜாவா' ;
// பாடங்களைக் காட்டு
பெறு விவரங்கள் ( ) {
// 5 பாடங்கள்
திரும்ப [ { முத்திரை : 'ஜாவா' , மதிப்பு : 'ஜாவா' } ,
{ முத்திரை : 'பைத்தான்' , மதிப்பு : 'பைதான்' } ,
{ முத்திரை : 'HTML' , மதிப்பு : 'HTML' } ,
{ முத்திரை : 'சி' , மதிப்பு : 'சி' } ,
{ முத்திரை : 'சி++' , மதிப்பு : 'சி++' } ] ;
}
// மதிப்பை அமைக்க தர்க்கத்தைக் கையாளவும்
கைப்பிடி பாடங்கள்ஆன் மாற்றம் ( நிகழ்வு ) {
இது . மதிப்பு = நிகழ்வு. விவரம் . மதிப்பு ;
}
}
முழு குறியீடு:
firstComponent.js-meta.xml
பதிப்பு = '1.0' ?><வெளிப்படுத்தப்பட்டது> உண்மை < / வெளிப்படுத்தப்பட்டது>
<இலக்குகள்>
<இலக்கு> மின்னல்__ஆப்பக்கம் < / இலக்கு>
<இலக்கு> மின்னல்__பதிவுப்பக்கம் < / இலக்கு>
< / இலக்குகள்>
< / LightningComponentBundle>
வெளியீடு:
எந்தவொரு பொருளின் 'பதிவு' பக்கத்தில் இந்தக் கூறுகளைச் சேர்க்கவும். HTML கோப்பில், பத்தி குறிச்சொல்லில் மதிப்பைக் காண்பிப்போம். ஒரு பயனர் ஏதேனும் ஒரு விருப்பத்தைத் தேர்ந்தெடுக்கும்போது, அது தடிமனானதாகக் காட்டப்படும். முன்னிருப்பாக, 'JAVA' தேர்ந்தெடுக்கப்பட்டு, பக்கத்தில் பாகம் ரெண்டர் செய்யப்பட்ட பிறகு காட்டப்படும்.
பாடத்தை 'C' ஆக தேர்வு செய்வோம். காம்போபாக்ஸின் கீழே “C” திரும்பும்.
எடுத்துக்காட்டு 2:
இந்த எடுத்துக்காட்டில், பிரச்சார வகை பிக்லிஸ்ட் மதிப்புகளின் அடிப்படையில் (பிரச்சார பொருளில் இருந்து) வெவ்வேறு கூறுகளை வழங்குவோம்.
- பிரச்சார வகை 'மாநாடு' என்றால், உரையை வழங்கும் டெம்ப்ளேட்டை நாங்கள் வழங்குவோம் - பிரச்சார நிலை: திட்டமிடப்பட்டது
- பிரச்சார வகை 'வெபினார்' எனில், உரையை வழங்கும் டெம்ப்ளேட்டை நாங்கள் வழங்குவோம் - பிரச்சார நிலை: முடிந்தது
- பிரச்சார வகை 'பங்காளர்கள்' எனில், உரையை வழங்கும் டெம்ப்ளேட்டை நாங்கள் வழங்குவோம் - பிரச்சார நிலை: முன்னேற்றத்தில் உள்ளது
- பிரச்சார நிலை: மீதமுள்ள விருப்பங்களுக்கு நிறுத்தப்பட்டது.
secondExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'பிரச்சார வகை' சின்னம்- பெயர் = 'தரநிலை: பிரச்சாரம்' >
< div வர்க்கம் = 'slds-var-m-around_medium' பாணி = 'உயரம்:20px; அகலம்:400px' >
<வார்ப்புரு அதிர்ஷ்டம்: என்றால் = { பிரச்சார வகை மதிப்புகள். தகவல்கள் } >
<மின்னல்-காம்போபாக்ஸ் மதிப்பு = { மதிப்பு }
விருப்பங்கள் = { பிரச்சார வகை மதிப்புகள். தகவல்கள் .மதிப்புகள் }
மாற்றம் = { கைப்பிடி மாற்றம் } >
< / lightning-combobox>
< / டெம்ப்ளேட்> br / >
< / div >
< br >< br >
<வார்ப்புரு அதிர்ஷ்டம்: என்றால் = { மாநாடு } >
< மையம் > பிரச்சார நிலை: < பி >< நான் > திட்டமிடப்பட்டது< / நான் >< / பி > < / மையம் >
< / டெம்ப்ளேட்>
<வார்ப்புரு அதிர்ஷ்டம்:elseif = { வலைநாவல் } >
< மையம் > பிரச்சார நிலை: < பி >< நான் > முடிக்கப்பட்டது< / நான் >< / பி > < / மையம் >
< / டெம்ப்ளேட்>
<வார்ப்புரு அதிர்ஷ்டம்:elseif = { பங்குதாரர் } >
< மையம் > பிரச்சார நிலை: < பி >< நான் > செயல்பாட்டில் உள்ளது< / நான் >< / பி > < / மையம் >
< / டெம்ப்ளேட்>
<வார்ப்புரு அதிர்ஷ்டம்:else>
< மையம் > பிரச்சார நிலை: < பி >< நான் > கைவிடப்பட்டது< / நான் >< / பி > < / மையம் >
< / டெம்ப்ளேட்>
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
secondExample.js
பிரச்சாரப் பொருளை (தரநிலை) CAMPAIGN ஆக இறக்குமதி செய்து அதிலிருந்து TYPE என தட்டச்சு செய்கிறோம். மின்னல்/uiObjectInfoApi இலிருந்து, getPicklistValues மற்றும் getObjectInfo ஐ இறக்குமதி செய்கிறோம். இவை வகை புலத்தில் கிடைக்கும் பிக்லிஸ்ட் மதிப்புகளைப் பெறும். இவை காம்போபாக்ஸிற்கான விருப்பங்களாகப் பயன்படுத்தப்படும். பின்வருபவை கைப்பிடி மாற்றம்() இல் கையாளப்படுகின்றன.
- மதிப்பு === “மாநாடு” எனில், கான்ஃபரன்ஸ்வல் மாறியை true என்றும் மற்ற இரண்டையும் தவறு என்றும் அமைக்கிறோம்.
- மதிப்பு === “Webinar” எனில், webinarval மாறியை true எனவும், மற்ற இரண்டையும் false எனவும் அமைக்கிறோம்.
- மதிப்பு === “பார்ட்னர்கள்” எனில், பார்ட்னர்வால் மாறியை true என்றும் மற்ற இரண்டையும் தவறு என்றும் அமைப்போம்.
- கொடுக்கப்பட்ட விருப்பங்களில் மதிப்பு இல்லை என்றால், அனைத்தும் தவறானவை.
இறக்குமதி பிரச்சாரம் '@salesforce/schema/Campaign' ;
இறக்குமதி இருந்து TYPE '@salesforce/schema/Campaign.Type' ;
இறக்குமதி { getPicklistValues } இருந்து 'மின்னல்/uiObjectInfoApi' ;
இறக்குமதி { getObjectInfo } இருந்து 'மின்னல்/uiObjectInfoApi' ;
ஏற்றுமதி இயல்புநிலை வர்க்கம் இரண்டாவது உதாரணம் நீட்டிக்கிறது மின்னல் உறுப்பு {
@ தட மதிப்பு ;
// பொருளைப் பெறுங்கள்
@ கம்பி ( getObjectInfo , { objectApiName : பிரச்சாரம் } )
பொருள் தகவல் ;
// பிரச்சார வகையைப் பெறவும் - தேர்வுப் பட்டியல்
@ கம்பி ( getPicklistValues , { பதிவு வகை ஐடி : '$objectInfo.data.defaultRecordTypeId' , புலம் பெயர் : வகை } )
பிரச்சார வகை மதிப்புகள் ;
மாநாடு = பொய் ;
வலைநாவல் = பொய் ;
பங்குதாரர் = பொய் ;
மற்றவை = பொய் ;
// தர்க்கத்தை கையாளவும்
கைப்பிடி மாற்றம் ( நிகழ்வு ) {
இது . மதிப்பு = நிகழ்வு. இலக்கு . மதிப்பு ;
என்றால் ( இது . மதிப்பு === 'மாநாடு' ) {
//திட்டமிடப்பட்ட நிலையைக் காண்பி
இது . மாநாடு = உண்மை ;
இது . வலைநாவல் = பொய் ;
இது . பங்குதாரர் = பொய் ;
}
வேறு என்றால் ( இது . மதிப்பு === 'வெபினார்ஸ்' ) {
// காட்சி நிலை முடிந்தது
இது . வலைநாவல் = உண்மை ;
இது . மாநாடு = பொய் ;
இது . பங்குதாரர் = பொய் ;
}
வேறு என்றால் ( இது . மதிப்பு === 'கூட்டாளர்கள்' ) {
// காட்சி நிலை முன்னேற்றத்தில் உள்ளது
இது . வலைநாவல் = பொய் ;
இது . மாநாடு = பொய் ;
இது . பங்குதாரர் = உண்மை ;
}
வேறு {
// காட்சி நிலை நிறுத்தப்பட்டது
இது . வலைநாவல் = பொய் ;
இது . மாநாடு = பொய் ;
இது . பங்குதாரர் = பொய் ;
}
}
}
secondComponent.js-meta.xml
பதிப்பு = '1.0' ?><வெளிப்படுத்தப்பட்டது> உண்மை < / வெளிப்படுத்தப்பட்டது>
<இலக்குகள்>
<இலக்கு> மின்னல்__ஆப்பக்கம் < / இலக்கு>
<இலக்கு> மின்னல்__பதிவுப்பக்கம் < / இலக்கு>
< / இலக்குகள்>
< / LightningComponentBundle>
வெளியீடு:
வகை - 'மாநாடு'. எனவே, நிலை 'திட்டமிடப்பட்டது'.
வகை - 'வெபினார்'. எனவே, நிலை 'முடிந்தது'.
வகை - 'பங்காளர்கள்'. எனவே, நிலை 'முன்னேற்றத்தில் உள்ளது'.
வழங்கப்பட்ட விருப்பங்களில் வகை இல்லை. எனவே, நிலை 'நிறுத்தப்பட்டது'.
எடுத்துக்காட்டு 3:
இப்போது, பிரச்சாரப் பதிவுகளை விருப்பங்களாகக் கொண்ட காம்போபாக்ஸை உருவாக்குகிறோம். நாங்கள் ஏதேனும் விருப்பத்தைத் தேர்ந்தெடுத்தால், தொடர்புடைய பிரச்சார வகை UI இல் திரும்பும்.
முதலில், getCampaign()முறையுடன் ஒரு Apex வகுப்பை உருவாக்க வேண்டும். இந்த முறை ஐடி, பெயர், வகை மற்றும் நிலையுடன் அனைத்து பிரச்சாரங்களின் பட்டியலை வழங்குகிறது.
பிரச்சார பதிவுகள். apxcபகிரும் பொது வர்க்கம் பிரச்சார பதிவுகள் {
@ AuraEnabled ( தேக்கக்கூடிய = உண்மை )
// பிரச்சாரங்களின் பட்டியலைப் பெறுங்கள்
பொது நிலையான பட்டியல் < பிரச்சாரம் > பிரச்சாரம் ( ) {
திரும்ப [ ஐடியைத் தேர்ந்தெடுக்கவும் , பெயர் , வகை , பிரச்சாரத்தின் நிலை ] ;
}
}
thirdExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'பிரச்சார வகை' சின்னம்- பெயர் = 'தரநிலை: பிரச்சாரம்' >
< div வர்க்கம் = 'slds-var-m-around_medium' பாணி = 'உயரம்:20px; அகலம்:400px' >
<மின்னல்-காம்போபாக்ஸ் பெயர் = 'பிரசாரம்'
முத்திரை = 'பிரசாரத்தின் பெயரைத் தேர்ந்தெடு'
விருப்பங்கள் = { பிரச்சாரங்கள் }
மதிப்பு = { மதிப்பு }
மாற்றம் = { கைப்பிடி மாற்றம் }
>
< / lightning-combobox>
< / div >< br >
< br >
< ப > இந்த பிரச்சாரத்திற்கான பிரச்சார வகை: < பி > {மதிப்பு} < / பி >< / ப >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
மூன்றாவது எடுத்துக்காட்டு.js
- இணைக்கப்பட்ட கால்பேக்() முறையில் பிரச்சாரங்களின் பட்டியலைப் பெறும் முறையை நாம் குறிப்பிட வேண்டும். 'முகாம்கள்' என்று பெயரிடப்பட்ட ஒரு வரிசையை அறிவித்து, அதன் முடிவை பிரச்சார ஐடி மற்றும் மதிப்பை பிரச்சார வகை என லேபிளுடன் சேமிக்கவும். இந்த வரிசையானது பிரச்சாரப் பெயர்களுக்கான உள்ளீடு ஆகும் (இது டிராக் டெக்கரேட்டரைக் கொண்டு உருவாக்கப்பட வேண்டும்).
- Campaignoptions() getter முறையில், campaignnames வரிசையை வழங்கவும். எனவே, காம்போபாக்ஸ் இந்த விருப்பங்களைப் பயன்படுத்துகிறது.
- தேர்ந்தெடுக்கப்பட்ட மதிப்பை handonchange() Handler முறையில் அமைக்கவும்.
இறக்குமதி இருந்து பிரச்சாரம் '@salesforce/apex/CampaignRecords.getCampaign' ;
ஏற்றுமதி இயல்புநிலை வர்க்கம் மூன்றாவது உதாரணம் நீட்டிக்கிறது மின்னல் உறுப்பு {
மதிப்பு = '' ;
@ பிரச்சாரப் பெயர்களைக் கண்காணிக்கவும் = [ ] ;
பெறு பிரச்சாரங்கள் ( ) {
திரும்ப இது . பிரச்சாரப் பெயர்கள் ;
}
// அபெக்ஸில் இருந்து முகாம்களின் வரிசையில் விருப்பங்களைச் சேர்க்கவும்.
// லேபிள் பிரச்சாரத்தின் பெயராக இருக்கும்
// மதிப்பு பிரச்சார வகையாக இருக்கும்
இணைக்கப்பட்ட அழைப்பு ( ) {
பிரச்சாரம் ( )
. பிறகு ( விளைவாக => {
முகாம்களை விடுங்கள் = [ ] ;
க்கான ( இருந்தது கே = 0 ; கே < விளைவாக. நீளம் ; கே ++ ) {
முகாம்கள். தள்ளு ( { முத்திரை : விளைவாக [ கே ] . பெயர் , மதிப்பு : விளைவாக [ கே ] . வகை } ) ;
}
இது . பிரச்சாரப் பெயர்கள் = முகாம்கள் ;
} )
}
// மதிப்பைக் கையாளவும்
கைப்பிடி மாற்றம் ( நிகழ்வு ) {
இது . மதிப்பு = நிகழ்வு. விவரம் . மதிப்பு ;
}
}
வெளியீடு:
பதிவைத் தேர்ந்தெடுத்து வகையைப் பார்ப்போம்.
முடிவுரை
பண்புக்கூறுகள் மற்றும் எடுத்துக்காட்டுகளுடன் LWC இல் காம்போபாக்ஸை எவ்வாறு உருவாக்குவது என்பதை நாங்கள் கற்றுக்கொண்டோம். முதலில், மதிப்புகளின் பட்டியலுடன் காம்போபாக்ஸை உருவாக்கி, தேர்ந்தெடுக்கப்பட்ட மதிப்பைக் காட்டுவோம். அடுத்து, நிபந்தனை ரெண்டரிங் மூலம் தேர்ந்தெடுக்கப்பட்ட மதிப்பின் அடிப்படையில் HTML டெம்ப்ளேட்டை ரெண்டர் செய்கிறோம். கடைசியாக, ஏற்கனவே உள்ள சேல்ஸ்ஃபோர்ஸ் பதிவுகளிலிருந்து காம்போபாக்ஸிற்கான விருப்பங்களை எவ்வாறு உருவாக்குவது மற்றும் UI இல் தொடர்புடைய புலங்களை எவ்வாறு காண்பிப்பது என்பதை நாங்கள் கற்றுக்கொண்டோம்.