Trong Salesforce LWC, nếu bạn muốn cho phép người dùng chọn một tùy chọn từ danh sách tùy chọn đã chỉ định, combobox sẽ được sử dụng. Trong hướng dẫn này, chúng ta sẽ thảo luận về cách tạo combobox và các thuộc tính khác nhau được combobox hỗ trợ kèm theo các ví dụ.
Hộp tổ hợp
Về cơ bản, combobox là trường chỉ đọc cung cấp đầu vào để chọn một tùy chọn từ các tùy chọn đã chỉ định. Chúng ta có thể tạo cái này bằng thẻ Lightning-combobox. Các thuộc tính lần lượt là tốc độ và được phân tách bằng dấu cách. Hãy thảo luận về một số thuộc tính bắt buộc khi tạo combobox.
- nhãn – Cái này dùng để chỉ định nhãn (văn bản) cho combobox của bạn.
- tùy chọn – Mỗi tùy chọn có thuộc tính “nhãn” và “giá trị”. Chúng ta có thể chỉ định nhiều tùy chọn trong danh sách được phân tách bằng dấu phẩy.
- phần giữ chỗ : Trước khi lựa chọn một phương án, người dùng cần biết những thông tin liên quan đến phương án đó. Vì vậy, thuộc tính này được chỉ định.
- yêu cầu : Trong một số trường hợp, bắt buộc phải chọn tùy chọn. Chúng ta có thể yêu cầu nó bằng cách chỉ định thuộc tính này.
- tàn tật : Có thể ngăn chặn người dùng bằng cách chọn tùy chọn từ hộp kiểm. Thuộc tính này vô hiệu hóa combobox.
Cú pháp:
Hãy xem cách tạo combobox với một số thuộc tính quan trọng.
tên='tên'
nhãn='nhãn_name'
value={value_from_the_option}
placeholder='Văn bản trợ giúp'
tùy chọn={List_of_options}
onchange={handleChange} >
Sự chỉ rõ:
Hãy xem các bước để tạo combobox và làm việc với nó.
Trong tệp JavaScript, hãy tạo danh sách các tùy chọn có nhãn và giá trị bên trong phương thức “getter”.
Tạo một biến lưu trữ tùy chọn mặc định.
Viết hàm xử lý lưu trữ tùy chọn được người dùng chọn từ UI.
Trong tệp HTML, hãy tạo hộp tổ hợp và chuyển các thuộc tính. Ngoài ra, chúng ta cần chuyển trình xử lý sự kiện onchange() để xử lý các tùy chọn trong combobox. Nó có chức năng “Handler” được tạo trong tệp “js”.
Trong tất cả các ví dụ mà chúng ta sẽ thảo luận trong hướng dẫn này, logic sẽ được cung cấp dưới dạng mã “js”. Sau đó, chúng tôi chỉ định ảnh chụp màn hình bao gồm toàn bộ mã “js”.
Ví dụ 1:
Tạo combobox với năm chủ đề (chi tiết) trong tệp Javascript. Chỉ định giá trị mặc định là “JAVA”. Xử lý combobox trong phương thức handSubjectsOnChange(). Chuyển giá trị và thông tin chi tiết cho thuộc tính “giá trị và tùy chọn” trong tệp HTML có nhãn và triển khai thành phần.
firstExample.html
< div lớp học = 'slds-var-m-around_medium' >
nhãn = 'Chọn chủ đề của bạn:'
giá trị = { giá trị }
tùy chọn = { chi tiết }
trao đổi = { xử lýSubjectsOnChange } >< / combobox sét>
< anh >
< P > Môn học của bạn: < b > {giá trị} < / b >< / P >
< / div >
< / thẻ sét>
< / mẫu>
firstExample.js
// Tạo giá trị mặc định - 'JAVA' cho Comboboxgiá trị = 'JAVA' ;
// Hiển thị các chủ đề
lấy chi tiết ( ) {
// 5 môn
trở lại [ { nhãn : 'Java' , giá trị : 'JAVA' } ,
{ nhãn : 'Trăn' , giá trị : 'trăn' } ,
{ nhãn : 'HTML' , giá trị : 'HTML' } ,
{ nhãn : 'C' , giá trị : 'C' } ,
{ nhãn : 'C++' , giá trị : 'C++' } ] ;
}
// Xử lý logic để thiết lập giá trị
xử lýSubjectsOnChange ( sự kiện ) {
cái này . giá trị = sự kiện. chi tiết . giá trị ;
}
}
Toàn bộ mã:
firstComponent.js-meta.xml
phiên bản = '1.0' ?><được phơi bày> ĐÚNG VẬY < / được phơi bày>
< / mục tiêu>
< / Gói thành phần Lightning>
Đầu ra:
Thêm thành phần này vào trang “Record” của bất kỳ đối tượng nào. Trong tệp HTML, chúng tôi hiển thị giá trị trong thẻ đoạn văn. Khi người dùng chọn bất kỳ tùy chọn nào, nó sẽ được hiển thị dưới dạng in đậm. Theo mặc định, “JAVA” được chọn và hiển thị sau khi thành phần được hiển thị trên trang.
Hãy chọn chủ đề là “C”. “C” được trả về bên dưới combobox.
Ví dụ 2:
Trong ví dụ này, chúng tôi sẽ hiển thị các thành phần khác nhau dựa trên các giá trị danh sách chọn Loại chiến dịch (từ đối tượng Chiến dịch).
- Nếu loại Chiến dịch là “Hội nghị”, chúng tôi sẽ hiển thị mẫu trả về văn bản – Trạng thái chiến dịch: ĐÃ KẾ HOẠCH
- Nếu loại Chiến dịch là “Hội thảo trên web”, chúng tôi sẽ hiển thị mẫu trả về văn bản – Trạng thái chiến dịch: HOÀN THÀNH
- Nếu loại Chiến dịch là “Đối tác”, chúng tôi sẽ hiển thị mẫu trả về văn bản – Trạng thái chiến dịch: ĐANG TIẾN HÀNH
- Trạng thái chiến dịch: BỎ QUA đối với các tùy chọn còn lại.
giâyExample.html
< div lớp học = 'slds-var-m-around_medium' phong cách = 'chiều cao: 20px; chiều rộng: 400px' >
tùy chọn = { Giá trị loại chiến dịch. dữ liệu .giá trị }
trao đổi = { xử lýThay đổi } >
< / combobox sét>
< / mẫu>< anh / >
< / div >
< anh >< anh >
< trung tâm > Trạng thái chiến dịch: < b >< Tôi > KẾ HOẠCH< / Tôi >< / b > < / trung tâm >
< / mẫu>
< trung tâm > Trạng thái chiến dịch: < b >< Tôi > ĐÃ HOÀN THÀNH< / Tôi >< / b > < / trung tâm >
< / mẫu>
< trung tâm > Trạng thái chiến dịch: < b >< Tôi > ĐANG TIẾN HÀNH< / Tôi >< / b > < / trung tâm >
< / mẫu>
< trung tâm > Trạng thái chiến dịch: < b >< Tôi > BỎ QUA< / Tôi >< / b > < / trung tâm >
< / mẫu>
< / thẻ sét>
< / mẫu>
thứ haiExample.js
Chúng tôi nhập đối tượng Chiến dịch (Tiêu chuẩn) dưới dạng CHIẾN DỊCH và Loại từ đối tượng đó dưới dạng LOẠI. Từ Lightning/uiObjectInfoApi, chúng tôi nhập getPicklistValues và getObjectInfo. Những thứ này sẽ nhận được các giá trị danh sách chọn có sẵn trong trường Loại. Chúng sẽ được sử dụng làm tùy chọn cho combobox. Những điều sau đây được xử lý trong hàm handChange().
- Nếu giá trị === “Conference”, chúng ta đặt biến Conferenceval thành true và hai biến còn lại là false.
- Nếu giá trị === “Hội thảo trên web”, chúng tôi đặt biến webinarval thành true và hai biến còn lại là sai.
- Nếu giá trị === “Đối tác”, chúng tôi đặt biến đối tác thành true và hai biến còn lại là sai.
- Nếu giá trị không có trong các tùy chọn đã cho thì tất cả đều sai.
nhập khẩu CHIẾN DỊCH từ '@saleforce/lược đồ/Chiến dịch' ;
nhập khẩu LOẠI từ '@saleforce/schema/Campaign.Type' ;
nhập khẩu { getPicklistValues } từ 'sét/uiObjectInfoApi' ;
nhập khẩu { getObjectInfo } từ 'sét/uiObjectInfoApi' ;
xuất khẩu mặc định lớp học Ví dụ thứ hai mở rộng Yếu tố sét {
@ theo dõi giá trị ;
// Lấy đối tượng
@ dây điện ( getObjectInfo , { đối tượngApiName : CHIẾN DỊCH } )
thông tin đối tượng ;
// Lấy loại chiến dịch - Danh sách chọn
@ dây điện ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , lĩnh vựcApiName : KIỂU } )
Loại chiến dịchGiá trị ;
hội nghị = SAI ;
hội thảo trực tuyến = SAI ;
hợp tác = SAI ;
khác = SAI ;
// Xử lý logic
xử lýThay đổi ( sự kiện ) {
cái này . giá trị = sự kiện. mục tiêu . giá trị ;
nếu như ( cái này . giá trị === 'Hội nghị' ) {
// Hiển thị trạng thái là KẾ HOẠCH
cái này . hội nghị = ĐÚNG VẬY ;
cái này . hội thảo trực tuyến = SAI ;
cái này . hợp tác = SAI ;
}
khác nếu như ( cái này . giá trị === 'Hội thảo' ) {
// Hiển thị trạng thái là HOÀN THÀNH
cái này . hội thảo trực tuyến = ĐÚNG VẬY ;
cái này . hội nghị = SAI ;
cái này . hợp tác = SAI ;
}
khác nếu như ( cái này . giá trị === 'Đối tác' ) {
// Hiển thị trạng thái là ĐANG TIẾN HÀNH
cái này . hội thảo trực tuyến = SAI ;
cái này . hội nghị = SAI ;
cái này . hợp tác = ĐÚNG VẬY ;
}
khác {
// Hiển thị trạng thái IN ABOTED
cái này . hội thảo trực tuyến = SAI ;
cái này . hội nghị = SAI ;
cái này . hợp tác = SAI ;
}
}
}
thứ haiComponent.js-meta.xml
phiên bản = '1.0' ?><được phơi bày> ĐÚNG VẬY < / được phơi bày>
< / mục tiêu>
< / Gói thành phần Lightning>
Đầu ra:
Loại – “Hội nghị”. Vì vậy, trạng thái là “ĐÃ KẾ HOẠCH”.
Loại – “Hội thảo trên web”. Vì vậy trạng thái là “ĐÃ HOÀN THÀNH”.
Loại – “Đối tác”. Vì vậy, trạng thái là “Đang tiến hành”.
Loại này không có trong các tùy chọn được cung cấp. Vì vậy, trạng thái là “HỦY”.
Ví dụ 3:
Bây giờ, chúng tôi tạo một hộp tổ hợp với các bản ghi Chiến dịch làm tùy chọn. Nếu chúng ta chọn bất kỳ tùy chọn nào thì loại Chiến dịch tương ứng sẽ được trả về trên UI.
Đầu tiên, chúng ta cần tạo một lớp Apex bằng phương thức getCampaign(). Phương thức này trả về danh sách tất cả các Chiến dịch có id, tên, loại và trạng thái.
Bản ghi Chiến dịch. apxccông khai với sự chia sẻ lớp học Bản ghi Chiến dịch {
@ Aura được kích hoạt ( có thể lưu vào bộ nhớ đệm = ĐÚNG VẬY )
// Lấy danh sách Chiến dịch
công cộng tĩnh Danh sách < Chiến dịch > nhận được chiến dịch ( ) {
trở lại [ CHỌN Id , Tên , Kiểu , Trạng thái từ Chiến dịch ] ;
}
}
thứ baExample.html
< div lớp học = 'slds-var-m-around_medium' phong cách = 'chiều cao: 20px; chiều rộng: 400px' >
nhãn = 'Chọn tên chiến dịch'
tùy chọn = { Tùy chọn chiến dịch }
giá trị = { giá trị }
trao đổi = { xử lý trao đổi }
>
< / combobox sét>
< / div >< anh >
< anh >
< P > Loại chiến dịch cho chiến dịch này: < b > {giá trị} < / b >< / P >
< / thẻ sét>
< / mẫu>
thứ baExample.js
- Chúng ta cần chỉ định phương thức lấy danh sách Chiến dịch bên trong phương thức linkedcallback(). Khai báo một mảng có tên là “camps” và lưu trữ kết quả với nhãn là ID chiến dịch và giá trị là Loại chiến dịch. Mảng này là đầu vào cho Tên chiến dịch (mảng này phải được tạo bằng trình trang trí bản nhạc).
- Trong phương thức getter Campaignoptions(), trả về mảng CampaignNames. Vì vậy, combobox sử dụng các tùy chọn này.
- Đặt giá trị đã chọn trong phương thức xử lý handonchange().
nhập khẩu nhận được chiến dịch từ '@saleforce/apex/CampaignRecords.getCampaign' ;
xuất khẩu mặc định lớp học Ví dụ thứ ba mở rộng Yếu tố sét {
giá trị = '' ;
@ theo dõi tên chiến dịch = [ ] ;
lấy Tùy chọn chiến dịch ( ) {
trở lại cái này . tên chiến dịch ;
}
// Thêm các tùy chọn vào mảng trại từ Apex.
// nhãn sẽ là Tên chiến dịch
// giá trị sẽ là Loại chiến dịch
đã kết nốiGọi lại ( ) {
nhận được chiến dịch ( )
. sau đó ( kết quả => {
hãy cắm trại = [ ] ;
vì ( đã từng là k = 0 ; k < kết quả. chiều dài ; k ++ ) {
trại. xô ( { nhãn : kết quả [ k ] . Tên , giá trị : kết quả [ k ] . Kiểu } ) ;
}
cái này . tên chiến dịch = trại ;
} )
}
// Xử lý giá trị
xử lý trao đổi ( sự kiện ) {
cái này . giá trị = sự kiện. chi tiết . giá trị ;
}
}
Đầu ra:
Hãy chọn bản ghi và xem loại.
Phần kết luận
Chúng tôi đã tìm hiểu cách tạo combobox trong LWC với các thuộc tính và ví dụ. Đầu tiên, chúng tôi tạo một hộp tổ hợp có danh sách các giá trị và hiển thị giá trị đã chọn. Tiếp theo, chúng tôi kết xuất mẫu HTML dựa trên giá trị đã chọn thông qua kết xuất có điều kiện. Cuối cùng, chúng tôi đã tìm hiểu cách tạo các tùy chọn cho combobox từ các bản ghi Salesforce hiện có và hiển thị các trường liên quan trên giao diện người dùng.