Salesforce LWC-তে, আপনি যদি ব্যবহারকারীকে বিকল্পগুলির নির্দিষ্ট তালিকা থেকে একটি বিকল্প নির্বাচন করার অনুমতি দিতে চান, তাহলে কম্বোবক্স ব্যবহার করা হয়। এই নির্দেশিকায়, আমরা উদাহরণ সহ কম্বোবক্স দ্বারা সমর্থিত বিভিন্ন বৈশিষ্ট্য এবং কম্বোবক্স কীভাবে তৈরি করতে হয় তা নিয়ে আলোচনা করব।
কম্বো বাক্স
মূলত, কম্বোবক্স হল একটি পঠনযোগ্য ক্ষেত্র যা নির্দিষ্ট বিকল্পগুলি থেকে একটি বিকল্প বেছে নেওয়ার জন্য একটি ইনপুট প্রদান করে। আমরা লাইটনিং-কম্বোবক্স ট্যাগ ব্যবহার করে এটি তৈরি করতে পারি। গুণাবলী একের পর এক গতি যা স্থান দ্বারা পৃথক করা হয়। একটি কম্বোবক্স তৈরি করার সময় প্রয়োজনীয় কিছু বৈশিষ্ট্য নিয়ে আলোচনা করা যাক।
- লেবেল - এটি আপনার কম্বোবক্সের জন্য লেবেল (টেক্সট) নির্দিষ্ট করতে ব্যবহৃত হয়।
- বিকল্প - প্রতিটি বিকল্প 'লেবেল' এবং 'মান' বৈশিষ্ট্য গ্রহণ করে। আমরা কমা দ্বারা পৃথক করা একটি তালিকায় একাধিক বিকল্প নির্দিষ্ট করতে পারি।
- স্থানধারক : একটি বিকল্প নির্বাচন করার আগে, ব্যবহারকারীকে বিকল্প সম্পর্কিত তথ্য জানতে হবে। সুতরাং, এই বৈশিষ্ট্য নির্দিষ্ট করা হয়.
- প্রয়োজনীয় : কিছু ক্ষেত্রে, বিকল্পটি নির্বাচন করা বাধ্যতামূলক। আমরা এই বৈশিষ্ট্যটি নির্দিষ্ট করে এটি প্রয়োজনীয় করতে পারি।
- অক্ষম : চেকবক্স থেকে বিকল্পটি নির্বাচন করে ব্যবহারকারীকে প্রতিরোধ করা সম্ভব। এই বৈশিষ্ট্য কম্বোবক্স নিষ্ক্রিয় করে।
বাক্য গঠন:
আসুন দেখি কিভাবে কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য সহ একটি কম্বোবক্স তৈরি করা যায়।
<বিদ্যুৎ-কম্বোবক্স
নাম = নাম'
লেবেল='লেবেল_নাম'
মান={value_from_the_option}
স্থানধারক='সহায়তা পাঠ্য'
অপশন={List_of_options}
onchange={handleChange} >
স্পেসিফিকেশন:
আসুন কম্বোবক্স তৈরি করার ধাপগুলি দেখুন এবং এটির সাথে কাজ করুন।
জাভাস্ক্রিপ্ট ফাইলে, 'গেটার' পদ্ধতির ভিতরে লেবেল এবং মান সহ বিকল্পগুলির একটি তালিকা তৈরি করুন৷
একটি ভেরিয়েবল তৈরি করুন যা ডিফল্ট বিকল্প সংরক্ষণ করে।
হ্যান্ডেল ফাংশনটি লিখুন যা ব্যবহারকারীর দ্বারা UI থেকে নির্বাচিত বিকল্পটি সংরক্ষণ করে।
HTML ফাইলে, একটি কম্বোবক্স তৈরি করুন এবং গুণাবলী পাস করুন। এছাড়াও, আমাদের onchange() ইভেন্ট হ্যান্ডলারটি পাস করতে হবে যা কম্বোবক্সের বিকল্পগুলি পরিচালনা করে। এটি 'জেএস' ফাইলে তৈরি করা 'হ্যান্ডলার' ফাংশন নেয়।
এই নির্দেশিকায় আমরা যে সমস্ত উদাহরণ নিয়ে আলোচনা করতে যাচ্ছি, যুক্তিকে 'js' কোড হিসেবে দেওয়া হবে। এর পরে, আমরা স্ক্রিনশটটি নির্দিষ্ট করি যাতে পুরো 'js' কোডটি অন্তর্ভুক্ত থাকে।
উদাহরণ 1:
জাভাস্ক্রিপ্ট ফাইলে পাঁচটি বিষয় (বিস্তারিত) সহ একটি কম্বোবক্স তৈরি করুন। 'JAVA' হিসাবে ডিফল্ট মান নির্দিষ্ট করুন। handleSubjectsOnChange() পদ্ধতিতে কম্বোবক্সটি পরিচালনা করুন। একটি লেবেল সহ এইচটিএমএল ফাইলের 'মান এবং বিকল্প' বৈশিষ্ট্যগুলিতে মান এবং বিশদ বিবরণ দিন এবং উপাদানটি স্থাপন করুন।
firstExample.html
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'বিষয় কম্বোবক্স' >
< div ক্লাস = 'slds-var-m-round_medium' >
<বিদ্যুৎ-কম্বোবক্স
লেবেল = 'আপনার বিষয় নির্বাচন করুন:'
মান = { মান }
বিকল্প = { বিস্তারিত }
পরিবর্তন বিষয়ক = { সাবজেক্টসঅনচেঞ্জ হ্যান্ডেল } < / বিদ্যুৎ-কম্বোবক্স>
< br >
< পি > আপনার বিষয়: < খ > {মান} < / খ < / পি >
< / div >
< / বাজ-কার্ড>
< / টেমপ্লেট>
firstExample.js
// ডিফল্ট মান তৈরি করুন - কম্বোবক্সের জন্য 'JAVA'মান = 'JAVA' ;
// বিষয় দেখান
পাওয়া বিস্তারিত ( ) {
// 5টি বিষয়
প্রত্যাবর্তন [ { লেবেল : 'জাভা' , মান : 'JAVA' } ,
{ লেবেল : 'পাইথন' , মান : 'পাইথন' } ,
{ লেবেল : 'এইচটিএমএল' , মান : 'এইচটিএমএল' } ,
{ লেবেল : 'গ' , মান : 'গ' } ,
{ লেবেল : 'C++' , মান : 'C++' } ] ;
}
// মান সেট করতে লজিক হ্যান্ডেল করুন
সাবজেক্টসঅনচেঞ্জ হ্যান্ডেল ( ঘটনা ) {
এই . মান = ঘটনা বিস্তারিত . মান ;
}
}
সম্পূর্ণ কোড:
firstComponent.js-meta.xml
সংস্করণ = '1.0' ?><লক্ষ্য>
<লক্ষ্য> lightning__AppPage < / লক্ষ্য>
<লক্ষ্য> lightning__Recordpage < / লক্ষ্য>
< / লক্ষ্য>
< / Lightning ComponentBundle>
আউটপুট:
যেকোনো বস্তুর 'রেকর্ড' পৃষ্ঠায় এই উপাদানটি যোগ করুন। HTML ফাইলে, আমরা প্যারাগ্রাফ ট্যাগে মান প্রদর্শন করি। যখন একজন ব্যবহারকারী কোন বিকল্প বেছে নেয়, তখন এটি বোল্ড হিসাবে প্রদর্শিত হবে। ডিফল্টরূপে, 'JAVA' নির্বাচন করা হয় এবং পৃষ্ঠায় উপাদান রেন্ডার হওয়ার পরে প্রদর্শিত হয়।
আসুন 'C' হিসাবে বিষয় নির্বাচন করি। 'C' কম্বোবক্সের নীচে ফিরে এসেছে।
উদাহরণ 2:
এই উদাহরণে, আমরা ক্যাম্পেইন টাইপ পিকলিস্ট মানের (প্রচারণা অবজেক্ট থেকে) উপর ভিত্তি করে বিভিন্ন উপাদান রেন্ডার করব।
- যদি প্রচারের ধরনটি 'সম্মেলন' হয়, তাহলে আমরা টেমপ্লেটটি রেন্ডার করব যা পাঠ্যটি ফেরত দেবে – প্রচারাভিযানের স্থিতি: পরিকল্পনা করা হয়েছে
- যদি প্রচারের ধরনটি 'ওয়েবিনার' হয়, আমরা টেমপ্লেটটি রেন্ডার করব যা পাঠ্যটি ফেরত দেবে – প্রচারাভিযানের স্থিতি: সম্পূর্ণ
- প্রচারাভিযানের ধরন যদি 'পার্টনারস' হয়, তাহলে আমরা সেই টেমপ্লেটটি রেন্ডার করব যা পাঠ্যটি ফেরত দেবে – প্রচারাভিযানের স্থিতি: চলছে
- প্রচারাভিযানের স্থিতি: বাকি বিকল্পগুলির জন্য বাতিল করা হয়েছে৷
secondExample.html
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'প্রচারণার ধরন' আইকন- নাম = 'স্ট্যান্ডার্ড: ক্যাম্পেইন' >
< div ক্লাস = 'slds-var-m-round_medium' শৈলী = 'উচ্চতা: 20px; প্রস্থ: 400px' >
<টেমপ্লেট luck:if = { প্রচারাভিযানের টাইপ ভ্যালু। তথ্য } >
<বিদ্যুৎ-কম্বোবক্স মান = { মান }
বিকল্প = { প্রচারাভিযানের টাইপ ভ্যালু। তথ্য মান }
পরিবর্তন বিষয়ক = { হ্যান্ডেল পরিবর্তন } >
< / বিদ্যুৎ-কম্বোবক্স>
< / টেমপ্লেট> br / >
< / div >
< br < br >
<টেমপ্লেট luck:if = { সম্মেলন } >
< কেন্দ্র > প্রচারের স্থিতি: < খ < i > পরিকল্পিত < / i < / খ > < / কেন্দ্র >
< / টেমপ্লেট>
<টেমপ্লেট ভাগ্য:elseif = { ওয়েবিনারভাল } >
< কেন্দ্র > প্রচারের স্থিতি: < খ < i > সম্পূর্ণ < / i < / খ > < / কেন্দ্র >
< / টেমপ্লেট>
<টেমপ্লেট ভাগ্য:elseif = { অংশীদারিত্ব } >
< কেন্দ্র > প্রচারের স্থিতি: < খ < i > চলছে< / i < / খ > < / কেন্দ্র >
< / টেমপ্লেট>
<টেমপ্লেট luck:else>
< কেন্দ্র > প্রচারের স্থিতি: < খ < i > বর্জন করা হয়েছে< / i < / খ > < / কেন্দ্র >
< / টেমপ্লেট>
< / বাজ-কার্ড>
< / টেমপ্লেট>
secondExample.js
আমরা ক্যাম্পেইন অবজেক্ট (স্ট্যান্ডার্ড) কে CAMPAIGN হিসাবে আমদানি করি এবং এটি থেকে TYPE হিসাবে টাইপ করি। লাইটনিং/uiObjectInfoApi থেকে, আমরা getPicklistValues এবং getObjectInfo আমদানি করি। এগুলি টাইপ ক্ষেত্রে উপলব্ধ পিকলিস্ট মানগুলি পাবে৷ এগুলি কম্বোবক্সের বিকল্প হিসাবে ব্যবহার করা হবে। নিম্নলিখিতগুলি handleChange() এ পরিচালনা করা হয়।
- মান === 'সম্মেলন' হলে, আমরা কনফারেন্সভাল ভেরিয়েবলটিকে সত্য এবং অন্য দুটিকে মিথ্যা হিসাবে সেট করি।
- মান === “ওয়েবিনার” হলে, আমরা ওয়েবনারভাল ভেরিয়েবলটিকে সত্য এবং অন্য দুটিকে মিথ্যা হিসাবে সেট করি।
- মান === “পার্টনারস” হলে, আমরা অংশীদারী ভেরিয়েবলটিকে সত্য এবং অন্য দুটিকে মিথ্যা হিসাবে সেট করি।
- মান প্রদত্ত বিকল্পে না থাকলে, সব মিথ্যা।
আমদানি CAMPAIGN থেকে '@salesforce/schema/Campaign' ;
আমদানি থেকে TYPE '@salesforce/schema/Campaign.Type' ;
আমদানি { GetPicklistValues } থেকে 'বাজ/uiObjectInfoApi' ;
আমদানি { getObjectInfo } থেকে 'বাজ/uiObjectInfoApi' ;
রপ্তানি ডিফল্ট ক্লাস দ্বিতীয় উদাহরণ প্রসারিত লাইটনিং এলিমেন্ট {
@ ট্র্যাক মান ;
// অবজেক্ট পান
@ তার ( getObjectInfo , { objectApiName : ক্যাম্পেইন } )
বস্তুর তথ্য ;
// প্রচারের ধরন পান - পিকলিস্ট
@ তার ( GetPicklistValues , { রেকর্ড টাইপআইডি : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TYPE } )
প্রচারাভিযানের টাইপ ভ্যালু ;
সম্মেলন = মিথ্যা ;
ওয়েবিনারভাল = মিথ্যা ;
অংশীদারিত্ব = মিথ্যা ;
অন্যান্য = মিথ্যা ;
// লজিক হ্যান্ডেল
হ্যান্ডেল পরিবর্তন ( ঘটনা ) {
এই . মান = ঘটনা লক্ষ্য . মান ;
যদি ( এই . মান === 'সম্মেলন' ) {
// পরিকল্পিত হিসাবে স্থিতি প্রদর্শন করুন
এই . সম্মেলন = সত্য ;
এই . ওয়েবিনারভাল = মিথ্যা ;
এই . অংশীদারিত্ব = মিথ্যা ;
}
অন্য যদি ( এই . মান === 'ওয়েবিনার' ) {
// সমাপ্ত হিসাবে স্থিতি প্রদর্শন করুন
এই . ওয়েবিনারভাল = সত্য ;
এই . সম্মেলন = মিথ্যা ;
এই . অংশীদারিত্ব = মিথ্যা ;
}
অন্য যদি ( এই . মান === 'অংশীদার' ) {
// প্রগতিশীল হিসাবে স্থিতি প্রদর্শন করুন৷
এই . ওয়েবিনারভাল = মিথ্যা ;
এই . সম্মেলন = মিথ্যা ;
এই . অংশীদারিত্ব = সত্য ;
}
অন্য {
// ABORTED হিসাবে স্থিতি প্রদর্শন করুন
এই . ওয়েবিনারভাল = মিথ্যা ;
এই . সম্মেলন = মিথ্যা ;
এই . অংশীদারিত্ব = মিথ্যা ;
}
}
}
secondComponent.js-meta.xml
সংস্করণ = '1.0' ?><লক্ষ্য>
<লক্ষ্য> lightning__AppPage < / লক্ষ্য>
<লক্ষ্য> lightning__Recordpage < / লক্ষ্য>
< / লক্ষ্য>
< / Lightning ComponentBundle>
আউটপুট:
প্রকার - 'সম্মেলন'। সুতরাং, স্ট্যাটাসটি 'পরিকল্পিত'।
টাইপ করুন - 'ওয়েবিনার'। সুতরাং, স্ট্যাটাসটি 'সম্পূর্ণ'।
টাইপ করুন - 'পার্টনারস'। সুতরাং, স্ট্যাটাসটি 'প্রগতিতে চলছে'।
প্রকারটি প্রদত্ত বিকল্পগুলিতে নেই৷ সুতরাং, স্ট্যাটাসটি 'বাতিল'।
উদাহরণ 3:
এখন, আমরা বিকল্প হিসাবে প্রচারাভিযানের রেকর্ড সহ একটি কম্বোবক্স তৈরি করি। আমরা যদি কোনো বিকল্প নির্বাচন করি, তাহলে সংশ্লিষ্ট প্রচারাভিযানের ধরন UI-তে ফেরত দেওয়া হবে।
প্রথমে, আমাদের getCampaign() পদ্ধতির সাথে একটি Apex ক্লাস তৈরি করতে হবে। এই পদ্ধতিটি আইডি, নাম, প্রকার এবং স্থিতি সহ সমস্ত প্রচারাভিযানের একটি তালিকা প্রদান করে।
ক্যাম্পেইন রেকর্ডস। apxcশেয়ারিং সহ পাবলিক ক্লাস ক্যাম্পেইন রেকর্ডস {
@ Aura Enabled ( ক্যাশেযোগ্য = সত্য )
// প্রচারাভিযানের তালিকা পান
পাবলিক স্থির তালিকা < প্রচারণা > গেট ক্যাম্পেইন ( ) {
প্রত্যাবর্তন [ আইডি নির্বাচন করুন , নাম , টাইপ , ক্যাম্পেইন থেকে স্ট্যাটাস ] ;
}
}
thirdExample.html
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'প্রচারণার ধরন' আইকন- নাম = 'স্ট্যান্ডার্ড: ক্যাম্পেইন' >
< div ক্লাস = 'slds-var-m-round_medium' শৈলী = 'উচ্চতা: 20px; প্রস্থ: 400px' >
<বিদ্যুৎ-কম্বোবক্স নাম = 'প্রচারণা'
লেবেল = 'প্রচারের নাম নির্বাচন করুন'
বিকল্প = { প্রচারণার বিকল্প }
মান = { মান }
পরিবর্তন বিষয়ক = { হ্যান্ডেল পরিবর্তন }
>
< / বিদ্যুৎ-কম্বোবক্স>
< / div < br >
< br >
< পি > এই প্রচারাভিযানের জন্য প্রচারের ধরন: < খ > {মান} < / খ < / পি >
< / বাজ-কার্ড>
< / টেমপ্লেট>
thirdExample.js
- সংযুক্ত কলব্যাক() পদ্ধতির ভিতরে প্রচারাভিযানের একটি তালিকা পাওয়া পদ্ধতিটি আমাদের নির্দিষ্ট করতে হবে। 'ক্যাম্প' নামে একটি অ্যারে ঘোষণা করুন এবং ফলাফলটিকে ক্যাম্পেইন আইডি হিসাবে লেবেল এবং প্রচারের ধরন হিসাবে মানটি সংরক্ষণ করুন৷ এই অ্যারেটি ক্যাম্পেইননেমের ইনপুট (এটি ট্র্যাক ডেকোরেটর দিয়ে তৈরি করতে হবে)।
- Campaignoptions() getter পদ্ধতিতে, CampaignNames অ্যারে ফেরত দিন। সুতরাং, কম্বোবক্স এই বিকল্পগুলি ব্যবহার করে।
- handleonchange() হ্যান্ডলার পদ্ধতিতে নির্বাচিত মান সেট করুন।
আমদানি থেকে ক্যাম্পেইন পান '@salesforce/apex/CampaignRecords.getCampaign' ;
রপ্তানি ডিফল্ট ক্লাস তৃতীয় উদাহরণ প্রসারিত লাইটনিং এলিমেন্ট {
মান = ' ;
@ প্রচারের নাম ট্র্যাক করুন = [ ] ;
পাওয়া প্রচারণার বিকল্প ( ) {
প্রত্যাবর্তন এই . প্রচারের নাম ;
}
// অ্যাপেক্স থেকে ক্যাম্প অ্যারেতে বিকল্প যোগ করুন।
// লেবেল হবে ক্যাম্পেইনের নাম
// মান হবে প্রচারের ধরন
সংযুক্ত কলব্যাক ( ) {
গেট ক্যাম্পেইন ( )
. তারপর ( ফলাফল => {
ক্যাম্প করতে দিন = [ ] ;
জন্য ( ছিল k = 0 ; k < ফলাফল. দৈর্ঘ্য ; k ++ ) {
শিবির ধাক্কা ( { লেবেল : ফলাফল [ k ] . নাম , মান : ফলাফল [ k ] . টাইপ } ) ;
}
এই . প্রচারের নাম = শিবির ;
} )
}
// মান হ্যান্ডেল
হ্যান্ডেল পরিবর্তন ( ঘটনা ) {
এই . মান = ঘটনা বিস্তারিত . মান ;
}
}
আউটপুট:
আসুন রেকর্ডটি নির্বাচন করি এবং প্রকারটি দেখি।
উপসংহার
আমরা শিখেছি কিভাবে LWC-তে বৈশিষ্ট্য এবং উদাহরণ সহ একটি কম্বোবক্স তৈরি করতে হয়। প্রথমে, আমরা মানগুলির একটি তালিকা সহ একটি কম্বোবক্স তৈরি করেছি এবং নির্বাচিত মান প্রদর্শন করেছি। এরপরে, আমরা শর্তসাপেক্ষ রেন্ডারিংয়ের মাধ্যমে নির্বাচিত মানের উপর ভিত্তি করে HTML টেমপ্লেট রেন্ডার করি। সবশেষে, আমরা শিখেছি কিভাবে বিদ্যমান Salesforce রেকর্ড থেকে কম্বোবক্সের জন্য বিকল্প তৈরি করতে হয় এবং UI-তে সম্পর্কিত ক্ষেত্রগুলি প্রদর্শন করতে হয়।