היכרות עם תוסף Lightning Studio
Lightning Studio בונה את הפיתוח של Salesforce LWC בקלות ובמהירות. בתוך עורך זה, אנו יכולים ליצור ישירות את ערוצי Apex/הודעות ותסריטי LWC. כמו כן, אנו יכולים לפרוס ישירות את רכיבי LWC (מותאם אישית) במכה אחת. בוא נראה איך להוסיף את זה לאתר שלנו ולפתוח אותו.
כנסו לאתר וחפשו 'Lightning Studio – הוסף כרום' (אם אתם משתמשים בכרום). לחץ על כפתור 'הוסף לכרום'.
אנו יכולים לראות שהוא נוסף לכרום. כעת, הוא מושבת. זה יופעל רק אם הארגון של Salesforce ייפתח.
זה מופעל לאחר כניסה לארגון Salesforce.
לחץ על התוסף.
עבור לשמאל ובחר את הסמל השלישי המשמש ליצירת רכיב LWC חדש.
- ראשית, עלינו לציין את שם הרכיב.
- ה-'isExposed' משמש להגדרת הנראות של הרכיב ב-Salesforce. זה חייב להיות מוגדר כאמת.
- חשוב לציין את המטרה שבה יש למקם את הרכיב. ניתן לבחור מספר יעדים.
- פריסת הרכיב היא השלב האחרון (לחץ על 'פרוס').
דוגמה 1: הוספה לדף הרשומה
בתרחיש זה, אנו יוצרים את הסקריפט 'firstComponent' LWC המציג את הטקסט 'Added to Record' ומוסיפים את הרכיב הזה לדף 'Account Record'. בקובץ 'firstComponent.js-meta.xml', עלינו לציין את המטרה בתור lightning__RecordPage.
מבנה קוד:
firstComponent.html
< תבנית >< כרטיס ברק גִרְסָה אַחֶרֶת = 'לְצַמְצֵם' כותרת = 'לינוקס' >
< ע >> נוסף לדף ההקלטה ע >
כרטיס ברק >
תבנית >
firstComponent.js
יְבוּא { LightningElement } מ 'מַזָל' ;יְצוּא מחלקת ברירת המחדל FirstComponent מרחיבה את LightningElement {
}
firstComponent.js-meta.xml
< ?xml גִרְסָה = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< חשוף > נָכוֹן חשוף >
< מטרות >
< יַעַד > lightning__RecordPage יַעַד >
מטרות >
LightningComponentBundle >
הוספת רכיב:
עבור לארגון Salesforce וחפש את אפליקציית 'מכירות' תחת מפעיל האפליקציות.
פתח כל רשומת חשבון על ידי ניווט ללשונית 'חשבונות'. עבור אל סמל גלגל השיניים ובחר 'ערוך עמוד'.
כעת, עבור לשמאל וחפש את הרכיב שלך.
גרור את הרכיב והציב אותו מתחת ל'חלונית ההדגשות'.
לחץ על 'הפעל' והקצה אותו כברירת המחדל של הארגון. לבסוף, שמור את דף ההקלטה.
זה נעשה. כעת, חזור לדף האפליקציה 'מכירות' ועבור ל'רשומה בחשבון' (כל רשומה). אתה יכול לראות שהרכיב המותאם אישית נוסף.
דוגמה 2: הוספה לדף הבית
בואו נשתמש ב-'firstComponent'. שנה את טקסט הפסקה כ'הוסף לדף הבית' בקובץ ה-HTML. ציין את היעד בתור 'lightning__HomePage' בקובץ 'firstComponent.js-meta.xml'.
firstComponent.html
<תבנית>< ע > נוסף לדף הבית < / ע >
< / ברק-כרטיס>
< / תבנית>
firstComponent.js-meta.xml
גִרְסָה = '1.0' ?><מטרות>
< / מטרות>
< / LightningComponentBundle>
הוספת רכיב:
עבור לאפליקציית 'מכירות' ולחץ על הכרטיסייה 'בית'.
לחץ על דף העריכה הזמין מתחת לסמל גלגל השיניים. חפש את הרכיב והצב אותו מעל לרכיב 'ביצועים'. שמור את הדף.
רענן את הכרטיסייה 'בית מכירות'.
אנו יכולים לראות שהרכיב שלנו נוסף לדף הבית.
דוגמה 3: הוספה לדף האפליקציה
בואו נשתמש ב-'firstComponent'. שנה את טקסט הפסקה כ'נוסף לדף האפליקציה' בקובץ ה-HTML. ציין את היעד בתור 'lightning__AppPage' בקובץ 'firstComponent.js-meta.xml'.
firstComponent.html
< תבנית >< כרטיס ברק גִרְסָה אַחֶרֶת = 'לְצַמְצֵם' כותרת = 'לינוקס' >
< ע > נוסף לדף האפליקציה ע >
כרטיס ברק >
תבנית >
firstComponent.js-meta.xml
גִרְסָה = '1.0' ?><מטרות>
<יעד> lightning__AppPage < / יעד>
< / מטרות>
< / LightningComponentBundle>
הוספת רכיב:
ראשית, עלינו ליצור דף אפליקציה ב-Salesforce באמצעות Lightning App Builder. חפש את 'Lightning App Builder' ב'חיפוש מהיר' ולחץ על 'חדש' כדי ליצור דף ברק חדש.
בחר בדף האפליקציה ועבור אל 'הבא'.
תן את התווית בתור 'Linuxhint App' ועבור אל 'Next'.
נכון לעכשיו, אנחנו צריכים רק אזור אחד כדי למקם את הרכיב. אז, בחר 'אזור אחד' ולחץ על 'סיום'.
כעת, גרור את ה-'firstComponent' לדף ושמור את הדף.
יופיע חלון קופץ שבו צריך להפעיל את הדף. לחץ על 'הפעל'.
לאחר מכן, עליך להוסיף דף לאפליקציה. עבור לכרטיסייה 'חווית ברק' ועשה זאת. שמור את ההפעלה הזו.
כעת, עבור אל משגר האפליקציות וחפש את 'אפליקציית Linuxhint'. אתה יכול לראות שהרכיב שלנו נוסף לדף האפליקציה.
סיכום
כעת, אנו מסוגלים להבין כיצד להוסיף LWC לדף האפליקציה, לדף הבית ולדף ההקלטה. בכל התרחישים, השתמשנו באותן דוגמאות כדי לקבל מושג טוב יותר. ודא שה-'isExposed' נכון. אחרת, הרכיב אינו גלוי בארגון Salesforce. בכל המדריך הזה, השתמשנו בעורך Lightning Studio (Beta) כדי לפתח את הקוד. כל השלבים מוסברים כיצד להוריד ולהשתמש בעורך זה בתחילת מדריך זה.