임베딩된 JavaScript 이벤트

임베드를 만든 후에는(서명된 임베딩 또는API를 통해 공개 또는 비공개로 생성 가능) JavaScript를 사용하여 이러한 iframe과 상호작용할 수 있습니다. 삽입된 항목의 상태를 기반으로 페이지를 동적으로 만들 수 있으며, 웹페이지에서 삽입된 항목을 변경할 수도 있습니다.

Looker는 브라우저가 웹 애플리케이션에 이벤트를 전달하는 순서를 제어하지 않습니다. 즉, 브라우저 또는 플랫폼 전체에 걸쳐 이벤트 순서가 보장되지 않습니다. 여러 브라우저의 이벤트 처리를 고려하여 JavaScript를 적절히 작성해야 합니다.

다음 방법 중 하나로 Looker 삽입된 콘텐츠에 자바스크립트를 사용할 수 있습니다.

준비

삽입된 iframe과 상호작용하려면 먼저 다음 단계를 따르세요.

iframe에 ID 추가

나중에 iframe에서 데이터를 검색할 때 작업 중인 정보의 실제 출처가 Looker의 iframe인지 확인해야 합니다. 이를 위해 아직 ID를 추가하지 않은 경우 iframe에 ID를 추가해야 합니다. 다음 예시에서는 iframe에 id="looker"를 추가하여 ID를 looker로 설정합니다.

<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>

iframe src 속성에 임베드 도메인 추가

iframe의 src 속성에 iframe이 사용 중인 도메인을 포함합니다. 다음 예시에서는 src 속성의 URL 끝에 ?embed_domain=https://myownpersonaldomain.com"을 추가하여 myownpersonaldomain.com을 도메인으로 지정할 수 있습니다.

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com">
</iframe>

서명된 임베딩을 사용하는 경우 임베드 URLembed_domain을 추가해야 합니다.

Embed SDK를 사용하는 경우 삽입 URL의 끝에 sdk=2를 추가합니다. sdk=2 매개변수는 SDK가 있으며 Looker iframe과 도메인 간에 JavaScript 이벤트를 전달하는 등 Looker에서 SDK가 제공하는 추가 기능을 활용할 수 있음을 나타냅니다. SDK는 서명된 URL의 일부이므로 이 매개변수 자체를 추가할 수 없습니다. 예를 들면 다음과 같습니다.

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

허용 목록에 임베드 도메인 추가

마지막으로, 다음 단계를 따라 Looker 관리 패널의 임베드 페이지에 있는 허용 목록에 iframe이 사용되는 도메인을 추가해야 합니다.

  1. 삽입된 도메인 허용 목록 입력란에 iframe이 사용되는 도메인을 입력한 다음, Tab 키를 눌러 도메인이 필드 내의 상자에 표시되도록 합니다.

  2. 업데이트를 클릭합니다.

허용 목록에서 * 와일드 카드를 사용하여 도메인 패턴을 만들 수 있습니다. 예를 들어 https://*.myownpersonaldomain.comhttps://analytics.myownpersonaldomain.comhttps://data.myownpersonaldomain.com을 모두 허용합니다.

Looker 23.8 이상에서 쿠키 없는 임베딩을 사용하는 경우 쿠키가 없는 세션을 가져올 때 임베드 도메인을 지정할 수 있습니다. 관리 > 삽입 패널을 사용하여 삽입 도메인을 허용 목록에 추가하는 방법 대안입니다. 이 기능을 사용하려면 보안 권장사항을 검토하세요.

iframe에서 데이터 가져오기

준비 단계를 완료하면 postMessage 이벤트를 수신 대기하여 Looker iframe과 도메인 간에 전달된 이벤트에 액세스할 수 있습니다.

임베딩된 iframe은 이 페이지의 이벤트 유형 참조 섹션에 설명된 것처럼 몇 가지 이벤트 유형을 만들 수 있습니다.

JavaScript에서 이벤트 액세스

다음은 네이티브 JavaScript에서 이러한 이벤트를 수신 대기한 후 콘솔에 로깅하는 예시입니다.

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

다음은 jQuery에서 이러한 이벤트를 수신 대기한 후 콘솔에 로깅하는 예시입니다.

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

이벤트 유형 요약 표

다음 표에는 이벤트 유형이 요약되어 있습니다. 이벤트 유형을 선택하여 해당 이벤트에 대한 세부정보를 확인합니다.

