Jak umieścić Lookera za pomocą pakietu SDK Embed

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:

  1. Metoda appendTo() określa element nadrzędny iframe. Przekazujemy identyfikator elementu HTML zdefiniowanego wcześniej na etapie przygotowań.
  2. Metoda withFrameBorder() ustawia atrybut frame-border w ramce iframe. Jest to jedna z kilku metod definiowania atrybutów HTML w ramce iframe.
  3. 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:

  1. 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.
  2. 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.
  3. 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: