Salesforce LWC میں، اگر آپ صارف کو اختیارات کی مخصوص فہرست میں سے کوئی آپشن منتخب کرنے کی اجازت دینا چاہتے ہیں، تو combobox استعمال کیا جاتا ہے۔ اس گائیڈ میں، ہم مثالوں کے ساتھ combobox اور combobox کے ذریعے تعاون یافتہ مختلف صفات کے بارے میں بات کریں گے۔
کومبو باکس
بنیادی طور پر، combobox ایک صرف پڑھنے والا فیلڈ ہے جو مخصوص اختیارات میں سے کسی آپشن کو منتخب کرنے کے لیے ایک ان پٹ فراہم کرتا ہے۔ ہم اسے lightning-combobox ٹیگ کا استعمال کر کے بنا سکتے ہیں۔ صفات ایک کے بعد ایک رفتار ہیں جو خلا سے الگ ہوتی ہیں۔ آئیے کچھ اوصاف پر بات کرتے ہیں جو ایک کومبو باکس بناتے وقت درکار ہیں۔
- لیبل - یہ آپ کے کومبو باکس کے لیے لیبل (متن) کی وضاحت کے لیے استعمال ہوتا ہے۔
- اختیارات - ہر آپشن میں 'لیبل' اور 'ویلیو' کی خصوصیات ہوتی ہیں۔ ہم ایک فہرست میں متعدد اختیارات کو کوما سے الگ کر سکتے ہیں۔
- پلیس ہولڈر : کسی آپشن کو منتخب کرنے سے پہلے، صارف کو آپشنز سے متعلق معلومات کو جاننے کی ضرورت ہے۔ لہذا، یہ وصف بیان کیا گیا ہے.
- کی ضرورت ہے : بعض صورتوں میں، آپشن کو منتخب کرنا لازمی ہے۔ ہم اس وصف کی وضاحت کرکے اسے مطلوبہ بنا سکتے ہیں۔
- معذور : چیک باکس سے آپشن کو منتخب کرکے صارف کو روکنا ممکن ہوسکتا ہے۔ یہ وصف کومبو باکس کو غیر فعال کر دیتا ہے۔
نحو:
آئیے دیکھتے ہیں کہ کچھ اہم اوصاف کے ساتھ ایک کومبو باکس کیسے بنایا جائے۔
label='label_name'
قدر={value_from_the_option}
پلیس ہولڈر='مدد کا متن'
اختیارات={List_of_options}
onchange={handleChange} >
تفصیلات:
آئیے کامبو باکس بنانے اور اس کے ساتھ کام کرنے کے اقدامات دیکھیں۔
JavaScript فائل میں، 'getter' طریقہ کے اندر لیبل اور قدر کے ساتھ اختیارات کی فہرست بنائیں۔
ایک متغیر بنائیں جو ڈیفالٹ آپشن کو اسٹور کرے۔
ہینڈل فنکشن لکھیں جو آپشن کو اسٹور کرتا ہے جسے صارف UI سے منتخب کرتا ہے۔
HTML فائل میں، ایک کومبو باکس بنائیں اور صفات کو پاس کریں۔ اس کے علاوہ، ہمیں onchange() ایونٹ ہینڈلر کو پاس کرنے کی ضرورت ہے جو کومبو باکس میں موجود آپشنز کو ہینڈل کرتا ہے۔ یہ 'js' فائل میں تخلیق کردہ 'ہینڈلر' فنکشن لیتا ہے۔
ان تمام مثالوں میں جن پر ہم اس گائیڈ میں بحث کرنے جا رہے ہیں، منطق کو 'js' کوڈ کے طور پر فراہم کیا جائے گا۔ اس کے بعد، ہم اسکرین شاٹ کی وضاحت کرتے ہیں جس میں پورا 'js' کوڈ شامل ہے۔
مثال 1:
جاوا اسکرپٹ فائل میں پانچ مضامین (تفصیلات) کے ساتھ ایک کومبو باکس بنائیں۔ پہلے سے طے شدہ قدر کو 'JAVA' کے طور پر بیان کریں۔ ہینڈل سبجیکٹس اون چینج () طریقہ میں کومبو باکس کو ہینڈل کریں۔ قدر اور تفصیلات کو ایک لیبل کے ساتھ ایچ ٹی ایم ایل فائل میں 'قدر اور اختیارات' کی خصوصیات میں منتقل کریں اور جزو کو تعینات کریں۔
firstExample.html
<ٹیمپلیٹ><بجلی کا کارڈ عنوان = 'مضامین کومبو باکس' >
< div کلاس = 'slds-var-m-round_medium' >
لیبل = 'اپنا مضمون منتخب کریں:'
قدر = { قدر }
اختیارات = { تفصیلات }
تبدیلی = { ہینڈل سبجیکٹ آن چینج } >< / lightning-combobox>
< بی آر >
< ص > آپ کا موضوع: < ب > {قدر} < / ب >< / ص >
< / div >
< / بجلی کا کارڈ>
< / ٹیمپلیٹ>
firstExample.js
// ڈیفالٹ ویلیو بنائیں - کومبو باکس کے لیے 'جاوا'قدر = 'JAVA' ;
// مضامین دکھائیں۔
حاصل کریں تفصیلات ( ) {
// 5 مضامین
واپسی [ { لیبل : 'جاوا' , قدر : 'JAVA' } ,
{ لیبل : 'Python' , قدر : 'PYTHON' } ,
{ لیبل : 'HTML' , قدر : 'HTML' } ,
{ لیبل : 'سی' , قدر : 'سی' } ,
{ لیبل : 'C++' , قدر : 'C++' } ] ;
}
// قدر مقرر کرنے کے لیے منطق کو ہینڈل کریں۔
ہینڈل سبجیکٹ آن چینج ( تقریب ) {
یہ . قدر = تقریب. تفصیل . قدر ;
}
}
پورا کوڈ:
firstComponent.js-meta.xml
ورژن = '1.0' ؟><اہداف>
<ٹارگٹ> lightning__AppPage < / ہدف>
<ٹارگٹ> lightning__Recordpage < / ہدف>
< / اہداف>
< / LightningComponentBundle>
آؤٹ پٹ:
اس جزو کو کسی بھی چیز کے 'ریکارڈ' صفحہ میں شامل کریں۔ HTML فائل میں، ہم پیراگراف ٹیگ میں قدر ظاہر کرتے ہیں۔ جب صارف کسی بھی آپشن کا انتخاب کرتا ہے، تو اسے بولڈ کے طور پر دکھایا جائے گا۔ پہلے سے طے شدہ طور پر، 'JAVA' کو منتخب کیا جاتا ہے اور صفحہ پر جزو کے رینڈر ہونے کے بعد ظاہر کیا جاتا ہے۔
آئیے موضوع کو 'C' کے طور پر منتخب کریں۔ 'C' کومبو باکس کے نیچے واپس آ گیا ہے۔
مثال 2:
اس مثال میں، ہم مہم کی قسم کی پک لسٹ اقدار (مہم آبجیکٹ سے) کی بنیاد پر مختلف اجزاء پیش کریں گے۔
- اگر مہم کی قسم 'کانفرنس' ہے، تو ہم اس ٹیمپلیٹ کو رینڈر کریں گے جو متن کو واپس کرتا ہے – مہم کی حیثیت: منصوبہ بندی
- اگر مہم کی قسم 'Webinar' ہے، تو ہم اس ٹیمپلیٹ کو رینڈر کریں گے جو متن کو واپس کرتا ہے – مہم کی حیثیت: COMPLETED
- اگر مہم کی قسم 'شراکت دار' ہے، تو ہم اس ٹیمپلیٹ کو رینڈر کریں گے جو متن کو واپس کرے گا – مہم کی حیثیت: جاری ہے
- مہم کی حیثیت: بقیہ اختیارات کے لیے منسوخ کر دیا گیا۔
secondExample.html
<ٹیمپلیٹ><بجلی کا کارڈ عنوان = 'مہم کی قسم' شبیہ - نام = 'معیاری: مہم' >
< div کلاس = 'slds-var-m-round_medium' انداز = 'اونچائی: 20px؛ چوڑائی: 400px' >
= { مہم کی قسم کی قدریں۔ ڈیٹا } >
اختیارات = { مہم کی قسم کی قدریں۔ ڈیٹا .values }
تبدیلی = { ہینڈل کی تبدیلی } >
< / lightning-combobox>
< / ٹیمپلیٹ < بی آر / >
< / div >
< بی آر >< بی آر >
= { کانفرنس } >
< مرکز > مہم کی حیثیت: < ب >< میں > منصوبہ بندی کی گئی< / میں >< / ب > < / مرکز >
< / ٹیمپلیٹ>
= { webinarval } >
< مرکز > مہم کی حیثیت: < ب >< میں > مکمل ہو گیا< / میں >< / ب > < / مرکز >
< / ٹیمپلیٹ>
= { شراکت دار } >
< مرکز > مہم کی حیثیت: < ب >< میں > جاری ہے< / میں >< / ب > < / مرکز >
< / ٹیمپلیٹ>
< مرکز > مہم کی حیثیت: < ب >< میں > ترک کر دیا گیا< / میں >< / ب > < / مرکز >
< / ٹیمپلیٹ>
< / بجلی کا کارڈ>
< / ٹیمپلیٹ>
secondExample.js
ہم مہم آبجیکٹ (معیاری) کو بطور CAMPAIGN درآمد کرتے ہیں اور اس سے TYPE کے طور پر ٹائپ کرتے ہیں۔ lightning/uiObjectInfoApi سے، ہم getPicklistValues اور getObjectInfo درآمد کرتے ہیں۔ یہ پک لسٹ کی قیمتیں ٹائپ فیلڈ میں دستیاب ہوں گی۔ ان کو کومبو باکس کے اختیارات کے طور پر استعمال کیا جائے گا۔ مندرجہ ذیل کو handleChange() میں سنبھالا جاتا ہے۔
- اگر قدر === 'کانفرنس'، تو ہم کانفرنسوال متغیر کو درست اور باقی دو کو غلط پر سیٹ کرتے ہیں۔
- اگر ویلیو === 'Webinar'، تو ہم webinarval variable کو true اور باقی دو کو غلط پر سیٹ کرتے ہیں۔
- اگر قدر === 'شراکت دار'، تو ہم شراکت دار متغیر کو درست اور باقی دو کو غلط پر سیٹ کرتے ہیں۔
- اگر قیمت دیے گئے اختیارات میں نہیں ہے، تو سبھی غلط ہیں۔
درآمد سے CAMPAIGN '@salesforce/schema/Campaign' ;
درآمد سے ٹائپ کریں۔ '@salesforce/schema/Campaign.Type' ;
درآمد { GetPicklistValues } سے 'بجلی/uiObjectInfoApi' ;
درآمد { آبجیکٹ کی معلومات حاصل کریں۔ } سے 'بجلی/uiObjectInfoApi' ;
برآمد پہلے سے طے شدہ کلاس دوسری مثال توسیع کرتا ہے Lightning Element {
@ ٹریک قدر ;
// آبجیکٹ حاصل کریں۔
@ تار ( آبجیکٹ کی معلومات حاصل کریں۔ ، { ObjectApiName : مہم } )
آبجیکٹ کی معلومات ;
// مہم کی قسم حاصل کریں - پک لسٹ
@ تار ( GetPicklistValues ، { recordTypeId : '$objectInfo.data.defaultRecordTypeId' ، fieldApiName : TYPE } )
مہم کی قسم کی قدریں۔ ;
کانفرنس = جھوٹا ;
webinarval = جھوٹا ;
شراکت دار = جھوٹا ;
دوسرے = جھوٹا ;
// ہینڈل منطق
ہینڈل کی تبدیلی ( تقریب ) {
یہ . قدر = تقریب. ہدف . قدر ;
اگر ( یہ . قدر === 'کانفرنس' ) {
// منصوبہ بندی کے مطابق اسٹیٹس ڈسپلے کریں۔
یہ . کانفرنس = سچ ;
یہ . webinarval = جھوٹا ;
یہ . شراکت دار = جھوٹا ;
}
اور اگر ( یہ . قدر === 'ویبنارز' ) {
// مکمل ہونے کی حیثیت سے ڈسپلے کی حیثیت
یہ . webinarval = سچ ;
یہ . کانفرنس = جھوٹا ;
یہ . شراکت دار = جھوٹا ;
}
اور اگر ( یہ . قدر === 'شراکت دار' ) {
// ڈسپلے اسٹیٹس جیسا کہ جاری ہے۔
یہ . webinarval = جھوٹا ;
یہ . کانفرنس = جھوٹا ;
یہ . شراکت دار = سچ ;
}
اور {
// ساقط کے طور پر اسٹیٹس ڈسپلے کریں۔
یہ . webinarval = جھوٹا ;
یہ . کانفرنس = جھوٹا ;
یہ . شراکت دار = جھوٹا ;
}
}
}
secondComponent.js-meta.xml
ورژن = '1.0' ؟><اہداف>
<ٹارگٹ> lightning__AppPage < / ہدف>
<ٹارگٹ> lightning__Recordpage < / ہدف>
< / اہداف>
< / LightningComponentBundle>
آؤٹ پٹ:
قسم - 'کانفرنس'۔ لہذا، حیثیت 'منصوبہ بندی' ہے.
قسم - 'Webinar'۔ لہذا، حیثیت 'مکمل' ہے۔
قسم - 'شراکت دار'۔ لہذا، حیثیت 'جاری ہے' ہے۔
قسم فراہم کردہ اختیارات میں نہیں ہے۔ لہذا، حیثیت 'منقطع' ہے۔
مثال 3:
اب، ہم انتخاب کے طور پر مہم کے ریکارڈ کے ساتھ ایک کمبو باکس بناتے ہیں۔ اگر ہم کوئی آپشن منتخب کرتے ہیں، تو متعلقہ مہم کی قسم UI پر واپس آ جائے گی۔
سب سے پہلے، ہمیں getCampaign() طریقہ کے ساتھ ایک Apex کلاس بنانے کی ضرورت ہے۔ یہ طریقہ آئی ڈی، نام، قسم اور حیثیت کے ساتھ تمام مہمات کی فہرست لوٹاتا ہے۔
مہم کے ریکارڈز۔ apxcاشتراک کے ساتھ عوامی کلاس مہم کے ریکارڈز {
@ AuraEnabled ( قابل ذخیرہ = سچ )
// مہمات کی فہرست حاصل کریں۔
عوام جامد فہرست < مہم > مہم حاصل کریں۔ ( ) {
واپسی [ آئی ڈی منتخب کریں۔ ، نام ، قسم ، مہم سے حیثیت ] ;
}
}
thirdExample.html
<ٹیمپلیٹ><بجلی کا کارڈ عنوان = 'مہم کی قسم' شبیہ - نام = 'معیاری: مہم' >
< div کلاس = 'slds-var-m-round_medium' انداز = 'اونچائی: 20px؛ چوڑائی: 400px' >
لیبل = 'مہم کا نام منتخب کریں'
اختیارات = { مہم کے اختیارات }
قدر = { قدر }
تبدیلی = { ہینڈل تبدیلی }
>
< / lightning-combobox>
< / div >< بی آر >
< بی آر >
< ص > اس مہم کے لیے مہم کی قسم: < ب > {قدر} < / ب >< / ص >
< / بجلی کا کارڈ>
< / ٹیمپلیٹ>
thirdExample.js
- ہمیں وہ طریقہ بتانا ہوگا جو connectedcallback() طریقہ کے اندر مہمات کی فہرست حاصل کرتا ہے۔ 'کیمپ' کے نام سے ایک صف کا اعلان کریں اور نتیجہ کو مہم ID کے طور پر لیبل کے ساتھ اور مہم کی قسم کے طور پر قدر کو ذخیرہ کریں۔ یہ صف مہم کے ناموں کا ان پٹ ہے (اسے ٹریک ڈیکوریٹر کے ساتھ بنانا ہوگا)۔
- Campaignoptions() getter طریقہ میں، مہم کے ناموں کی صف کو واپس کریں۔ لہذا، combobox ان اختیارات کو استعمال کرتا ہے۔
- منتخب کردہ قدر کو handleonchange() ہینڈلر طریقہ میں سیٹ کریں۔
درآمد سے مہم حاصل کریں۔ '@salesforce/apex/CampaignRecords.getCampaign' ;
برآمد پہلے سے طے شدہ کلاس تیسری مثال توسیع کرتا ہے Lightning Element {
قدر = '' ;
@ مہم کے ناموں کو ٹریک کریں۔ = [ ] ;
حاصل کریں مہم کے اختیارات ( ) {
واپسی یہ . مہم کے نام ;
}
// اپیکس سے کیمپوں کی صف میں اختیارات شامل کریں۔
// لیبل مہم کا نام ہوگا۔
// قدر مہم کی قسم ہوگی۔
منسلک کال بیک ( ) {
مہم حاصل کریں۔ ( )
. پھر ( نتیجہ => {
کیمپوں دو = [ ] ;
کے لیے ( تھا ک = 0 ; ک < نتیجہ لمبائی ; ک ++ ) {
کیمپ دھکا ( { لیبل : نتیجہ [ ک ] . نام ، قدر : نتیجہ [ ک ] . قسم } ) ;
}
یہ . مہم کے نام = کیمپ ;
} )
}
// قدر کو ہینڈل کریں۔
ہینڈل تبدیلی ( تقریب ) {
یہ . قدر = تقریب. تفصیل . قدر ;
}
}
آؤٹ پٹ:
آئیے ریکارڈ کو منتخب کریں اور قسم دیکھیں۔
نتیجہ
ہم نے LWC میں صفات اور مثالوں کے ساتھ ایک کومبو باکس بنانے کا طریقہ سیکھا۔ سب سے پہلے، ہم نے قدروں کی فہرست کے ساتھ ایک کمبو باکس بنایا اور منتخب قدر کو ظاہر کیا۔ اگلا، ہم مشروط رینڈرنگ کے ذریعے منتخب قدر کی بنیاد پر HTML ٹیمپلیٹ پیش کرتے ہیں۔ آخر میں، ہم نے سیکھا کہ موجودہ سیلز فورس ریکارڈز سے کومبو باکس کے اختیارات کیسے بنائے جائیں اور متعلقہ فیلڈز کو UI پر ڈسپلے کریں۔