이벤트 유형 이벤트 원인
dashboard:loaded 타일이 자동 실행되도록 설정되지 않은 대시보드에서 대시보드와 해당 요소가 로드되었지만 쿼리가 아직 실행되지 않고 있습니다.
dashboard:run:start 대시보드가 로드되기 시작하고 타일이 데이터를 로드하고 퀴리하기 시작했습니다.
dashboard:run:complete 대시보드 실행이 완료되고 모든 타일이 로드 및 쿼리를 완료했습니다.
dashboard:download 대시보드 PDF의 다운로드가 시작되었습니다.
dashboard:edit:start 22.20 추가 대시보드가 수정 모드로 전환되었습니다. 대시보드가 성공적으로 저장되면 dashboard:save:complete 이벤트가 실행됩니다.
dashboard:edit:cancel 22.20 추가 수정 모드의 대시보드가 저장 없이 수정 모드를 종료했습니다.
dashboard:save:complete 대시보드가 수정되고 저장되었습니다.
dashboard:delete:complete 대시보드가 삭제되었습니다.
dashboard:tile:start 타일에서 데이터 로드 또는 쿼리가 시작되었습니다.
dashboard:tile:complete 타일에서 쿼리 실행이 완료되었습니다.
dashboard:tile:download 타일의 데이터가 다운로드되기 시작했습니다.
dashboard:tile:explore 사용자가 대시보드 타일에서 여기에서 탐색 옵션을 클릭했습니다.
dashboard:tile:view 사용자가 대시보드 타일에서 원본 보기 옵션을 클릭했습니다.
dashboard:filters:changed 대시보드의 필터가 적용되었거나 변경되었습니다.
look:ready 쿼리 실행 여부에 관계없이 Look에서 쿼리 데이터가 로드되기 시작했습니다.
look:run:start Look에서 쿼리 데이터를 로드하기 시작했으며 쿼리가 실행되기 시작했습니다.
look:run:complete Look의 쿼리 실행이 완료되었습니다.
look:save:complete Look이 수정 및 저장되었습니다.
look:delete:complete Look이 휴지통 폴더로 이동되었습니다.
drillmenu:click 사용자가 link LookML 매개변수로 생성된 대시보드에서 드릴 메뉴를 클릭했습니다.
drillmodal:download 사용자가 대시보드 타일에서 드릴 대화상자를 열고 다운로드 옵션을 클릭했습니다.
drillmodal:explore 사용자가 드릴 대화상자에서 여기에서 탐색 옵션을 클릭했습니다.
explore:ready 쿼리 실행 여부에 관계없이 탐색에서 쿼리 데이터가 로드되기 시작했습니다.
explore:run:start 탐색에서 쿼리 데이터가 로드되기 시작했으며 쿼리가 실행되기 시작했습니다.
explore:run:complete 탐색이 쿼리 실행을 완료했습니다.
explore:state:changed 사용자의 작업으로 인해 탐색 페이지 URL이 변경되었습니다.
page:changed 사용자가 iframe 내에서 새 페이지로 이동했습니다.
page:properties:changed 대시보드 iframe의 높이가 변경되었습니다.
session:tokens 계속하려면 Looker 클라이언트에 토큰이 필요합니다.
session:status 세션 상태에 대한 정보를 전송합니다.
env:client:dialog 드릴 대화상자처럼 부분적으로 보이지 않을 수 있는 대화상자가 열렸습니다. 이 이벤트를 통해 호스팅 애플리케이션이 대화상자를 스크롤하여 열람할 수 있습니다.

이벤트 유형 참조

임베딩된 iframe에서는 다양한 유형의 이벤트를 만들 수 있습니다.

dashboard:loaded

타일이 자동 실행되도록 설정되지 않은 대시보드에서는 이 이벤트는 대시보드와 그 요소가 로드된 후 쿼리가 실행되기 전에 생성됩니다.


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
속성 형식 설명
status 문자열 대시보드와 그 요소가 성공적으로 로드되었는지 여부
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.options 객체 대시보드 레이아웃, 대시보드 레이아웃 구성요소, 대시보드 요소 속성 및 값. options 객체에서 반환되는 모든 속성에 dashboard:options:set 이벤트를 사용하여 업데이트된 값을 지정할 수 있습니다.

dashboard:run:start

이 이벤트는 대시보드 로드가 시작될 때, 타일이 데이터를 로드하고 쿼리를 시작할 때 생성됩니다.

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

