ב-Salesforce LWC, אם ברצונך לאפשר למשתמש לבחור אפשרות מרשימת האפשרויות שצוינה, נעשה שימוש ב-combobox. במדריך זה, נדון כיצד ליצור combobox ואת התכונות השונות הנתמכות על combobox עם דוגמאות.
Combobox
בעיקרון, combobox הוא שדה לקריאה בלבד המספק קלט לבחירת אפשרות מהאפשרויות שצוינו. אנחנו יכולים ליצור את זה באמצעות תג lightning-combobox. התכונות הן מהירות אחת אחרי השנייה שמופרדת על ידי רווח. בואו נדון בכמה תכונות שנדרשות בעת יצירת תיבה משולבת.
- תווית - זה משמש כדי לציין את התווית (טקסט) עבור התיבה המשולבת שלך.
- אפשרויות - כל אפשרות מקבלת את התכונות 'תווית' ו'ערך'. אנו יכולים לציין את האפשרויות המרובות ברשימה מופרדת בפסיק.
- מציין מיקום : לפני בחירת אפשרות, המשתמש צריך לדעת את המידע הקשור לאפשרויות. אז, תכונה זו מצוינת.
- נדרש : במקרים מסוימים, חובה לבחור באפשרות. אנו יכולים להגדיר זאת כנדרש על ידי ציון תכונה זו.
- נָכֶה : ניתן למנוע את המשתמש על ידי בחירת האפשרות בתיבת הסימון. תכונה זו משביתה את התיבה המשולבת.
תחביר:
בוא נראה כיצד ליצור combobox עם כמה תכונות חשובות.
label='label_name'
value={value_from_the_option}
placeholder='טקסט עזרה'
options={List_of_options}
onchange={handleChange} >
מִפרָט:
בוא נראה את השלבים ליצירת הקומבובוקס ולעבוד איתה.
בקובץ ה-JavaScript, צור רשימה של אפשרויות עם תווית וערך בתוך שיטת ה-'getter'.
צור משתנה המאחסן את אפשרות ברירת המחדל.
כתוב את פונקציית ה-handle שמאחסנת את האפשרות שנבחרה על ידי המשתמש מהממשק.
בקובץ ה-HTML, צור combobox והעביר את התכונות. כמו כן, עלינו להעביר את מטפל האירועים onchange() שמטפל באפשרויות ב-combobox. זה לוקח את הפונקציה 'Handler' שנוצרה בקובץ 'js'.
בכל הדוגמאות שאנו הולכים לדון בהן במדריך זה, ההיגיון יסופק כקוד 'js'. לאחר מכן, אנו מציינים את צילום המסך הכולל את כל הקוד 'js'.
דוגמה 1:
צור combobox עם חמישה נושאים (פרטים) בקובץ Javascript. ציין את ערך ברירת המחדל בתור 'JAVA'. טפל בתיבת המשולבת בשיטת handleSubjectsOnChange() . העבירו את הערך והפרטים לתכונות 'ערך ואפשרויות' בקובץ ה-HTML עם תווית ופרסו את הרכיב.
firstExample.html
<תבנית><כרטיס ברק כותרת = 'Combobox של נושאים' >
< div מעמד = 'slds-var-m-around_medium' >
תווית = 'בחר את הנושא שלך:'
ערך = { ערך }
אפשרויות = { פרטים }
בשינוי = { handleSubjectsOnChange } >< / lightning-combobox>
< br >
< ע > הנושא שלך: < ב > {ערך} < / ב >< / ע >
< / div >
< / ברק-כרטיס>
< / תבנית>
firstExample.js
// צור ערך ברירת מחדל - 'JAVA' עבור ה-Comboboxערך = 'JAVA' ;
// הצג את הנושאים
לקבל פרטים ( ) {
// 5 נושאים
לַחֲזוֹר [ { תווית : 'ג'אווה' , ערך : 'JAVA' } ,
{ תווית : 'פִּיתוֹן' , ערך : 'פִּיתוֹן' } ,
{ תווית : 'HTML' , ערך : 'HTML' } ,
{ תווית : 'ג' , ערך : 'ג' } ,
{ תווית : 'C++' , ערך : 'C++' } ] ;
}
// טפל בלוגיקה כדי להגדיר את הערך
handleSubjectsOnChange ( מִקרֶה ) {
זֶה . ערך = מִקרֶה. פרט . ערך ;
}
}
כל הקוד:
firstComponent.js-meta.xml
גִרְסָה = '1.0' ?><מטרות>
<יעד> lightning__AppPage < / יעד>
<יעד> lightning__RecordPage < / יעד>
< / מטרות>
< / LightningComponentBundle>
תְפוּקָה:
הוסף את הרכיב הזה לדף 'הקלט' של כל אובייקט. בקובץ HTML, אנו מציגים את הערך בתג הפסקה. כאשר משתמש בוחר אפשרות כלשהי, היא תוצג כמודגש. כברירת מחדל, 'JAVA' נבחר ומוצג לאחר עיבוד הרכיב בדף.
בוא נבחר את הנושא בתור 'C'. 'C' מוחזר מתחת לתיבת המשולבת.
דוגמה 2:
בדוגמה זו, נעבד את הרכיבים השונים בהתבסס על ערכי רשימת הבחירה מסוג Campaign (מאובייקט Campaign).
- אם סוג הקמפיין הוא 'ועידה', נעבד את התבנית שמחזירה את הטקסט - סטטוס מסע פרסום: מתוכנן
- אם סוג מסע הפרסום הוא 'סמינר מקוון', נעבד את התבנית שמחזירה את הטקסט - סטטוס מסע פרסום: הושלם
- אם סוג הקמפיין הוא 'שותפים', נעבד את התבנית שמחזירה את הטקסט - סטטוס מסע פרסום: בתהליכים
- סטטוס מסע פרסום: בוטל עבור שאר האפשרויות.
secondExample.html
<תבנית><כרטיס ברק כותרת = 'סוג מסע פרסום' סמל- שֵׁם = 'standard:campaign' >
< div מעמד = 'slds-var-m-around_medium' סִגְנוֹן = 'גובה: 20 פיקסלים; רוחב: 400 פיקסלים' >
= { CampaignTypeValues. נתונים } >
אפשרויות = { CampaignTypeValues. נתונים .ערכים }
בשינוי = { handleChange } >
< / lightning-combobox>
< / תבנית>< br / >
< / div >
< br >< br >
= { ועידה } >
< מֶרְכָּז > סטטוס מסע פרסום: < ב >< אני > מתוכנן< / אני >< / ב > < / מֶרְכָּז >
< / תבנית>
= { סמינר אינטרנט } >
< מֶרְכָּז > סטטוס מסע פרסום: < ב >< אני > הושלם< / אני >< / ב > < / מֶרְכָּז >
< / תבנית>
= { partnerval } >
< מֶרְכָּז > סטטוס מסע פרסום: < ב >< אני > בתהליך< / אני >< / ב > < / מֶרְכָּז >
< / תבנית>
< מֶרְכָּז > סטטוס מסע פרסום: < ב >< אני > הופסק< / אני >< / ב > < / מֶרְכָּז >
< / תבנית>
< / ברק-כרטיס>
< / תבנית>
secondExample.js
אנו מייבאים את אובייקט ה-Campaign (Standard) כ-CAMPAIGN וממנו סוגים כ-TYPE. מה-lightning/uiObjectInfoApi, אנו מייבאים את getPicklistValues ו-getObjectInfo. אלה יקבלו את ערכי רשימת הבחירה הזמינים בשדה סוג. אלה ישמשו כאפשרויות עבור ה-combobox. הדברים הבאים מטופלים ב-handleChange().
- אם הערך === 'Conference', אנו מגדירים את משתנה conferenceval כ-true ואת שני האחרים כ-false.
- אם הערך === 'Webinar', אנו מגדירים את המשתנה webinarval כ-true ואת שני האחרים כ-false.
- אם הערך === 'Partners', אנו מגדירים את משתנה partnerval כ-true ואת שני האחרים כ-false.
- אם הערך לא נמצא באפשרויות הנתונות, כולן שקר.
יְבוּא מסע פרסום מ '@salesforce/schema/Campaign' ;
יְבוּא TYPE מ '@salesforce/schema/Campaign.Type' ;
יְבוּא { getPicklistValues } מ 'lightning/uiObjectInfoApi' ;
יְבוּא { getObjectInfo } מ 'lightning/uiObjectInfoApi' ;
יְצוּא בְּרִירַת מֶחדָל מעמד דוגמה שנייה משתרע LightningElement {
@ ערך מעקב ;
// קבל את האובייקט
@ חוּט ( getObjectInfo , { objectApiName : קמפיין } )
objectInfo ;
// קבל את סוג מסע הפרסום - רשימת בחירה
@ חוּט ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : סוּג } )
CampaignTypeValues ;
ועידה = שֶׁקֶר ;
סמינר אינטרנט = שֶׁקֶר ;
partnerval = שֶׁקֶר ;
אַחֵר = שֶׁקֶר ;
// טיפול בהיגיון
handleChange ( מִקרֶה ) {
זֶה . ערך = מִקרֶה. יַעַד . ערך ;
אם ( זֶה . ערך === 'וְעִידָה' ) {
// הצג סטטוס כמתוכנן
זֶה . ועידה = נָכוֹן ;
זֶה . סמינר אינטרנט = שֶׁקֶר ;
זֶה . partnerval = שֶׁקֶר ;
}
אַחֵר אם ( זֶה . ערך === 'סמינרים מקוונים' ) {
// הצג סטטוס כהשלמה
זֶה . סמינר אינטרנט = נָכוֹן ;
זֶה . ועידה = שֶׁקֶר ;
זֶה . partnerval = שֶׁקֶר ;
}
אַחֵר אם ( זֶה . ערך === 'שותפים' ) {
// הצג את הסטטוס בעיצומו
זֶה . סמינר אינטרנט = שֶׁקֶר ;
זֶה . ועידה = שֶׁקֶר ;
זֶה . partnerval = נָכוֹן ;
}
אַחֵר {
// הצג סטטוס כ-IN ABORTED
זֶה . סמינר אינטרנט = שֶׁקֶר ;
זֶה . ועידה = שֶׁקֶר ;
זֶה . partnerval = שֶׁקֶר ;
}
}
}
secondComponent.js-meta.xml
גִרְסָה = '1.0' ?><מטרות>
<יעד> lightning__AppPage < / יעד>
<יעד> lightning__RecordPage < / יעד>
< / מטרות>
< / LightningComponentBundle>
תְפוּקָה:
סוג - 'ועידה'. אז, הסטטוס הוא 'מתוכנן'.
סוג - 'וובינר'. אז, הסטטוס הוא 'הושלם'.
סוג - 'שותפים'. אז, הסטטוס הוא 'בתהליכים'.
הסוג אינו נמצא באפשרויות המסופקות. אז, הסטטוס הוא 'מבוטל'.
דוגמה 3:
כעת, אנו יוצרים תיבה משולבת עם רשומות מסע הפרסום כאפשרויות. אם נבחר אפשרות כלשהי, סוג הקמפיין המתאים יוחזר בממשק המשתמש.
ראשית, עלינו ליצור מחלקה של Apex עם שיטת getCampaign(). שיטה זו מחזירה רשימה של כל מסעות הפרסום עם המזהה, השם, הסוג והסטטוס.
רשומות מסע פרסום. apxcציבורי עם שיתוף מעמד רשומות מסע פרסום {
@ AuraEnabled ( ניתן לאחסון במטמון = נָכוֹן )
// קבל את רשימת הקמפיינים
פּוּמְבֵּי סטָטִי רשימה < קמפיין > getCampaign ( ) {
לַחֲזוֹר [ SELECT ID , שֵׁם , סוּג , סטטוס מקמפיין ] ;
}
}
thirdExample.html
<תבנית><כרטיס ברק כותרת = 'סוג מסע פרסום' סמל- שֵׁם = 'standard:campaign' >
< div מעמד = 'slds-var-m-around_medium' סִגְנוֹן = 'גובה: 20 פיקסלים; רוחב: 400 פיקסלים' >
תווית = 'בחר שם מסע פרסום'
אפשרויות = { קמפיינים }
ערך = { ערך }
בשינוי = { לטפל בשינוי }
>
< / lightning-combobox>
< / div >< br >
< br >
< ע > סוג מסע פרסום עבור מסע פרסום זה: < ב > {ערך} < / ב >< / ע >
< / ברק-כרטיס>
< / תבנית>
thirdExample.js
- עלינו לציין את השיטה שמקבלת רשימה של קמפיינים בתוך השיטה connectedcallback() . הכריז על מערך בשם 'camps' ואחסן את התוצאה עם התווית כמזהה מסע פרסום והערך כסוג מסע פרסום. מערך זה הוא הקלט ל-campaignsNames (יש ליצור את זה עם מעצב המסלול).
- בשיטת ה-Campaignoptions() getter, החזר את מערך ה-campaignnames. אז, combobox משתמש באפשרויות אלה.
- הגדר את הערך שנבחר בשיטת המטפל handleonchange() .
יְבוּא getCampaign מ '@salesforce/apex/CampaignRecords.getCampaign' ;
יְצוּא בְּרִירַת מֶחדָל מעמד דוגמה שלישית משתרע LightningElement {
ערך = '' ;
@ לעקוב אחר שמות קמפיינים = [ ] ;
לקבל קמפיינים ( ) {
לַחֲזוֹר זֶה . שמות מסע פרסום ;
}
// הוסף את האפשרויות למערך המחנות מה-Apex.
// התווית תהיה שם מסע הפרסום
// הערך יהיה סוג מסע הפרסום
מחובר התקשרות חזרה ( ) {
getCampaign ( )
. לאחר מכן ( תוֹצָאָה => {
לתת למחנות = [ ] ;
ל ( היה ק = 0 ; ק < תוֹצָאָה. אורך ; ק ++ ) {
מחנות. לִדחוֹף ( { תווית : תוֹצָאָה [ ק ] . שֵׁם , ערך : תוֹצָאָה [ ק ] . סוּג } ) ;
}
זֶה . שמות מסע פרסום = מחנות ;
} )
}
// טפל בערך
לטפל בשינוי ( מִקרֶה ) {
זֶה . ערך = מִקרֶה. פרט . ערך ;
}
}
תְפוּקָה:
בוא נבחר את הרשומה ונראה את הסוג.
סיכום
למדנו כיצד ליצור combobox ב-LWC עם תכונות ודוגמאות. ראשית, יצרנו combobox עם רשימת ערכים והצגנו את הערך שנבחר. לאחר מכן, אנו מעבדים את תבנית ה-HTML על סמך הערך שנבחר באמצעות העיבוד המותנה. לבסוף, למדנו כיצד ליצור את האפשרויות עבור ה-combobox מתוך רשומות Salesforce הקיימות ולהציג את השדות הקשורים בממשק המשתמש.