1. Zanim zaczniesz
W tym ćwiczeniu użyjemy pakietu SDK do umieszczania danych Lookera, aby umieścić na stronie internetowej panel Lookera. Wywołujesz szereg metod pakietu SDK, które automatycznie tworzą element iframe, umieszczają w nim Twoje treści z Lookera i konfigurują komunikację między elementem iframe a stroną internetową.
Wymagania wstępne
- Uruchom instancję Lookera.
- mieć panel Lookera, który chcesz umieścić w swojej aplikacji internetowej lub na stronie internetowej.
- Musisz znać JavaScript i obietnice JavaScript.
Czego się nauczysz
- Jak prywatnie umieszczać treści z Lookera za pomocą pakietu SDK Embed
- Jak wysyłać i odbierać wiadomości (działania i zdarzenia) za pomocą umieszczonych treści z Lookera za pomocą pakietu SDK Embed
Czego potrzebujesz
- dostęp do kodu HTML i JavaScript po stronie klienta,
- dostęp do ustawień wstawiania administracyjnych w instancji Lookera.
2. Przygotowania
Zanim użyjesz pakietu SDK do umieszczania, musisz przygotować kod HTML i instancję Lookera.
Dodawanie elementu kontenera iframe umieszczonego elementu
W kodzie HTML strony utwórz element div
i zdefiniuj atrybut id
.
<div id="looker-embed" />
Umieszczanie domeny w domenie dozwolonej w instancji Lookera
Musisz dodać domenę, w której znajduje się kod embedowania, do listy dozwolonych w swojej instancji Lookera.
Określ domenę strony internetowej, na której znajdują się umieszczone treści z Lookera. Jeśli adres URL strony internetowej to https://mywebsite.com/with/embed
, to domena tej strony to https://mywebsite.com
.
W sekcji Administracja instancji Lookera otwórz stronę Embed (Umieść). https://your_instance.looker.com/admin/embed
W polu Embedded Domain Allowlist (Lista dozwolonych domen dla treści embedowanych) wpisz domenę treści embedowanych. Po wpisaniu adresu naciśnij klawisz Tab, aby dodać domenę w polu. Nie dodawaj ukośnika na końcu. /
Kliknij przycisk Aktualizuj.
3. Tworzenie elementów do umieszczenia
Utwórz i skonfiguruj kreator umieszczania pakietu SDK, aby „umieścić” treści Lookera.
Inicjowanie pakietu SDK
Najpierw zaimportuj pakiet SDK, a potem zainicjuj go za pomocą domeny instancji Lookera.
// Import the Embed SDK as LookerEmbedSDK
LookerEmbedSDK.init('instance_name.looker.com')
Tworzenie kreatora umieszczania
Następnie określ identyfikator panelu Lookera, który chcesz umieścić. Jeśli panel ma wartość instance_name.looker.com/dashboard/12345
, jego identyfikator to 12345
.
Aby utworzyć kreatora umieszczania, wywołaj metodę pakietu SDK createDashboardWithId()
, podając identyfikator panelu. Ta metoda zwróci kreatora osadzenia.
LookerEmbedSDK.createDashboardWithId(12345)
Konfigurowanie i tworzenie kreatora umieszczania
Teraz skonfigurujmy kreator umieszczania, zanim go poproś o utworzenie wklejonego iframe. Dodaj poniższy przykładowy kod bezpośrednio po wywołaniu metody createDashboardWithId()
z poprzedniego przykładowego kodu.
.appendTo(‘looker-embed')
.withFrameBorder(‘0')
.build()
Każda metoda konstruktora do umieszczania na stronie zwraca ten konstruktor, więc wywołania każdej metody łączą się w łańcuch. Omówmy każdą z nich:
- Metoda
appendTo()
określa element nadrzędny iframe. Przekazujemy identyfikator elementu HTML zdefiniowanego wcześniej na etapie przygotowań. - Metoda
withFrameBorder()
ustawia atrybut frame-border w ramce iframe. Jest to jedna z kilku metod definiowania atrybutów HTML w ramce iframe. - Metoda
build()
tworzy element iframe z skonfigurowanymi atrybutami HTML.
Ostatnia kontrola
Po wykonaniu poprzednich kroków kod powinien wyglądać tak:
// Import the Embed SDK as LookerEmbedSDK
LookerEmbedSDK.init('instance_name.looker.com')
LookerEmbedSDK.createDashboardWithId(12345)
.appendTo(‘looker-embed')
.withFrameBorder(‘0')
.build()
Panel Lookera jest teraz umieszczony na Twojej stronie za pomocą pakietu SDK do umieszczenia.
4. Wysyłanie i odbieranie wiadomości z poziomu aplikacji
Teraz przyjrzyjmy się temu, jak wysyłać i odbierać wiadomości z osadzonym kodem SDK Lookera. Wiadomości wysyłane przez Twoją aplikację do elementu iframe nazywamy działaniami, a wiadomości otrzymywane przez Twoją aplikację z elementu iframe – zdarzeniami.
Otrzymywanie zdarzeń
Popatrzmy na nasz poprzedni kod. Aby nasłuchiwać zdarzeń, przed wywołaniem metody build()
wywołujemy metodę on() w budującym się elementu.
...
.on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...
Tutaj wywołujemy metodę on()
, aby ustawić detektor zdarzeń dashboard:run:complete
pochodzącego z iFrame, gdy zostanie on utworzony. Zdarzenie to poinformuje nas, gdy wczytywanie panelu się zakończy. Inne zdarzenia do nasłuchiwania znajdziesz w dokumentacji zdarzeń.
Wysyłanie działań
Wróćmy do poprzedniego kodu. Aby wysłać działania do elementu iframe, po wywołaniu metody build()
w kreatorze umieszczania wywołujemy metodę connect()
w celu zainicjowania wysyłania i odbierania wiadomości za pomocą elementu iframe.
...
.connect()
.then((embed) => {
embed.send(‘dashboard:run');
})
.catch(console.error(‘Something errored!')
...
Przyjrzyjmy się temu przykładowemu kodowi:
- Wywołujemy metodę
connect()
, która zwraca obietnicę. Po zainicjowaniu mechanizmu wysyłania i odbierania wiadomości, obietnica zwraca się do umieszczonego obiektu, który reprezentuje ten element iframe. - Aby wysłać działanie
dashboard:run
, wywołujemy metodęsend()
obiektu embed. Aby poznać inne dostępne działania, zapoznaj się z przewodnikiem po działaniach. - Dodajemy metodę
catch()
na wypadek wystąpienia błędów podczas inicjowania.
Ostatnie sprawdzenie
W poprzednich krokach Twój kod powinien wyglądać teraz tak:
// Import the Embed SDK as LookerEmbedSDK
LookerEmbedSDK.init('instance_name.looker.com')
LookerEmbedSDK.createDashboardWithId(12345)
.appendTo(‘looker-embed')
.withFrameBorder(‘0')
.on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
.build()
.connect()
.then((embed) => {
embed.send(‘dashboard:run');
})
.catch(console.error(‘Something errored!')
Teraz możesz komunikować się z wbudowanym panelem Looker.
5. Dodatkowe informacje
Gratulacje! Za pomocą pakietu SDK Embed SDK możesz teraz prywatnie umieścić swój panel Lookera i wysyłać i odbierać wiadomości za pomocą elementu iframe. Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami:
- Repozytorium pakietu SDK do umieszczania treści, aby dowiedzieć się więcej o umieszczaniu Lookera, zwłaszcza jeśli chcesz umieścić treści Lookera za pomocą logowania jednokrotnego.
- Informacje o zdarzeniach dotyczące wszystkich dostępnych zdarzeń i ich właściwości
- Informacje o czynnościach – wszystkie dostępne działania i ich właściwości
- Sprawdzone metody dotyczące bezpieczeństwa dotyczące umieszczania treści z Looker