이 이벤트는 대시보드 실행이 완료되고 모든 타일이 로드 및 쿼리를 완료하면 생성됩니다. 이 이벤트는 모든 타일이 성공적으로 로드되는지 여부에 관계없이 생성됩니다.

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
속성 형식 설명
status 문자열 대시보드와 그 요소가 성공적으로 실행되었는지 여부를 나타냅니다. 대시보드 및 그 요소가 성공적으로 실행되면 status"complete"를 반환하고, 그렇지 않으면 status"error"를 반환합니다. 실행 중인 대시보드가 사용자 인터페이스에서 또는 dashboard:stop 작업으로 중지된 경우 status"stopped"를 반환합니다.
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options 객체 대시보드 레이아웃, 대시보드 레이아웃 구성요소, 대시보드 요소 속성 및 값. options 객체에서 반환되는 모든 속성에 dashboard:options:set 작업을 사용하여 업데이트된 값을 지정할 수 있습니다.
dashboard.tileStatuses 객체 배열 타일 상태를 제공하는 객체의 배열. 객체 속성은 다음과 같습니다.

  • tileId - 타일의 ID 번호입니다.
  • status - 타일 쿼리가 성공적으로 실행되면 status"complete"를 반환하고, 그렇지 않으면 status"error"를 반환합니다.
  • errors - status 속성이 "error"인 경우 채워집니다. 오류 메시지 텍스트, 오류에 대한 자세한 설명, 오류를 생성한 타일의 SQL 쿼리를 비롯하여 오류 세부정보를 제공하는 객체 배열입니다.

dashboard:download

이 이벤트는 대시보드의 PDF가 다운로드되기 시작할 때 생성됩니다.

type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat 문자열 다운로드한 대시보드의 형식(현재 "pdf"만 해당)

dashboard:edit:start

22.20 추가됨 이 이벤트는 대시보드가 수정 모드로 전환될 때 생성됩니다.

type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:edit:cancel

22.20 추가 이 이벤트는 수정 모드인 대시보드가 저장되지 않고 수정 모드에서 종료될 때 생성됩니다.

type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:save:complete

이 이벤트는 대시보드를 수정한 후 저장할 때 생성됩니다.

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.options 객체 대시보드 레이아웃, 대시보드 레이아웃 구성요소, 대시보드 요소 속성 및 값. options 객체에서 반환되는 모든 속성에 dashboard:options:set 이벤트를 사용하여 업데이트된 값을 지정할 수 있습니다.

dashboard:delete:complete

이 이벤트는 대시보드가 삭제될 때 생성됩니다.

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.options 객체 대시보드 레이아웃, 대시보드 레이아웃 구성요소, 대시보드 요소 속성 및 값. options 객체에서 반환되는 모든 속성에 dashboard:options:set 이벤트를 사용하여 업데이트된 값을 지정할 수 있습니다.

dashboard:tile:start

이 이벤트는 타일이 데이터를 로드하거나 쿼리하기 시작할 때 생성됩니다.

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 정수 타일이 아닌 이벤트의 ID 번호
tile.title 문자열 타일 상단에 표시되는 타일 제목
tile.listen 객체 전역 대시보드가 이 타일이 수신 대기하는 필터 이 객체의 형식은 다음과 같습니다: {"Filter Label": "Filter Field", ...}

dashboard:tile:complete

이 이벤트는 타일이 쿼리 실행을 완료하면 생성됩니다.

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status 문자열 타일 쿼리가 성공적으로 완료되었는지 여부. 가능한 값은 "complete" 또는 "error"입니다.
truncated 불리언 쿼리 결과로 쿼리 행 한도보다 더 많은 행이 반환되어 타일 쿼리 결과가 잘렸는지 여부 행 한도는 사용자가 지정한 행 한도이거나 Looker 기본 행 한도인 5,000개일 수 있습니다.
tile.id 정수 타일이 아닌 이벤트의 ID 번호
tile.title 문자열 타일 상단에 표시되는 타일 제목
tile.listen 객체 전역 대시보드가 이 타일이 수신 대기하는 필터 이 객체의 형식은 다음과 같습니다: {"Filter Label": "Filter Field", ...}
tile.errors 객체 배열 status 속성이 "error"일 때 채워집니다. 오류 메시지 텍스트, 오류에 대한 자세한 설명, 오류를 생성한 타일의 SQL 쿼리를 비롯하여 오류 세부정보를 제공하는 객체 배열입니다.

dashboard:tile:download

이 이벤트는 타일의 데이터가 다운로드되기 시작할 때 생성됩니다.

