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

1. Zanim zaczniesz

W tym samouczku użyjemy pakietu SDK Lookera do umieszczania, aby umieścić panel Lookera na stronie internetowej. Wywołasz serię metod pakietu SDK, które automatycznie utworzą element iframe, umieszczą w nim treści Lookera i skonfigurują komunikację między tym elementem a stroną internetową.

Wymagania wstępne

  • mieć uruchomioną instancję Lookera,
  • masz panel Looker, który chcesz umieścić w aplikacji internetowej lub na stronie internetowej;
  • znać język JavaScript i obietnice JavaScript;

Czego się nauczysz

  • Jak prywatnie umieścić treści Lookera za pomocą pakietu SDK do umieszczania
  • Jak wysyłać i odbierać wiadomości (działania i zdarzenia) za pomocą osadzonych treści Lookera przy użyciu pakietu Embed SDK

Czego potrzebujesz

  • dostęp do kodu HTML i JavaScript interfejsu,
  • Dostęp do ustawień osadzania administratora w instancji Lookera

2. Przygotowania

Zanim zaczniesz osadzać treści za pomocą pakietu Embed SDK, musisz przygotować kod HTML i instancję Lookera.

Dodaj element kontenera umieszczonego elementu iframe

W kodzie HTML strony internetowej utwórz element div i zdefiniuj w nim atrybut id.

<div id="looker-embed" />

Umieść domenę osadzenia na liście dozwolonych w instancji Lookera

Musisz dodać domenę osadzenia do listy dozwolonych w instancji Lookera.

Określ domenę strony internetowej, na której są umieszczone Twoje treści Lookera. Jeśli adres URL strony to https://mywebsite.com/with/embed, domena strony to https://mywebsite.com.

W sekcji Administracja instancji Lookera otwórz stronę Osadzanie. https://your_instance.looker.com/admin/embed

W polu Lista dozwolonych domen osadzania wpisz domenę osadzenia. Po wpisaniu naciśnij klawisz Tab, aby domena pojawiła się w polu. Nie dodawaj ukośnika na końcu /.

Kliknij przycisk Aktualizuj.

3. Tworzenie umieszczonej treści

Teraz utwórzmy i skonfigurujmy narzędzie do tworzenia umieszczonych treści z pakietu SDK, aby „tworzyć” umieszczone treści Lookera.

Zainicjuj pakiet 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')

Utwórz narzędzie do tworzenia elementów do umieszczenia

Następnie określ identyfikator panelu Looker, który chcesz osadzić. Jeśli Twój panel znajduje się pod adresem instance_name.looker.com/dashboard/12345, jego identyfikator to 12345.

Wywołaj metodę createDashboardWithId() pakietu SDK z identyfikatorem panelu, aby utworzyć narzędzie do tworzenia elementów do umieszczenia. Ta metoda zwróci kreator osadzania.

LookerEmbedSDK.createDashboardWithId(12345)

Konfigurowanie i kompilowanie narzędzia do tworzenia elementów do umieszczenia

Teraz skonfigurujmy narzędzie do tworzenia umieszczonych elementów, zanim zlecimy mu utworzenie umieszczonego elementu iframe. Dodaj poniższy przykładowy kod bezpośrednio po wywołaniu metody createDashboardWithId() w poprzednim przykładowym kodzie.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Każda metoda narzędzia do tworzenia elementów do umieszczenia zwraca samo narzędzie, więc łączymy wywołania metod. Przyjrzyjmy się każdej z tych metod:

  1. Metoda appendTo() określa element nadrzędny elementu iframe. Przekazujemy identyfikator elementu HTML zdefiniowanego wcześniej w kroku przygotowawczym.
  2. Metoda withFrameBorder() ustawia atrybut frame-border w elemencie iframe. Jest to jedna z kilku metod definiowania atrybutów HTML w elemencie iframe.
  3. Metoda build() tworzy element iframe ze skonfigurowanymi atrybutami HTML.

Ostatnia weryfikacja

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 internetowej za pomocą pakietu Embed SDK.

4. Wysyłanie i odbieranie wiadomości z elementami do osadzenia

Zobaczmy teraz, jak wysyłać i odbierać wiadomości za pomocą osadzonych treści Lookera za pomocą pakietu Embed SDK. Wiadomości wysyłane przez aplikację do elementu iframe nazywamy działaniami, a wiadomości odbierane przez aplikację z elementu iframe nazywamy zdarzeniami.

Otrzymywanie zdarzeń

Użyjmy poprzedniego kodu. Aby nasłuchiwać zdarzeń, wywołujemy metodę on() narzędzia do tworzenia elementów do umieszczenia przed wywołaniem metody build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Wywołujemy tutaj metodę on(), aby ustawić detektor zdarzeń dla zdarzenia dashboard:run:complete pochodzącego z elementu iframe, gdy ten element jest tworzony. Wydarzenie poinformuje nas, kiedy panel się wczyta. W dokumentacji zdarzeń znajdziesz informacje o innych zdarzeniach, których możesz nasłuchiwać.

Wysyłanie działań

Kontynuujmy z naszym poprzednim kodem. Aby wysyłać działania do elementu iframe, po wywołaniu metody build() w celu zainicjowania wysyłania i odbierania wiadomości w elemencie iframe wywołujemy metodę connect() narzędzia do tworzenia umieszczonych elementów.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Przyjrzyjmy się temu przykładowi kodu:

  1. Wywołujemy metodę connect(), która zwraca obietnicę. Po zainicjowaniu mechanizmu wysyłania i odbierania wiadomości obietnica zostanie rozwiązana w postaci obiektu osadzenia reprezentującego osadzony element iframe.
  2. Wywołujemy metodę send() w obiekcie osadzania, aby wysłać działanie dashboard:run. Więcej działań, które możesz wysyłać, znajdziesz w dokumentacji działań.
  3. Dodajemy metodę catch() na wypadek błędów podczas inicjalizacji.

Ostatnia weryfikacja

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')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Możesz teraz komunikować się z osadzonym panelem Looker.

5. Dodatkowe informacje

Gratulacje! Teraz możesz używać pakietu SDK do umieszczania, aby prywatnie umieszczać panel Lookera oraz wysyłać i odbierać wiadomości z elementu iframe. Więcej informacji znajdziesz w tych materiałach: