Menambahkan Komponen LWC di Salesforce

Menambahkan Komponen Lwc Di Salesforce



Dalam panduan ini, kita akan membahas cara menambahkan Komponen Web Lightning ke halaman Salesforce Record/Home/App. Seperti yang kita ketahui, LWC adalah singkatan dari Lightning Web Component yang merupakan jantung kustomisasi dari Salesforce yang digunakan untuk membangun halaman web yang menarik. Selain itu, kami akan menggunakan platform Lightning Studio untuk membuat dan menjalankan skrip LWC.

Memperkenalkan Ekstensi Lightning Studio

Lightning Studio membangun pengembangan Salesforce LWC dengan mudah dan tercepat. Di dalam editor ini, kita bisa langsung membuat saluran Apex/pesan dan skrip LWC. Selain itu, kami dapat langsung menerapkan komponen LWC (kustom) sekaligus. Mari kita lihat cara menambahkan ini ke situs web kami dan membukanya.

Buka situs web dan cari 'Lightning Studio - Tambahkan Chrome' (jika Anda menggunakan Chrome). Klik tombol 'Tambahkan ke Chrome'.









Kita dapat melihat bahwa itu ditambahkan ke Chrome. Sekarang, itu dinonaktifkan. Ini hanya akan aktif jika Salesforce Org dibuka.







Ini diaktifkan setelah masuk ke Salesforce Org.



Klik pada ekstensi.

Ke kiri dan pilih ikon ketiga yang digunakan untuk membuat komponen LWC baru.

  • Pertama, kita perlu menentukan nama komponen.
  • 'isExposed' digunakan untuk mengatur visibilitas komponen di Salesforce. Itu harus disetel ke true.
  • Penting untuk menentukan target di mana komponen akan ditempatkan. Beberapa target dapat dipilih.
  • Men-deploy komponen adalah langkah terakhir (klik 'Deploy').

Contoh 1: Menambahkan ke Halaman Rekam

Dalam skenario ini, kami membuat skrip LWC 'firstComponent' yang menampilkan teks 'Added to Record page' dan menambahkan komponen ini ke halaman 'Account Record'. Di file “firstComponent.js-meta.xml”, kita perlu menentukan target sebagai lightning__RecordPage.

Struktur Kode:

firstComponent.html

< templat >
< kartu kilat varian = 'Sempit' judul = 'Linux' >
< P >> Ditambahkan ke halaman Rekam P >
kartu kilat >
templat >

firstComponent.js

impor { Elemen Petir } dari 'keberuntungan' ;
ekspor kelas default FirstComponent memperluas LightningElement {
}

firstComponent.js-meta.xml

< ?xml Versi: kapan = '1.0' ? >
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< terekspos > BENAR terekspos >
< target >
< target > lightning__RecordPage target >
target >
LightningComponentBundle >

Menambahkan Komponen:

Buka Salesforce Org dan cari aplikasi 'Penjualan' di bawah Peluncur Aplikasi.

Buka catatan akun apa pun dengan menavigasi ke tab 'Akun'. Buka ikon roda gigi dan pilih 'Edit Halaman'.

Sekarang, ke kiri dan cari komponen Anda.

Seret komponen dan letakkan di bawah 'Panel Sorotan'.

Klik 'Aktifkan' dan tetapkan sebagai default Org. Terakhir, simpan halaman rekaman.

Selesai. Sekarang, kembali ke halaman aplikasi 'Penjualan' dan buka 'Catatan Akun' (catatan apa saja). Anda dapat melihat bahwa komponen khusus telah ditambahkan.

Contoh 2: Menambahkan ke Beranda

Mari gunakan 'Komponen pertama'. Ubah teks paragraf sebagai 'Ditambahkan ke halaman Beranda' di file HTML. Tentukan target sebagai “lightning__HomePage” di file “firstComponent.js-meta.xml”.

firstComponent.html


= 'Sempit' judul = 'Linux' >

< P > Ditambahkan ke halaman Beranda < / P >
< / kartu kilat>
< / templat>

firstComponent.js-meta.xml

Versi: kapan
= '1.0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57.0 < / apiVersion>
benar< / terekspos>

kilat__Beranda< / sasaran>
< / target>
< / LightningComponentBundle>

Menambahkan Komponen:

Buka aplikasi 'Penjualan' dan klik tab 'Beranda'.

Klik pada halaman edit yang tersedia di bawah ikon roda gigi. Cari komponen dan letakkan di atas komponen 'Kinerja'. Simpan halaman.

Segarkan tab 'Beranda Penjualan'.

Kita dapat melihat bahwa komponen kita ditambahkan ke halaman Beranda.

Contoh 3: Menambahkan ke Halaman Aplikasi

Mari gunakan 'Komponen pertama'. Ubah teks paragraf sebagai 'Ditambahkan ke halaman Aplikasi' di file HTML. Tentukan target sebagai “lightning__AppPage” di file “firstComponent.js-meta.xml”.

firstComponent.html

< templat >
< kartu kilat varian = 'Sempit' judul = 'Linux' >
< P > Ditambahkan ke halaman Aplikasi P >
kartu kilat >
templat >

firstComponent.js-meta.xml

Versi: kapan = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57.0 < / apiVersion>
BENAR < / terekspos>

lightning__AppPage < / sasaran>
< / target>
< / LightningComponentBundle>

Menambahkan Komponen:

Pertama, kita perlu membuat halaman Aplikasi di Salesforce menggunakan Pembuat Aplikasi Lightning. Cari “Lightning App Builder” di “Quick Find” dan klik “New” untuk membuat halaman lightning baru.

Pilih halaman Aplikasi dan pergi ke 'Berikutnya'.

Beri label sebagai 'Linuxhint App' dan pergi ke 'Next'.

Saat ini, kita hanya membutuhkan satu wilayah untuk menempatkan komponen. Jadi, pilih 'Satu Wilayah' dan klik 'Selesai'.

Sekarang, seret 'firstComponent' ke halaman dan simpan halaman tersebut.

Munculan akan muncul di mana halaman perlu diaktifkan. Klik 'Aktifkan'.

Setelah itu, Anda perlu menambahkan halaman ke aplikasi. Buka tab 'LIGHTNING EXPERIENCE' dan lakukan ini. Simpan aktivasi ini.

Sekarang, buka Peluncur Aplikasi dan cari 'Aplikasi Linuxhint'. Anda dapat melihat bahwa komponen kami ditambahkan ke halaman Aplikasi.

Kesimpulan

Sekarang, kami dapat memahami cara menambahkan LWC ke halaman Aplikasi, halaman Beranda, dan halaman Rekam. Dalam semua skenario, kami menggunakan contoh yang sama untuk mendapatkan ide yang lebih baik. Pastikan bahwa 'isExposed' benar. Jika tidak, komponen tersebut tidak akan terlihat di Salesforce Org. Di seluruh panduan ini, kami menggunakan editor Lightning Studio (Beta) untuk mengembangkan kode. Semua langkah dijelaskan tentang cara mengunduh dan menggunakan editor ini di awal panduan ini.