type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"
속성 형식 설명
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 정수 타일이 아닌 이벤트의 ID 번호
tile.title 문자열 타일 상단에 표시되는 타일 제목
tile.listen 객체 전역 대시보드가 이 타일이 수신 대기하는 필터 이 객체의 형식은 다음과 같습니다: {"Filter Label": "Filter Field", ...}
fileFormat 문자열 다운로드한 타일의 형식(현재 "pdf"만 해당)

dashboard:tile:explore

이 이벤트는 사용자가 대시보드 타일에서 여기에서 탐색 옵션을 클릭하면 생성됩니다.

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
속성 형식 설명
label 문자열 버튼 라벨
url 문자열 보려는 탐색의 상대 URL(경로)
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 정수 타일이 아닌 이벤트의 ID 번호
tile.title 문자열 타일 상단에 표시되는 타일 제목
tile.listen 객체 전역 대시보드가 이 타일이 수신 대기하는 필터 이 객체의 형식은 다음과 같습니다: {"Filter Label": "Filter Field", ...}

dashboard:tile:view

이 이벤트는 사용자가 대시보드 타일에서 원본 스타일 보기 옵션을 클릭하면 생성됩니다.

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
속성 형식 설명
label 문자열 버튼 라벨
url 문자열 보려는 Look의 상대 URL(경로)
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 정수 타일이 아닌 이벤트의 ID 번호
tile.title 문자열 타일 상단에 표시되는 타일 제목
tile.listen 객체 전역 대시보드가 이 타일이 수신 대기하는 필터 이 객체의 형식은 다음과 같습니다: {"Filter Label": "Filter Field", ...}

dashboard:filters:changed

이 이벤트는 대시보드의 필터가 적용되거나 변경될 때 생성됩니다.

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
속성 형식 설명
dashboard.id 숫자/문자열 대시보드의 ID
dashboard.title 문자열 대시보드 상단에 표시되는 제목
dashboard.canEdit 불리언 22.20 추가됨 true인 경우, 사용자가 대시보드를 수정할 수 있습니다.
dashboard.url 문자열 상대 대시보드 URL(경로만)
dashboard.absoluteUrl 문자열 전체 대시보드 URL
dashboard.dashboard_filters 객체 대시보드에 적용된 필터 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options 객체 대시보드 레이아웃, 대시보드 레이아웃 구성요소, 대시보드 요소 속성 및 값. options 객체에서 반환되는 모든 속성에 dashboard:options:set 이벤트를 사용하여 업데이트된 값을 지정할 수 있습니다.

look:ready

이 이벤트는 쿼리 실행 여부에 관계없이 Look에서 쿼리 데이터 로드를 시작할 때 생성됩니다.

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
속성 형식 설명
look.url 문자열 상대 Look URL(경로만)
look.absoluteUrl 문자열 전체 Look URL

look:run:start

이 이벤트는 Look에서 쿼리 데이터를 로드하기 시작하고 쿼리 실행이 시작될 때 생성됩니다.

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
속성 형식 설명
look.url 문자열 상대 Look URL(경로만)
look.absoluteUrl 문자열 전체 Look URL

look:run:complete

이 이벤트는 Look에서 쿼리 실행을 완료하면 생성됩니다.

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
속성 형식 설명
look.url 문자열 상대 Look URL(경로만)
look.absoluteUrl 문자열 전체 Look URL

look:save:complete

이 이벤트는 Look을 수정하고 저장할 때 생성됩니다. 이 이벤트는 사용자가 다음 작업 중 하나를 수행할 때 생성됩니다.

  • 수정 버튼을 클릭하여 Look을 수정한 후 저장을 클릭합니다.
  • 저장 > 다른 이름으로 저장 메뉴 옵션으로 Look을 저장합니다.
  • 한 폴더에서 다른 폴더로 Look을 이동합니다.

저장 > 기존 대시보드로 또는 설정 수정 메뉴 옵션으로 Look이 저장된 경우 이 이벤트는 생성되지 않습니다.

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
}
속성 형식 설명
look.url 문자열 상대 Look URL(경로만)
look.absoluteUrl 문자열 전체 Look URL
look.folderid 정수 Look이 저장된 폴더 ID

look:delete:complete

이 이벤트는 Look을 휴지통 폴더로 이동할 때 생성됩니다.

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
속성 형식 설명
look.url 문자열 상대 Look URL(경로만)
look.absoluteUrl 문자열 전체 Look URL

drillmenu:click

