Looker 문서를 보고 있습니다. Looker Studio 문서는 https://support.google.com/looker-studio를 참조하세요.

임베딩된 JavaScript 이벤트

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

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

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

Embed SDK 문서 페이지에 설명된 Looker의 임베드 소프트웨어 개발 키트(SDK) 사용하기
이 페이지의 JavaScript에서 이벤트 액세스 섹션에 설명된 JavaScript 이벤트를 사용하기

준비

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

iframe에 ID를 추가합니다.
Iframe src 속성에 임베드 도메인을 추가합니다.
허용 목록에 임베드 도메인을 추가합니다.

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>

서명된 임베딩을 사용하는 경우 임베드 URL에 embed_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이 사용되는 도메인을 추가해야 합니다.

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

중요: 도메인 URL에 후행 슬래시(/)를 포함하지 마세요.
업데이트를 클릭합니다.

허용 목록에서 * 와일드 카드를 사용하여 도메인 패턴을 만들 수 있습니다. 예를 들어 https://*.myownpersonaldomain.com은 https://analytics.myownpersonaldomain.com 및 https://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을 변경할 수 있습니다.

JSON으로 요청을 작성합니다.
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`	숫자	애플리케이션 호스트의 스크롤 위치

임베딩된 JavaScript 이벤트

준비

iframe에 ID 추가

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

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

iframe에서 데이터 가져오기

JavaScript에서 이벤트 액세스

이벤트 유형 요약 표

이벤트 유형 참조

dashboard:loaded

dashboard:run:start

dashboard:run:complete

dashboard:download

dashboard:edit:start

dashboard:edit:cancel

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:run:start

look:run:complete

look:save:complete

look:delete:complete

drillmenu:click

drillmodal:download

drillmodal:explore

explore:ready

explore:run:start

explore:run:complete

explore:state:changed

page:changed

page:properties:changed

session:tokens

session:status

env:client:dialog