NavigationMixin harus diimpor dari Lightning/navigasi di file “javascript”. Navigasi adalah metode yang tersedia dalam modul ini. Dibutuhkan tipe dan atribut. Tipenya menentukan tipe halaman yang kita navigasikan dan atributnya menggunakan nama halaman.
- Dari Pengaturan, cari “Lightning App Builder” dan klik “Baru”.
- Pilih 'Halaman Aplikasi' dan klik 'Berikutnya'.
- Beri label sebagai “Layanan Navigasi”.
- Pilih satu wilayah dan klik “Selesai”.
Aplikasi Anda siap digunakan. Cari di bawah 'Peluncur Aplikasi'.
Untuk semua contoh Layanan Navigasi yang akan dibahas dalam panduan ini, kami menggunakan file “meta-xml” yang sama. Anda dapat menempatkan komponen di halaman Aplikasi yang Anda buat sekarang. Kami tidak akan menentukan file ini (meta-xml) lagi di bawah cuplikan kode contoh.
'1.0' ?>
Menavigasi ke Halaman Beranda
Jika Anda ingin menavigasi ke laman Beranda standar Salesforce, lihat contoh berikut:
Navigasi.html
Kami membuat tombol. Klik pada 'homeNavigation' ini akan ditangani di file 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda akan diarahkan ke Halaman Beranda < / B < saudara < / div >
< / kartu petir>
< / templat>
Navigasi.js
Jenisnya harus “standard__namedPage” dan pageName harus “home”. Ini ditentukan di dalam metode penangan homeNavigation().
impor { Elemen Petir } dari 'keberuntungan' ;
impor { NavigasiMixin } dari 'petir/navigasi'
ekspor bawaan kelas Navigasi meluas NavigasiMixin ( Elemen Petir ) {
// metode penangan
// pageName seharusnya berada di rumah
// jenis halamannya adalah standard__namedPage untuk beranda
BerandaNavigasi ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__bernamaHalaman' ,
atribut : {
nama halaman : 'rumah'
}
} )
}
}
Keluaran:
Tambahkan komponen ini ke halaman Aplikasi dan klik tombol “Buka halaman Beranda”.
Sekarang, Anda berada di halaman Beranda.
Menavigasi ke Obrolan
Anda dapat berbagi file, pesan teks, dan detail log menggunakan Salesforce Chatter. Dimungkinkan untuk menavigasi ke Obrolan secara langsung menggunakan Layanan Navigasi.
Navigasi.html
Kami membuat tombol. Klik pada 'chatterNavigation' ini akan ditangani di file 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda akan diarahkan ke Obrolan < / B < saudara < / div >
< / kartu petir>
< / templat>
Navigasi.js
Jenisnya harus “standard__namedPage” dan nama halamannya harus “chatter”. Ini ditentukan di dalam metode pengendali chatterNavigation(). Tempel cuplikan berikut di dalam kelas “js”.
// metode penangan// pageName seharusnya berupa obrolan
// tipe halamannya adalah standard__namedPage untuk obrolan
obrolanNavigasi ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__bernamaHalaman' ,
atribut : {
nama halaman : 'obrolan'
}
} )
}
Keluaran:
Segarkan halaman. Sekarang, Anda dapat memposting pembaruan dan berbagi file di Chatter dengan menavigasi ke sana.
Menavigasi ke Rekor Baru
Tanpa membuka tab objek tertentu untuk membuat rekaman baru, Anda bisa langsung membuat rekaman baru untuk objek tertentu menggunakan Layanan Navigasi. Dalam skenario ini, kita perlu menentukan objectApiName dan actionName sebagai atribut.
- ObjectApiName adalah nama API objek Salesforce seperti “Akun”, “Kontak”, “Kasus”, dll.
- Kami membuat rekor baru. Jadi, actionName harus 'baru'.
Navigasi.html
Mari buat catatan Kasus. Kami membuat tombol. Klik pada 'newRecordNavigation' ini akan ditangani di file 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda dapat membuat Kasus dari sini... < / B < saudara < / div >
< / kartu petir>
< / templat>
Navigasi.js
Jenisnya harus “standard__objectPage”. Ini ditentukan di dalam metode handler newRecordNavigation(). Tempel cuplikan berikut di dalam kelas “js”.
// metode penangan// Kasus adalah objekApiName dan actionName adalah Baru.
// tipe halamannya adalah standard__objectPage
Navigasi Rekaman baru ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__halaman objek' ,
atribut : {
objekApiName : 'Kasus' ,
Nama tindakan : 'baru'
}
} )
}
Keluaran:
Segarkan halaman. Sekarang, Anda dapat membuat catatan terkait Kasus tersebut.
Jika Anda menyimpannya, Anda akan menavigasi ke halaman rekamannya.
Menavigasi ke Halaman Catatan
Mirip dengan navigasi sebelumnya (Contoh 3), kita dapat membuka rekaman tertentu dan melihat atau mengedit detailnya. Satu lagi properti yang perlu Anda teruskan dalam atributnya adalah “recordId” (Id dari record yang ada). ActionName harus berupa 'view' dalam skenario ini.
Navigasi.html
Mari navigasikan ke catatan Kasus. Kami membuat tombol. Klik pada 'viewRecordNavigation' ini akan ditangani di file 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda dapat melihat catatan Kasus dari sini... < / B < saudara < / div >
< / kartu petir>
< / templat>
Navigasi.js
Jenisnya harus “standard__recordPage”. Ini ditentukan di dalam metode penangan viewRecordNavigation(). Tempel cuplikan berikut di dalam kelas “js”.
// metode penangan// Case adalah objekApiName dan actionName adalah tampilan.
// tipe halamannya adalah standard__recordPage
viewRecordNavigation ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__Halaman Catatan' ,
atribut : {
catatanId : '5002t00000PRrXkAAL' ,
objekApiName : 'Kasus' ,
Nama tindakan : 'melihat'
}
} )
}
Keluaran:
Anda dapat melihat detail kasus setelah navigasi. Di sini, Anda dapat melihat dan mengedit detail kasus.
Navigasi Lainnya
Mari navigasikan ke tampilan Daftar dan file. Untuk tampilan Daftar, Anda memerlukan nama objek dan Nama filter. Anda akan menemukannya di URL. Kami akan menguraikannya dalam contoh.
File-file tersebut disimpan dalam objek ContentDocument. Jadi, untuk file, objectApiName akan menjadi “ContentDocument” dan actionName adalah “home”.
Tampilan Daftar:
File:
Navigasi.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda dapat menavigasi ke Tampilan Daftar < / B < saudara < / div >
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< B > Anda dapat menavigasi ke File < / B < saudara < / div >
< / kartu petir>
< / templat>
Navigasi.js
// Pengendali tampilan daftarviewListNavigation ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__halaman objek' ,
atribut : {
objekApiName : 'Kasus' ,
Nama tindakan : 'daftar' ,
negara : {
nama filter : '00B2t000002oWELEA2'
}
}
} )
}
// Pengendali tampilan file
viewFileNavigation ( ) {
ini [ NavigasiMixin. Navigasi ] ( {
jenis : 'standar__halaman objek' ,
atribut : {
objekApiName : 'Dokumen Konten' ,
Nama tindakan : 'rumah'
}
} )
}
Keluaran:
Anda akan menavigasi ke tampilan daftar Kasus Anda. FilterName yang kami tentukan adalah “Semua Kasus Tertutup”.
Anda dapat melihat file Anda dari halaman Aplikasi ini dengan mengklik tombol “Buka File”.
Kesimpulan
LWC Salesforce menyediakan navigasi langsung yang dapat Anda gunakan untuk tetap berada di halaman tertentu. Dalam panduan ini, kita mempelajari berbagai navigasi menggunakan Layanan Navigasi Komponen Web Lightning. Masih banyak navigasi lain yang ada namun kita membahas navigasi penting yang harus diketahui semua Pengembang LWC. Di semua navigasi, NavigationMixin harus diimpor dari Lightning/navigasi.