이 이벤트는 사용자가 link LookML 매개변수로 만든 대시보드에서 드릴 메뉴를 클릭하면 생성됩니다. 예를 들어 다음 LookML은 사용자가 state 측정기준으로 필터링된 데이터를 볼 수 있는 드릴 메뉴를 만듭니다.


dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}

state 필터가 Illinois로 설정되면 drillmenu:click 이벤트는 iframe의 호스트에 다음을 반환합니다.

type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '
속성 형식 설명
label 문자열 드릴 메뉴에 표시되는 링크 라벨
link_type 문자열 링크 대상에 있는 객체 유형
modal 불리언 브라우저 탐색 대신 드릴 대화상자 사용 여부
target 문자열 링크 대상이 현재 iframe을 대체할 경우 _self, 링크 대상이 새 창을 열 경우 _blank
url 문자열 링크 대상의 URL
context 문자열 일부 시각화 유형에서 사용되는 내부 속성

iframe을 샌드박스 처리하면 드릴 메뉴에서 새 창을 열 수 없습니다. iframe 태그 내에서 다음과 같은 샌드박스 값을 사용하세요.

sandbox = "allow-same-origin allow-scripts"

drillmodal:download

이 이벤트는 사용자가 대시보드 타일에서 드릴 대화상자를 열고 다운로드 옵션을 클릭하면 생성됩니다.

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
속성 형식 설명
dashboard.id 숫자/문자열 타일이 속한 대시보드의 ID
dashboard.title 문자열 타일이 속한 대시보드 상단에 표시되는 대시보드 제목
dashboard.url 문자열 타일이 속한 상대 대시보드 URL(경로)
dashboard.absoluteUrl 문자열 타일이 속한 전체 대시보드 URL
dashboard.dashboard_filters 객체 타일이 속한 대시보드에 적용되는 필터. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl 문자열 다운로드할 상대 탐색 URL(경로만)
fileFormat 문자열 데이터 다운로드의 파일 형식.

drillmodal:explore

이 이벤트는 사용자가 드릴 대화상자에서 여기에서 탐색 옵션을 클릭하면 생성됩니다.

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
속성 형식 설명
label 문자열 드릴 메뉴에 표시된 버튼 라벨
url 문자열 보려는 상대 탐색 URL(경로)

explore:ready

이 이벤트는 쿼리 실행 여부에 관계없이 탐색에서 쿼리 데이터 로드를 시작할 때 생성됩니다.

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
속성 형식 설명
explore.url 문자열 상대 탐색 URL(경로)
explore.absoluteUrl 문자열 전체 탐색 URL

explore:run:start

이 이벤트는 탐색에서 쿼리 데이터를 로드하기 시작하고 쿼리 실행이 시작될 때 생성됩니다.

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
속성 형식 설명
explore.url 문자열 상대 탐색 URL(경로)
explore.absoluteUrl 문자열 전체 탐색 URL

explore:run:complete

이 이벤트는 탐색이 쿼리 실행을 완료하면 생성됩니다.

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
속성 형식 설명
explore.url 문자열 상대 탐색 URL(경로)
explore.absoluteUrl 문자열 전체 탐색 URL

explore:state:changed

이 이벤트는 사용자의 작업으로 인해 탐색 페이지 URL이 변경될 때 생성됩니다.

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
속성 형식 설명
explore.url 문자열 상대 탐색 URL(경로)
explore.absoluteUrl 문자열 전체 탐색 URL

page:changed

이 이벤트는 사용자가 iframe 내의 새 페이지로 이동하면 생성됩니다.

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
속성 형식 설명
page.type 문자열 "dashboard", "look", "explore" 등 방금 이동한 페이지 유형
page.url 문자열 방금 이동한 페이지의 상대 URL(경로)
page.absoluteUrl 문자열 방금 탐색한 페이지의 전체 URL

page:properties:changed

이 이벤트는 대시보드 iframe의 높이가 변경될 때 생성됩니다. Look 또는 탐색에는 높이가 iframe의 크기에 자동으로 조정되므로 사용할 수 없습니다.

type: "page:properties:changed",
height: 1000
속성 형식 설명
height 정수 대시보드 iframe의 높이(픽셀)

session:tokens

이 이벤트는 Looker 클라이언트에서 계속하려면 토큰이 필요함을 나타냅니다. 이 이벤트는 iframe이 생성되면 즉시 생성되며 이후 세션 동안 주기적으로 생성됩니다.

