ใน Salesforce LWC หากคุณต้องการอนุญาตให้ผู้ใช้เลือกตัวเลือกจากรายการตัวเลือกที่ระบุ ระบบจะใช้ Combobox ในคู่มือนี้ เราจะพูดถึงวิธีสร้าง Combobox และคุณลักษณะต่างๆ ที่ Combobox รองรับพร้อมตัวอย่าง
คอมโบบ็อกซ์
โดยทั่วไป Combobox เป็นฟิลด์แบบอ่านอย่างเดียวซึ่งมีอินพุตเพื่อเลือกตัวเลือกจากตัวเลือกที่ระบุ เราสามารถสร้างสิ่งนี้ได้โดยใช้แท็ก lightning-combobox คุณลักษณะคือความเร็วทีละรายการซึ่งคั่นด้วยช่องว่าง เรามาหารือเกี่ยวกับคุณลักษณะบางอย่างที่จำเป็นในขณะที่สร้างคอมโบบ็อกซ์
- ฉลาก – ใช้เพื่อระบุป้ายกำกับ (ข้อความ) สำหรับคอมโบบ็อกซ์ของคุณ
- ตัวเลือก – แต่ละตัวเลือกจะใช้แอตทริบิวต์ 'label' และ 'value' เราสามารถระบุหลายตัวเลือกในรายการโดยคั่นด้วยเครื่องหมายจุลภาค
- ตัวยึดตำแหน่ง : ก่อนที่จะเลือกตัวเลือก ผู้ใช้จำเป็นต้องทราบข้อมูลที่เกี่ยวข้องกับตัวเลือก ดังนั้นแอตทริบิวต์นี้จึงถูกระบุ
- ที่จำเป็น : ในบางกรณี จำเป็นต้องเลือกตัวเลือกนี้ เราสามารถทำให้จำเป็นได้โดยการระบุแอตทริบิวต์นี้
- พิการ : สามารถป้องกันผู้ใช้ได้โดยการเลือกตัวเลือกจากช่องทำเครื่องหมาย คุณลักษณะนี้ปิดใช้งานคอมโบบ็อกซ์
ไวยากรณ์:
มาดูวิธีสร้างคอมโบบ็อกซ์พร้อมคุณสมบัติที่สำคัญบางประการ
<ไลท์นิ่งคอมโบบ็อกซ์
ชื่อ = 'ชื่อ'
ฉลาก = 'label_name'
มูลค่า={value_from_the_option}
placeholder = 'ข้อความช่วยเหลือ'
options={รายการ_of_options}
onchange={จัดการเปลี่ยน} >
ข้อมูลจำเพาะ:
มาดูขั้นตอนในการสร้างคอมโบบ็อกซ์และใช้งานกัน
ในไฟล์ JavaScript ให้สร้างรายการตัวเลือกที่มีป้ายกำกับและค่าภายในเมธอด 'getter'
สร้างตัวแปรที่เก็บตัวเลือกเริ่มต้น
เขียนฟังก์ชันการจัดการที่เก็บตัวเลือกที่ผู้ใช้เลือกจาก UI
ในไฟล์ HTML ให้สร้างคอมโบบ็อกซ์และส่งแอตทริบิวต์ นอกจากนี้ เราต้องส่งผ่านตัวจัดการเหตุการณ์ onchange() ที่จัดการตัวเลือกต่างๆ ในกล่องคำสั่งผสม ใช้ฟังก์ชัน 'Handler' ที่สร้างขึ้นในไฟล์ 'js'
ในตัวอย่างทั้งหมดที่เราจะพูดถึงในคู่มือนี้ ตรรกะจะถูกระบุเป็นโค้ด “js” หลังจากนั้น เราจะระบุภาพหน้าจอที่มีโค้ด “js” ทั้งหมด
ตัวอย่างที่ 1:
สร้างคอมโบบ็อกซ์ที่มีห้าวิชา (รายละเอียด) ในไฟล์ Javascript ระบุค่าเริ่มต้นเป็น “JAVA” จัดการคอมโบบ็อกซ์ในเมธอด handleSubjectsOnChange() ส่งค่าและรายละเอียดไปยังแอตทริบิวต์ 'ค่าและตัวเลือก' ในไฟล์ HTML พร้อมป้ายกำกับและปรับใช้ส่วนประกอบ
firstExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'กล่องคำสั่งผสมวิชา' >
< กอง ระดับ = 'slds-var-m-around_medium' >
<ไลท์นิ่งคอมโบบ็อกซ์
ฉลาก = 'เลือกหัวข้อของคุณ:'
ค่า = { ค่า }
ตัวเลือก = { รายละเอียด }
เมื่อมีการเปลี่ยนแปลง = { จัดการ SubjectsOnChange } >< / สายฟ้าคอมโบบ็อกซ์>
< พี่ชาย >
< พี > หัวข้อของคุณ: < ข > {ค่า} < / ข >< / พี >
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
// สร้างค่าเริ่มต้น - 'JAVA' สำหรับ Comboboxค่า = 'จาวา' ;
// แสดงหัวเรื่อง
รับ รายละเอียด ( ) {
// 5 วิชา
กลับ [ { ฉลาก : : 'ชวา' , ค่า : : 'จาวา' } ,
{ ฉลาก : : 'หลาม' , ค่า : : 'หลาม' } ,
{ ฉลาก : : 'เอชทีเอ็มแอล' , ค่า : : 'เอชทีเอ็มแอล' } ,
{ ฉลาก : : 'ค' , ค่า : : 'ค' } ,
{ ฉลาก : : 'ค++' , ค่า : : 'ค++' } ] ;
}
// จัดการตรรกะเพื่อตั้งค่า
จัดการ SubjectsOnChange ( เหตุการณ์ ) {
นี้ . ค่า = เหตุการณ์. รายละเอียด . ค่า ;
}
}
รหัสทั้งหมด:
firstComponent.js-meta.xml
รุ่น = '1.0' ?><เวอร์ชัน API> 57.0 < / เวอร์ชัน api>
<ถูกเปิดเผย> จริง < / ถูกเปิดเผย>
<เป้าหมาย>
<เป้าหมาย> สายฟ้า__AppPage < / เป้าหมาย>
<เป้าหมาย> ฟ้าผ่า__RecordPage < / เป้าหมาย>
< / เป้าหมาย>
< / LightningComponentBundle>
เอาท์พุท:
เพิ่มส่วนประกอบนี้ลงในหน้า 'บันทึก' ของออบเจ็กต์ใดๆ ในไฟล์ HTML เราจะแสดงค่าในแท็กย่อหน้า เมื่อผู้ใช้เลือกตัวเลือกใดๆ ตัวเลือกนั้นจะแสดงเป็นตัวหนา ตามค่าเริ่มต้น “JAVA” จะถูกเลือกและแสดงหลังจากคอมโพเนนต์ถูกเรนเดอร์บนเพจ
ให้เลือกหัวเรื่องเป็น “C” “C” จะถูกส่งกลับใต้คอมโบบ็อกซ์
ตัวอย่างที่ 2:
ในตัวอย่างนี้ เราจะแสดงผลส่วนประกอบต่างๆ ตามค่ารายการเลือกประเภทแคมเปญ (จากออบเจ็กต์แคมเปญ)
- หากประเภทแคมเปญคือ 'การประชุม' เราจะแสดงเทมเพลตที่ส่งคืนข้อความ – สถานะแคมเปญ: วางแผนแล้ว
- หากประเภทแคมเปญคือ 'การสัมมนาผ่านเว็บ' เราจะแสดงเทมเพลตที่ส่งคืนข้อความ – สถานะแคมเปญ: เสร็จสมบูรณ์
- หากประเภทแคมเปญคือ 'พันธมิตร' เราจะแสดงเทมเพลตที่ส่งคืนข้อความ – สถานะแคมเปญ: อยู่ระหว่างดำเนินการ
- สถานะแคมเปญ: ล้มเลิกสำหรับตัวเลือกที่เหลือ
SecondExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'ประเภทแคมเปญ' ไอคอน- ชื่อ = 'มาตรฐาน:แคมเปญ' >
< กอง ระดับ = 'slds-var-m-around_medium' สไตล์ = 'ความสูง:20px; ความกว้าง:400px' >
<แม่แบบโชค:ถ้า = { ค่าประเภทแคมเปญ ข้อมูล } >
<ไลท์นิ่งคอมโบบ็อกซ์ ค่า = { ค่า }
ตัวเลือก = { ค่าประเภทแคมเปญ ข้อมูล .ค่า }
เมื่อมีการเปลี่ยนแปลง = { จัดการการเปลี่ยนแปลง } >
< / สายฟ้าคอมโบบ็อกซ์>
< / แม่แบบ>< พี่ชาย / >
< / กอง >
< พี่ชาย >< พี่ชาย >
<แม่แบบโชค:ถ้า = { การประชุม } >
< ศูนย์ > สถานะแคมเปญ: < ข >< ฉัน > วางแผนไว้< / ฉัน >< / ข > < / ศูนย์ >
< / แม่แบบ>
<แม่แบบโชค:elseif = { การสัมมนาผ่านเว็บ } >
< ศูนย์ > สถานะแคมเปญ: < ข >< ฉัน > เสร็จสมบูรณ์< / ฉัน >< / ข > < / ศูนย์ >
< / แม่แบบ>
<แม่แบบโชค:elseif = { หุ้นส่วน } >
< ศูนย์ > สถานะแคมเปญ: < ข >< ฉัน > อยู่ระหว่างดำเนินการ< / ฉัน >< / ข > < / ศูนย์ >
< / แม่แบบ>
<เทมเพลตโชค: อื่น>
< ศูนย์ > สถานะแคมเปญ: < ข >< ฉัน > ถูกยกเลิก< / ฉัน >< / ข > < / ศูนย์ >
< / แม่แบบ>
< / การ์ดสายฟ้า>
< / แม่แบบ>
SecondExample.js
เรานำเข้าออบเจ็กต์แคมเปญ (มาตรฐาน) เป็น CAMPAIGN และประเภทจากนั้นเป็น TYPE จาก lightning/uiObjectInfoApi เราจะนำเข้า getPicklistValues และ getObjectInfo สิ่งเหล่านี้จะได้รับค่ารายการเลือกที่มีอยู่ในฟิลด์ประเภท สิ่งเหล่านี้จะถูกใช้เป็นตัวเลือกสำหรับคอมโบบ็อกซ์ ต่อไปนี้ได้รับการจัดการใน handleChange()
- หากค่า === “Conference” เราจะตั้งค่าตัวแปร conferenceval เป็นจริงและอีกสองตัวเป็นเท็จ
- หากค่า === “การสัมมนาผ่านเว็บ” เราจะตั้งค่าตัวแปรการสัมมนาผ่านเว็บเป็นจริงและอีกสองตัวเป็นเท็จ
- หากค่า === “Partners” เราจะตั้งค่าตัวแปร Partnerval เป็นจริงและอีก 2 รายการเป็นเท็จ
- หากค่าไม่อยู่ในตัวเลือกที่กำหนด ค่าทั้งหมดจะเป็นเท็จ
นำเข้า แคมเปญจาก '@salesforce/สคีมา/แคมเปญ' ;
นำเข้า พิมพ์จาก '@salesforce/schema/Campaign.Type' ;
นำเข้า { getPicklistValues } จาก 'สายฟ้า/uiObjectInfoApi' ;
นำเข้า { รับObjectInfo } จาก 'สายฟ้า/uiObjectInfoApi' ;
ส่งออก ค่าเริ่มต้น ระดับ ตัวอย่างที่สอง ขยาย ธาตุสายฟ้า {
@ ติดตามมูลค่า ;
// รับวัตถุ
@ ลวด ( รับObjectInfo , { วัตถุApiName : : แคมเปญ } )
ข้อมูลวัตถุ ;
// รับประเภทแคมเปญ - รายการเลือก
@ ลวด ( getPicklistValues , { recordTypeId : : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : : พิมพ์ } )
ค่าประเภทแคมเปญ ;
การประชุม = เท็จ ;
การสัมมนาผ่านเว็บ = เท็จ ;
หุ้นส่วน = เท็จ ;
อื่น = เท็จ ;
// จัดการตรรกะ
จัดการการเปลี่ยนแปลง ( เหตุการณ์ ) {
นี้ . ค่า = เหตุการณ์. เป้า . ค่า ;
ถ้า ( นี้ . ค่า === 'การประชุม' ) {
// แสดงสถานะตามที่วางแผนไว้
นี้ . การประชุม = จริง ;
นี้ . การสัมมนาผ่านเว็บ = เท็จ ;
นี้ . หุ้นส่วน = เท็จ ;
}
อื่น ถ้า ( นี้ . ค่า === 'การสัมมนาผ่านเว็บ' ) {
// แสดงสถานะว่าเสร็จสมบูรณ์
นี้ . การสัมมนาผ่านเว็บ = จริง ;
นี้ . การประชุม = เท็จ ;
นี้ . หุ้นส่วน = เท็จ ;
}
อื่น ถ้า ( นี้ . ค่า === 'พันธมิตร' ) {
// แสดงสถานะเป็นอยู่ระหว่างดำเนินการ
นี้ . การสัมมนาผ่านเว็บ = เท็จ ;
นี้ . การประชุม = เท็จ ;
นี้ . หุ้นส่วน = จริง ;
}
อื่น {
// แสดงสถานะเป็น IN ABORTED
นี้ . การสัมมนาผ่านเว็บ = เท็จ ;
นี้ . การประชุม = เท็จ ;
นี้ . หุ้นส่วน = เท็จ ;
}
}
}
SecondComponent.js-meta.xml
รุ่น = '1.0' ?><เวอร์ชัน API> 57.0 < / เวอร์ชัน api>
<ถูกเปิดเผย> จริง < / ถูกเปิดเผย>
<เป้าหมาย>
<เป้าหมาย> สายฟ้า__AppPage < / เป้าหมาย>
<เป้าหมาย> ฟ้าผ่า__RecordPage < / เป้าหมาย>
< / เป้าหมาย>
< / LightningComponentBundle>
เอาท์พุท:
ประเภท – “การประชุม” ดังนั้นสถานะคือ 'วางแผนแล้ว'
ประเภท – “การสัมมนาผ่านเว็บ” ดังนั้นสถานะคือ 'เสร็จสมบูรณ์'
ประเภท – “พันธมิตร” ดังนั้นสถานะคือ 'อยู่ระหว่างดำเนินการ'
ประเภทไม่อยู่ในตัวเลือกที่ให้ไว้ ดังนั้นสถานะคือ 'ยกเลิก'
ตัวอย่างที่ 3:
ตอนนี้ เราสร้างคอมโบบ็อกซ์ที่มีบันทึกแคมเปญเป็นตัวเลือก หากเราเลือกตัวเลือกใดๆ ประเภทแคมเปญที่เกี่ยวข้องจะถูกส่งกลับบน UI
ก่อนอื่น เราต้องสร้างคลาส Apex ด้วยเมธอด getCampaign() วิธีนี้จะส่งคืนรายการแคมเปญทั้งหมดที่มีรหัส ชื่อ ประเภท และสถานะ
บันทึกแคมเปญ เอพีเอ็กซ์สาธารณะด้วยการแบ่งปัน ระดับ บันทึกแคมเปญ {
@ ออร่าเปิดใช้งาน ( แคชได้ = จริง )
// รับรายการแคมเปญ
สาธารณะ คงที่ รายการ < แคมเปญ > getCampaign ( ) {
กลับ [ เลือกรหัส , ชื่อ , พิมพ์ , สถานะจากแคมเปญ ] ;
}
}
ThirdExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'ประเภทแคมเปญ' ไอคอน- ชื่อ = 'มาตรฐาน:แคมเปญ' >
< กอง ระดับ = 'slds-var-m-around_medium' สไตล์ = 'ความสูง:20px; ความกว้าง:400px' >
<ไลท์นิ่งคอมโบบ็อกซ์ ชื่อ = 'แคมเปญ'
ฉลาก = 'เลือกชื่อแคมเปญ'
ตัวเลือก = { ตัวเลือกแคมเปญ }
ค่า = { ค่า }
เมื่อมีการเปลี่ยนแปลง = { จัดการการเปลี่ยนแปลง }
>
< / สายฟ้าคอมโบบ็อกซ์>
< / กอง >< พี่ชาย >
< พี่ชาย >
< พี > ประเภทแคมเปญสำหรับแคมเปญนี้: < ข > {ค่า} < / ข >< / พี >
< / การ์ดสายฟ้า>
< / แม่แบบ>
ThirdExample.js
- เราจำเป็นต้องระบุวิธีการรับรายการแคมเปญภายในวิธีconnectedcallback() ประกาศอาร์เรย์ชื่อ 'camps' และจัดเก็บผลลัพธ์โดยมีป้ายกำกับเป็นรหัสแคมเปญ และค่าเป็นประเภทแคมเปญ อาร์เรย์นี้เป็นอินพุตของชื่อแคมเปญ (ต้องสร้างด้วยเครื่องมือตกแต่งแทร็ก)
- ในเมธอด Campaignoptions() ให้ส่งคืนอาร์เรย์ campaignNames ดังนั้น Combobox จึงใช้ตัวเลือกเหล่านี้
- ตั้งค่าที่เลือกในเมธอด handleonchange()
นำเข้า รับแคมเปญจาก '@salesforce/apex/CampaignRecords.getCampaign' ;
ส่งออก ค่าเริ่มต้น ระดับ ตัวอย่างที่สาม ขยาย ธาตุสายฟ้า {
ค่า = '' ;
@ ติดตามชื่อแคมเปญ = [ ] ;
รับ ตัวเลือกแคมเปญ ( ) {
กลับ นี้ . ชื่อแคมเปญ ;
}
// เพิ่มตัวเลือกให้กับอาร์เรย์ค่ายจาก Apex
// ป้ายกำกับจะเป็นชื่อแคมเปญ
// ค่าจะเป็นประเภทแคมเปญ
เชื่อมต่อโทรกลับ ( ) {
getCampaign ( )
. แล้ว ( ผลลัพธ์ => {
ปล่อยให้ค่าย = [ ] ;
สำหรับ ( เคยเป็น เค = 0 ; เค < ผลลัพธ์. ความยาว ; เค ++ ) {
ค่าย ดัน ( { ฉลาก : : ผลลัพธ์ [ เค ] . ชื่อ , ค่า : : ผลลัพธ์ [ เค ] . พิมพ์ } ) ;
}
นี้ . ชื่อแคมเปญ = ค่าย ;
} )
}
//จัดการค่า
จัดการการเปลี่ยนแปลง ( เหตุการณ์ ) {
นี้ . ค่า = เหตุการณ์. รายละเอียด . ค่า ;
}
}
เอาท์พุท:
เรามาเลือกบันทึกและดูประเภทกัน
บทสรุป
เราเรียนรู้วิธีสร้างคอมโบบ็อกซ์ใน LWC พร้อมคุณสมบัติและตัวอย่าง ขั้นแรก เราสร้างคอมโบบ็อกซ์พร้อมรายการค่าและแสดงค่าที่เลือก ต่อไป เราจะเรนเดอร์เทมเพลต HTML ตามค่าที่เลือกผ่านการเรนเดอร์แบบมีเงื่อนไข สุดท้ายนี้ เราได้เรียนรู้วิธีสร้างตัวเลือกสำหรับคอมโบบ็อกซ์จากบันทึก Salesforce ที่มีอยู่ และแสดงฟิลด์ที่เกี่ยวข้องบน UI