1. Sebelum memulai
Anda harus menyematkan konten Looker di dalam iframe dengan penyematan pribadi atau penyematan SSO. Dalam codelab ini, kita akan berinteraksi dengan iframe melalui JavaScript untuk membuat halaman web Anda lebih dinamis. Halaman web Anda akan mengirim pesan ke dan menerima pesan dari konten Looker yang disematkan iframe.
Prasyarat
- Memiliki instance Looker yang berjalan
- Memiliki dasbor Looker yang disematkan secara pribadi atau disematkan SSO di dalam iframe
- Memahami metode window.postMessage()
Yang akan Anda pelajari
- Cara menyiapkan iframe dan instance Looker untuk interaksi JavaScript
- Cara memproses peristiwa dari iframe
- Cara mengirim pesan tindakan ke iframe
Yang Anda butuhkan
- Akses ke HTML dan JavaScript kode frontend Anda yang mengelola iframe
- Akses ke setelan penyematan admin di instance Looker Anda
2. Persiapan
Anda perlu menyiapkan iframe dan instance Looker sebelum dapat berinteraksi dengan iframe.
Menambahkan atribut id
ke iframe
Anda perlu memvalidasi pesan yang berasal dari iframe. Untuk melakukannya, tentukan atribut id
di iframe:
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>
Tambahkan domain penyematan ke atribut src
iframe
Tentukan domain halaman web yang menghosting iframe. Misalnya, URL halaman web adalah https://mywebsite.com/with/embed
, maka domain halaman web tersebut adalah https://mywebsite.com
.
Jika Anda menggunakan Penyematan Pribadi, di src iframe, tambahkan domain sebagai parameter kueri embed_domain
:
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>
Jika Anda menggunakan Penyematan SSO, tambahkan domain sebagai parameter kueri embed_domain
ke URL sematan.
Menambahkan domain sematan di instance Looker yang diizinkan
Terakhir, Anda harus mengizinkan domain sematan di instance Looker untuk mengizinkan pengiriman pesan.
Buka halaman Sisipkan di bagian Admin instance Looker Anda. https://your_instance.looker.com/admin/embed
Di kolom Izin Domain Sematan, masukkan domain sematan. Setelah mengetiknya, tekan tombol Tab sehingga domain muncul di dalam kotak. Jangan sertakan garis miring /
.
Pilih tombol Update.
3. Memproses pesan peristiwa dari iframe
iframe Anda dengan konten Looker tersemat mengirimkan pesan ke halaman web host-nya. Pesan peristiwa ini berisi informasi tepat waktu tentang konten tampilan tersemat, seperti apakah dasbor tersemat mulai dimuat atau pengguna telah memilih opsi Download dalam konten yang disematkan. Mari kita terima dan mengurai peristiwa ini.
Memahami skema objek peristiwa
Skema objek peristiwa adalah:
{
type: "...",
eventSpecificProperty1: ...,
eventSpecificProperty2: ...,
...
}
Peristiwa akan selalu memiliki properti type
yang memungkinkan Anda menentukan peristiwa tersebut. Semua properti khusus peristiwa lainnya ditentukan dalam referensi peristiwa kami.
Menerima dan mengurai peristiwa
Tambahkan ini ke tempat JavaScript halaman web Anda melakukan inisialisasi atau mengelola iframe:
window.addEventListener("message", function(message) {
const iframeElement = document.getElementById("looker");
if (message.source === iframeElement.contentWindow) {
if (message.origin === "https://instance_name.looker.com") {
const event = JSON.parse(message.data);
switch (event.type):
case "dashboard:run:start":
console.log("The embedded dashboard has started loading");
}
}
});
Cuplikan kode melakukan hal berikut:
- Memproses peristiwa
"message"
dari objekwindow
. - Memeriksa bahwa properti
source
pesan adalah iframe dengan konten Looker yang disematkan. - Memeriksa apakah properti
origin
pesan adalah domain instance Looker Anda. - JSON mengurai properti
data
pesan untuk mengakses dan mengurai objek peristiwa. - Mengaktifkan properti
type
objek peristiwa untuk menentukan peristiwa apa dan menindaklanjutinya.
Sekarang halaman web host Anda dapat bereaksi secara dinamis terhadap peristiwa yang dihasilkan konten Looker tersemat.
4. Mengirim pesan tindakan ke iframe
Halaman host Anda juga dapat mengirim pesan ke konten Looker tersemat di iframe. Pesan tindakan ini dapat mengubah status konten Looker tersemat, seperti memperbarui filter di dasbor tersemat. Mari kita buat pesan tindakan yang memberi tahu dasbor tersemat untuk menjalankan kuerinya dan mengirim pesan ke iframe Anda.
Membuat pesan tindakan
Buat pesan tindakan di dalam JavaScript halaman Anda:
const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);
Objek action
mengikuti format yang sama dengan objek event
sebelumnya. Aplikasi tersebut akan selalu memiliki properti type
, lalu properti khusus tindakan yang ditentukan dalam referensi tindakan. Pesan tindakan harus diformat JSON.
Mengirim pesan tindakan
Di dalam JavaScript halaman web Anda, kirim tindakan berformat JSON ke iframe:
const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
- Tentukan iframe yang akan menerima tindakan.
- Panggil metode
postMessage()
pada properticontentWindow
iframe untuk mengirim pesan.
Sekarang, halaman web host Anda dapat secara dinamis mengubah status konten Looker yang disematkan.
5. Informasi tambahan
Selamat! Sekarang Anda dapat memproses peristiwa dari dan mengirim tindakan ke konten Looker tersemat di iframe. Lihat beberapa referensi berikut ini untuk informasi lebih lanjut:
- Referensi peristiwa untuk semua peristiwa yang tersedia dan propertinya
- Referensi tindakan untuk semua tindakan yang tersedia dan propertinya
- Praktik terbaik keamanan terkait penyematan konten Looker