{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}
속성 형식 설명
authentication_token 문자열 인증 토큰. iframe이 생성될 때 포함됩니다. 토큰 생성 요청에 대한 응답 또는 세션이 만료된 경우 포함되지 않습니다.
authentication_token_ttl 숫자 인증 토큰 수명(초). iframe이 생성될 때 포함됩니다. 토큰 생성 요청에 대한 응답 또는 세션이 만료된 경우 포함되지 않습니다.
api_token 문자열 API Token. 세션이 만료된 경우 포함되지 않습니다.
api_token_ttl 숫자 API 토큰 수명(초). 세션이 만료된 경우 포함되지 않습니다.
navigation_token 문자열 탐색 토큰. 세션이 만료된 경우 포함되지 않습니다.
navigation_token_ttl 숫자 탐색 토큰 수명(초). 세션이 만료된 경우 포함되지 않습니다.
session_references_token_ttl 숫자 세션 시간(초). 세션이 만료되면 값은 0이 됩니다. 복구하려면 임베딩 애플리케이션이 새 세션을 획득해야 합니다.

session:status

임베딩된 Looker 애플리케이션이 세션 토큰 요청을 처리할 때 이벤트가 생성됩니다.

{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}
속성 형식 설명
session_ttl 숫자 세션 시간(초).
expired 불리언 true인 경우 세션이 만료되었음을 나타냅니다.
interrupted 불리언 true인 경우 세션 토큰 요청이 응답하지 않았음을 나타냅니다. 이는 서버를 일시적으로 사용할 수 없음을 나타낼 수 있습니다.
recoverable 불리언 중단된 경우에만 채워지는 true입니다. 세션을 복구할 수 있는지 여부를 나타냅니다. false 값은 임베딩 애플리케이션에 문제가 있을 수 있음을 나타냅니다.

env:client:dialog

드릴 대화상자와 같이 부분적으로 보이지 않을 수 있는 대화상자가 열리면 이벤트가 생성됩니다. 이 이벤트를 통해 호스팅 애플리케이션은 env:host:scroll 작업으로 대화상자를 스크롤하여 열람할 수 있습니다.

{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}
속성 형식 설명
type 문자열 env:client:dialog는 대화상자가 열렸거나 닫혔음을 나타냅니다. 현재는 드릴 대화상자만 지원되지만 향후 다른 대화상자도 추가될 수 있습니다. 대화상자에 iframe 표시 영역이 포함되어 있으므로 드릴 대화상자 상단이 표시되지 않을 수 있습니다. 이 이벤트를 통해 호스트 애플리케이션이 대화상자 상단을 스크롤하여 볼 수 있습니다.
dialogType 문자열 대화상자의 유형. 현재 '드릴링' 대화상자 유형의 열기 또는 닫기만 이 이벤트를 트리거합니다.
placement 문자열 대화상자의 배치. '드릴링' 유형의 대화상자에서는 항상 ' 표지'의 placement을 사용합니다.
open 불리언 대화상자를 열거나 스크롤할지 여부를 나타냅니다.

iframe 변경

데이터 검색을 위한 iframe을 준비한 후 다음 단계에 따라 iframe을 변경할 수 있습니다.

  1. JSON으로 요청을 작성합니다.
  2. Iframe의 contentWindow에 요청을 게시합니다.

JSON으로 요청 작성

iframe에 몇 가지 변경사항을 적용할 수 있으며 JSON 형식으로 제출합니다. 사용 가능한 옵션은 이 페이지의 작업 참조 섹션에 설명되어 있습니다. 다음과 같이 JSON.stringify를 사용하여 작업을 JSON으로 변환하는 것을 잊지 마세요.

var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);

iframe의 contentWindow 속성에 요청 게시하기

마지막으로 다음과 같이 iframe의 contentWindow에 메시지를 게시합니다.

var my_iframe = document.getElementById("my_iframe_id");

my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');

작업 요약 표

다음 표에는 작업이 요약되어 있습니다. 작업을 선택하여 해당 작업의 세부정보를 확인하세요.

작업 작업 설명
dashboard:load iframe에 새 대시보드를 로드하고 기존 대시보드를 대체합니다.
dashboard:run iframe에서 대시보드를 실행합니다.
dashboard:edit 22.20 추가 대시보드를 수정 모드로 전환합니다.
dashboard:filters:update iframe에서 기존 대시보드 필터를 업데이트합니다.
dashboard:options:set 대시보드 레이아웃 및 대시보드 요소 속성에 새 값을 씁니다.
dashboard:schedule_modal:open 사용자가 다양한 대상에 Looker 콘텐츠를 전달할 수 있는 스케줄러를 엽니다.
dashboard:stop 실행 중이거나 대시보드를 새로고침하는 대시보드를 중지합니다.
look:run iframe에서 Looks를 실행합니다.
look:filters:update iframe에서 기존 Look 필터를 업데이트합니다.
explore:run iframe에서 탐색을 실행합니다.
explore:filters:update iframe에서 기존 탐색 필터를 업데이트하거나 삭제합니다.
session:tokens:request session:tokens:request 이벤트에 대한 응답으로 토큰을 전송합니다.
env:host:scroll 호스트 Looker의 현재 스크롤 위치에 대한 정보를 임베딩된 Looker 애플리케이션에 전송합니다.

작업 참조

임베딩된 iframe에 게시할 수 있는 작업은 다음과 같습니다.

dashboard:load

이 작업을 사용하여 iframe에서 새 대시보드를 로드하여 기존 대시보드를 대체합니다. 새 대시보드는 새 대시보드 페이지가 열린 것처럼 쿼리 실행을 시작합니다.

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}
속성 형식 설명
type 문자열 dashboard:load 유형을 사용하면 새 대시보드를 iframe에 로드할 수 있습니다.
id 문자열 로드할 대시보드의 ID
pushHistory 불리언 true이면 로드된 대시보드가 새 브라우저 기록 항목을 만들고 사용자는 브라우저의 뒤로 버튼을 사용하여 이전 대시보드로 돌아갈 수 있습니다. false이면 현재 대시보드가 교체되며 이 브라우저로 되돌아가는 데 브라우저 탐색을 사용할 수 없습니다.

dashboard:run

이 작업을 사용하여 iframe에서 대시보드를 실행합니다. 이 작업은 대시보드에서 실행 또는 데이터 새로고침 버튼을 누르는 것과 동일합니다.

{
  type: "dashboard:run"
}
속성 형식 설명
type 문자열 dashboard:run 유형을 사용하면 대시보드를 실행할 것을 나타냅니다.

dashboard:edit

22.20 추가 이 작업을 통해 iframe의 기존 대시보드를 수정 모드로 전환합니다. 이 작업은 대시보드 메뉴에서 대시보드 수정을 선택하는 것과 동일합니다.

{
  type: "dashboard:edit"
}
속성 형식 설명
type 문자열 dashboard:edit 유형을 사용하면 대시보드를 수정 모드로 전환함을 나타냅니다.

dashboard:filters:update

이 작업을 사용하여 iframe에서 기존 대시보드 필터를 업데이트합니다. 이 방법으로 대시보드에 새 필터를 추가할 수 없습니다.

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}
속성 형식 설명
type 문자열 dashboard:filters:update 유형을 사용하면 대시보드에서 사용하는 필터를 업데이트할 수 있습니다.
filters 객체 대시보드에 적용할 새 필터입니다. 이 객체의 형식은 다음과 같습니다: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:options:set

이 작업은 dashboard:run:complete 이벤트가 발생한 후에 사용할 수 있습니다.

임베딩은 메시지를 만들고 iframe으로 전송하지만 dashboard:run:complete가 발생할 때까지 대시보드는 응답하지 않습니다. dashboard:options:set 작업은 새 값을 대시보드 레이아웃 및 대시보드 요소 속성에 씁니다. dashboard:run:complete 이벤트의 options 속성에서 반환된 속성만 dashboard:options:set를 사용하여 업데이트할 수 있습니다. 이전에 dashboard:run:complete 이벤트의 options 속성에서 반환하지 않은 모든 속성 집합은 무시됩니다.

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}
속성 형식 설명
type 문자열 dashboard:options:set 유형을 사용하면 대시보드 레이아웃 및 대시보드 요소 속성에 새 값을 작성함을 나타냅니다.
layouts 객체 dashboard:run:complete 이벤트의 options 속성에서 반환하는 대시보드 레이아웃 속성입니다. 형식은 다음과 같습니다.

  • id: "string",
  • dashboard_id: "string",
  • type: "newspaper",
  • active: boolean,
  • column_width: number,
  • width: number
layouts.dashboard_layout_components 객체 dashboard:run:complete 이벤트의 options 속성에서 반환하는 하나 이상의 대시보드 레이아웃 구성요소 객체입니다. 형식은 다음과 같습니다.

  • id: "string",
  • dashboard_layout_id: "string",
  • dashboard_element_id: "string",
  • row: number,
  • column: number,
  • width: number,
  • height: number,
  • deleted: boolean,
