Как встроить Looker с помощью Embed SDK

1. Прежде чем начать

В этой лаборатории кода мы будем использовать Looker Embed SDK для встраивания панели мониторинга Looker на вашу веб-страницу. Вы вызовете серию методов SDK, которые автоматически создадут iframe, встроят в него контент Looker и настроят связь между вашим iframe и вашей веб-страницей.

Предварительные условия

  • Иметь работающий экземпляр Looker
  • У вас есть панель мониторинга Looker, которую вы хотите встроить в свое веб-приложение или веб-страницу.
  • Ознакомьтесь с JavaScript и обещаниями JavaScript.

Что вы узнаете

  • Как конфиденциально встроить контент Looker с помощью Embed SDK
  • Как отправлять и получать сообщения ( действия и события ) со встроенным контентом Looker с помощью Embed SDK

Что вам понадобится

  • Доступ к HTML и JavaScript вашего внешнего кода.
  • Доступ к административным настройкам встраивания в ваш экземпляр Looker

2. Подготовка

Вам необходимо подготовить экземпляр HTML и Looker, прежде чем его можно будет встроить с помощью Embed SDK.

Добавьте элемент контейнера встроенного iframe

Внутри HTML-кода вашей веб-страницы создайте элемент div и определите для него атрибут id .

<div id="looker-embed" />

Внесите в список разрешенных домен для внедрения в экземпляре Looker.

Вам необходимо внести в белый список домен для встраивания в вашем экземпляре Looker.

Определите домен веб-страницы, на которой размещен встроенный контент Looker. Допустим, URL-адрес веб-страницы — https://mywebsite.com/with/embed тогда домен веб-страницы — https://mywebsite.com .

Перейдите на страницу «Встроить» в разделе «Администратор » вашего экземпляра Looker. https://your_instance.looker.com/admin/embed

В поле «Разрешенный список встроенных доменов» введите домен встроенного домена. После ввода нажмите клавишу Tab , чтобы домен появился в поле. Не включайте косую черту / .

Нажмите кнопку «Обновить» .

3. Создайте вставку

Теперь давайте создадим и настроим конструктор встраивания SDK для «создания» встроенного контента Looker.

Инициализируйте SDK

Сначала импортируйте, а затем инициализируйте SDK с доменом вашего экземпляра Looker.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Создайте конструктор встраивания

Затем определите идентификатор информационной панели Looker, которую вы хотите встроить. Если ваша панель мониторинга находится по адресу instance_name.looker.com/dashboard/12345 , то идентификатор вашей панели мониторинга — 12345 .

Вызовите метод SDK createDashboardWithId() с идентификатором информационной панели, чтобы создать конструктор встраивания. Этот метод вернет конструктор встраивания.

LookerEmbedSDK.createDashboardWithId(12345)

Настройте и создайте конструктор встраивания

Теперь давайте настроим построитель встраивания, прежде чем мы сообщим ему о необходимости создания встроенного iframe. Добавьте следующий пример кода непосредственно после вызова метода createDashboardWithId() из предыдущего примера кода.

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

Каждый метод построителя встраивания возвращает сам построитель встраивания, поэтому мы связываем вызовы метода вместе. Давайте пройдемся по каждому методу:

  1. Метод appendTo() определяет родительский элемент iframe. Мы передаем идентификатор элемента HTML, который мы определили ранее на этапе подготовки.
  2. Метод withFrameBorder() устанавливает атрибут border-border в iframe. Это один из нескольких методов, которые определяют атрибуты HTML в iframe.
  3. Метод build() создает iframe с настроенными атрибутами HTML.

Окончательная проверка

После предыдущих шагов ваш код должен выглядеть так:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

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

Теперь ваша панель управления Looker встроена в вашу веб-страницу с помощью Embed SDK!

4. Отправляйте и получайте сообщения для встраивания

Теперь давайте посмотрим, как отправлять и получать сообщения со встроенным контентом Looker с помощью Embed SDK. Мы называем сообщения, которые ваше приложение отправляет в iframe, действиями , а сообщения, которые ваше приложение получает из iframe, — событиями .

Получать события

Давайте поработаем с нашим предыдущим кодом. Чтобы прослушивать события, мы вызываем метод on() встроенного компоновщика перед вызовом метода build() .

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

Здесь мы вызываем метод on() , чтобы установить прослушиватель событий на dashboard:run:complete поступающее из iframe при построении iframe. Событие сообщит нам, когда панель мониторинга завершит загрузку. Проверьте ссылку на событие, чтобы узнать о других событиях, которые можно прослушать.

Отправить действия

Давайте продолжим наш предыдущий код. Чтобы отправить действия в iframe, мы вызываем метод connect() компоновщика встраивания после вызова метода build() для инициализации отправки и получения сообщений с помощью iframe.

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

Давайте рассмотрим этот пример кода:

  1. Мы вызываем метод connect() , который возвращает обещание. Промис разрешается во встроенный объект, представляющий встроенный iframe, после инициализации механизма отправки и получения сообщений.
  2. Мы вызываем метод send() объекта внедрения, чтобы отправить действие dashboard:run . Ознакомьтесь со справочником действий , чтобы узнать о других действиях для отправки.
  3. Мы добавляем метод catch() на случай, если при инициализации возникнут ошибки.

Окончательная проверка

После предыдущих шагов ваш код теперь должен выглядеть так:

// 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!')

Теперь вы можете общаться со встроенной панелью управления Looker!

5. Дополнительная информация

Поздравляем! Теперь вы можете использовать Embed SDK для частного встраивания панели управления Looker и отправки и получения сообщений из iframe. Посетите эти ресурсы для получения дополнительной информации: