ขอแนะนำส่วนขยาย Lightning Studio
Lightning Studio สร้างการพัฒนา Salesforce LWC ที่ง่ายและรวดเร็วที่สุด ภายในตัวแก้ไขนี้ เราสามารถสร้างช่อง Apex/ข้อความ และสคริปต์ LWC ได้โดยตรง นอกจากนี้ เรายังสามารถปรับใช้ส่วนประกอบ LWC (กำหนดเอง) ได้โดยตรงในครั้งเดียว มาดูวิธีเพิ่มสิ่งนี้ในเว็บไซต์ของเราและเปิด
ไปที่เว็บไซต์และค้นหา “Lightning Studio – Add Chrome” (หากคุณใช้ Chrome) คลิกที่ปุ่ม 'เพิ่มใน Chrome'
เราจะเห็นว่ามันถูกเพิ่มเข้าไปใน Chrome ตอนนี้มันถูกปิดใช้งาน ซึ่งจะเปิดใช้งานเฉพาะเมื่อมีการเปิด Salesforce Org
เปิดใช้งานหลังจากเข้าสู่ระบบ Salesforce Org
คลิกที่ส่วนขยาย
ไปทางซ้ายแล้วเลือกไอคอนที่สามซึ่งใช้สร้างส่วนประกอบ LWC ใหม่
- ก่อนอื่นเราต้องระบุชื่อส่วนประกอบ
- “isExposed” ใช้เพื่อตั้งค่าการมองเห็นส่วนประกอบใน Salesforce จะต้องตั้งค่าเป็นจริง
- สิ่งสำคัญคือต้องระบุเป้าหมายที่จะวางส่วนประกอบ สามารถเลือกได้หลายเป้าหมาย
- การปรับใช้คอมโพเนนต์เป็นขั้นตอนสุดท้าย (คลิกที่ 'ปรับใช้')
ตัวอย่างที่ 1: การเพิ่มไปยังหน้าบันทึก
ในสถานการณ์สมมตินี้ เราสร้างสคริปต์ LWC “องค์ประกอบแรก” ที่แสดงข้อความ “เพิ่มไปยังหน้าเรกคอร์ด” และเพิ่มส่วนประกอบนี้ในหน้า “เรกคอร์ดบัญชี” ในไฟล์ “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 >
< เป็นที่เปิดเผย > จริง เป็นที่เปิดเผย >
< เป้าหมาย >
< เป้า > ฟ้าแลบ__RecordPage เป้า >
เป้าหมาย >
LightningComponentBundle >
การเพิ่มส่วนประกอบ:
ไปที่ Salesforce Org และค้นหาแอป “Sales” ใต้ App Launcher
เปิดบันทึกบัญชีใด ๆ โดยไปที่แท็บ 'บัญชี' ไปที่ไอคอนรูปเฟืองแล้วเลือก 'แก้ไขหน้า'
ตอนนี้ ไปทางซ้ายและค้นหาส่วนประกอบของคุณ
ลากส่วนประกอบและวางไว้ใต้ 'แผงไฮไลท์'
คลิกที่ 'เปิดใช้งาน' และกำหนดให้เป็นค่าเริ่มต้นขององค์กร สุดท้ายบันทึกหน้าบันทึก
มันจบแล้ว. ตอนนี้ กลับไปที่หน้าแอป 'การขาย' และไปที่ 'บันทึกบัญชี' (บันทึกใดก็ได้) คุณจะเห็นว่ามีการเพิ่มองค์ประกอบที่กำหนดเอง
ตัวอย่างที่ 2: การเพิ่มไปยังโฮมเพจ
มาใช้ “องค์ประกอบแรก” กันเถอะ แก้ไขข้อความย่อหน้าเป็น 'เพิ่มในหน้าแรก' ในไฟล์ HTML ระบุเป้าหมายเป็น “lightning__HomePage” ในไฟล์ “firstComponent.js-meta.xml”
firstComponent.html
<แม่แบบ><การ์ดสายฟ้า ตัวแปร = 'แคบ' ชื่อ = 'ลีนุกซ์' >
< หน้า > เพิ่มไปที่หน้าแรกแล้ว < / หน้า >
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstComponent.js-meta.xml
รุ่น = '1.0' ?><เป้าหมาย>
< / เป้าหมาย>
< / LightningComponentBundle>
การเพิ่มส่วนประกอบ:
ไปที่แอป 'การขาย' และคลิกที่แท็บ 'หน้าแรก'
คลิกที่หน้าแก้ไขที่มีอยู่ใต้ไอคอนรูปเฟือง ค้นหาส่วนประกอบและวางไว้เหนือส่วนประกอบ 'ประสิทธิภาพ' บันทึกหน้า
รีเฟรชแท็บ 'หน้าแรกการขาย'
เราจะเห็นว่ามีการเพิ่มส่วนประกอบของเราในหน้าแรก
ตัวอย่างที่ 3: การเพิ่มไปยังหน้าแอพ
มาใช้ “องค์ประกอบแรก” กันเถอะ แก้ไขข้อความย่อหน้าเป็น “เพิ่มไปยังหน้าแอพ” ในไฟล์ HTML ระบุเป้าหมายเป็น “lightning__AppPage” ในไฟล์ “firstComponent.js-meta.xml”
firstComponent.html
< แม่แบบ >< การ์ดสายฟ้า ตัวแปร = 'แคบ' ชื่อ = 'ลีนุกซ์' >
< หน้า > เพิ่มไปยังหน้าแอพแล้ว หน้า >
การ์ดสายฟ้า >
แม่แบบ >
firstComponent.js-meta.xml
รุ่น = '1.0' ?><ถูกเปิดเผย> จริง < / isExposed>
<เป้าหมาย>
<เป้าหมาย> ฟ้าแลบ__AppPage < / เป้าหมาย>
< / เป้าหมาย>
< / LightningComponentBundle>
การเพิ่มส่วนประกอบ:
ก่อนอื่น เราต้องสร้างหน้าแอพใน Salesforce โดยใช้ Lightning App Builder ค้นหา “Lightning App Builder” ใน “Quick Find” และคลิก “New” เพื่อสร้างหน้า Lightning ใหม่
เลือกหน้าแอพแล้วไปที่ “ถัดไป”
ตั้งชื่อป้ายกำกับว่า “Linuxhint App” และไปที่ “Next”
ณ ตอนนี้ เราต้องการเพียงหนึ่งภูมิภาคเพื่อวางส่วนประกอบ ดังนั้น เลือก “หนึ่งภูมิภาค” แล้วคลิก “เสร็จสิ้น”
ตอนนี้ ลาก “ส่วนประกอบแรก” ไปที่หน้าและบันทึกหน้า
ป๊อปอัปจะเข้ามาที่หน้าจำเป็นต้องเปิดใช้งาน คลิกที่ “เปิดใช้งาน”
หลังจากนั้น คุณต้องเพิ่มหน้าในแอป ไปที่แท็บ “LIGHTNING EXPERIENCE” แล้วทำสิ่งนี้ บันทึกการเปิดใช้งานนี้
ตอนนี้ไปที่ App Launcher แล้วค้นหา 'Linuxhint App' คุณจะเห็นว่ามีการเพิ่มส่วนประกอบของเราในหน้าแอพ
บทสรุป
ตอนนี้ เราสามารถเข้าใจวิธีเพิ่ม LWC ไปที่หน้าแอพ หน้าแรก และหน้าบันทึก ในทุกสถานการณ์ เราใช้ตัวอย่างเดียวกันเพื่อให้ได้แนวคิดที่ดีขึ้น ตรวจสอบให้แน่ใจว่า “isExposed” เป็นจริง มิฉะนั้น ส่วนประกอบจะไม่ปรากฏใน Salesforce Org ในคำแนะนำทั้งหมดนี้ เราใช้ตัวแก้ไข Lightning Studio (เบต้า) เพื่อพัฒนาโค้ด ขั้นตอนทั้งหมดจะอธิบายเกี่ยวกับวิธีดาวน์โหลดและใช้ตัวแก้ไขนี้ที่จุดเริ่มต้นของคู่มือนี้