elements 객체 dashboard:run:complete 이벤트의 options 속성에서 반환하는 하나 이상의 대시보드 요소 객체입니다. 형식은 다음과 같습니다.

id: {

  title: "string",

  title_hidden: boolean,

  vis_config: {

    type: "string", title: "string"

  }

}

dashboard:schedule_modal:open

사용자가 다양한 대상에 Looker 콘텐츠를 전송할 수 있도록 스케줄러를 여는 작업을 사용합니다.

{
  type: "dashboard:schedule_modal:open"
}
속성 형식 설명
type 문자열 dashboard:schedule_modal:open 유형을 사용하면 일정 대화상자를 엽니다.

dashboard:stop

이 작업을 사용하여 실행 중인 대시보드나 데이터 새로고침을 중지합니다. 대시보드에서 취소 버튼을 클릭하는 것과 동일한 작업입니다. dashboard:stop를 사용한 대시보드가 status:"stopped"로 설정하여 dashboard:run:complete 이벤트를 전송합니다.

{
  type: "dashboard:stop"
}
속성 형식 설명
type 문자열 dashboard:stop 유형을 사용하면 실행 중인 대시보드를 중지할 것임을 나타냅니다.

look:run

이 작업을 사용하여 Look이 iframe을 기반으로 하는 쿼리를 실행합니다. 이 작업은 look:run이 항상 데이터베이스를 직접 쿼리하고 Looker 캐시에서 데이터를 검색하지 않는다는 점을 제외하면 Look에서 실행 버튼을 누르는 것과 유사합니다.

{
  type: "look:run"
}
속성 형식 설명
type 문자열 look:run 유형을 사용하면 Look을 실행한다는 의미입니다.

look:filters:update

이 작업을 사용하여 iframe에서 기존 Look 필터를 업데이트합니다. 이 메서드를 사용하여 Look에 새 필터를 추가할 수 없습니다.

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}
속성 형식 설명
type 문자열 look:filters:update 유형을 사용하면 Look에서 사용하는 필터를 업데이트할 수 있습니다.
filters 객체 Look에 적용할 새 필터. 이 객체의 형식은 {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}입니다.

explore:run

이 작업을 사용하여 iframe에서 Explore를 실행합니다. 이 작업은 explore:run이 항상 데이터베이스를 직접 쿼리하고 Looker 캐시에서 데이터를 검색하지 않는다는 점을 제외하면 Explore에서 실행 버튼을 누르는 것과 유사합니다.

{
  type: "explore:run"
}
속성 형식 설명
type 문자열 explore:run 유형을 사용하면 탐색 실행이 실행됨을 나타냅니다.

explore:filters:update

iframe에서 기존 탐색 필터를 업데이트하거나 삭제하려면 이 작업을 수행합니다. 유효한 필드를 참조하는 새 필터를 포함하면 탐색에 새 필터가 추가됩니다.

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
속성 형식 설명
type 문자열 explore:filters:update 유형을 사용하면 탐색에서 사용하는 필터를 업데이트할 수 있습니다.
filters 객체 탐색에 적용할 새 필터. filters에 현재 탐색에 없지만 유효한 필드를 참조하는 필터가 포함된 경우 해당 필터가 탐색에 추가됩니다. 이 객체의 형식은 {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}입니다.
deleteFilters 배열 탐색에서 삭제할 기존 필터. 배열의 형식은 ["view_name.field_name_1", "view_name.field_name_2", ...]입니다.

session:tokens:request

이 작업을 사용하여 session:tokens:request 요청에 대한 응답으로 토큰을 전송합니다.

{
  type: "session:tokens:request",
}
속성 형식 설명
type 문자열 session:tokens:request 유형을 사용하면 session:tokens:request 이벤트에 대한 응답으로 토큰을 전송함을 나타냅니다.

env:host:scroll

이 작업을 사용하여 호스트 iframe의 현재 스크롤 위치에 대한 정보를 임베딩된 Looker 애플리케이션에 보냅니다.

{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}
속성 형식 설명
type 문자열 env:host:scroll 유형을 사용하면 호스트 iframe의 현재 스크롤 위치에 대한 정보를 임베딩된 Looker 애플리케이션에 전송하려고 합니다.
offsetTop 숫자 iframe의 오프셋 상단
offsetLeft 숫자 iframe의 오프셋 왼쪽
scrollX 숫자 애플리케이션 호스트의 스크롤 X 위치
scrollY 숫자 애플리케이션 호스트의 스크롤 위치