dashboard_vis — 확장 프로그램이 사용 설정되면 Explore의 시각화 옵션에 표시되며, 여기서 확장 프로그램을 시각화로 선택하여 대시보드 타일로 저장할 수 있습니다. 대시보드 실행 시 해당 대시보드는 타일과 연결된 쿼리를 실행하고 데이터를 확장 프로그램에서 사용할 수 있게 합니다. 이는 커스텀 시각화의 작동 방법과 비슷합니다. 커스텀 시각화와 dashboard_vis가 사용 설정된 대시보드 타일에서 실행되는 확장 프로그램의 주요 차이점은 확장 프로그램에서 Looker API를 호출할 수 있다는 점입니다.
dashboard_tile — 사용 설정 시 확장 프로그램은 사용자가 대시보드를 수정하고 추가 버튼을 클릭한 후 확장 프로그램 옵션을 선택할 때 표시되는 확장 프로그램 패널에 나타납니다. 이러한 유형의 확장 프로그램은 타일 쿼리에서 자동으로 확장 프로그램에 데이터를 제공하는 대신 자체 데이터를 검색합니다.
tileSDK - 확장 프로그램이 Looker 대시보드 호스트와 상호작용할 수 있도록 타일별로 함수를 제공합니다. 예를 들어 확장 프로그램이 오류 메시지를 표시하고 삭제하도록 허용합니다.
tileHostData - 확장 프로그램에 타일 데이터를 제공합니다. 데이터는 호스팅 대시보드와의 상호작용에 따라 자동으로 업데이트됩니다. isDashboardEditing 표시기가 그 예시입니다.
visualizationSDK — 확장 프로그램이 Looker 대시보드 호스트와 상호작용할 수 있도록 시각화별로 함수를 제공합니다. updateRowLimit 함수가 그 예시입니다.
visualizationData -확장 프로그램에 시각화 데이터를 제공합니다. 데이터는 호스팅 대시보드와의 상호작용에 따라 자동으로 업데이트됩니다. 데이터는 커스텀 시각화에 제공되는 데이터와 비슷합니다.
대응형 확장 프로그램 빌드
확장 프로그램이 실행되는 iframe은 상위 Looker 호스트 창의 크기를 조정할 때 자동으로 크기를 조정합니다. 이는 iframe 콘텐츠 창에 자동으로 반영됩니다. iframe 구성요소에는 패딩이나 여백이 없으므로 Looker 애플리케이션과 일관되게 표시되도록 자체 패딩과 여백을 제공하는 것은 확장 프로그램의 몫입니다. 독립형 확장 프로그램의 경우 해당 확장 프로그램에서 확장 프로그램의 높이를 제어합니다. 대시보드 타일 또는 탐색 시각화에서 실행되는 확장 프로그램의 경우 iframe 콘텐츠 창이 iframe에서 사용할 수 있는 높이로 자동 설정됩니다.
렌더링 고려사항
타일 확장 프로그램은 대시보드가 PDF 또는 이미지로 다운로드할 때 렌더링된다는 점에 유의해야 합니다. 렌더러는 렌더링이 완료되면 타일이 이를 알릴 것으로 예상합니다. 수행되지 않았으면 렌더러가 응답을 중지합니다. 다음은 렌더러에 타일이 렌더링되었음을 알리는 방법의 예시입니다.
타일 SDK는 타일 확장 프로그램이 호스팅 대시보드와 상호작용할 수 있는 함수를 제공합니다.
다음 표에서는 사용 가능한 함수 및 속성을 보여줍니다.
함수 또는 속성
설명
tileHostData(속성)
타일 확장 프로그램 관련 데이터를 호스팅합니다. 자세한 내용은 타일 SDK 데이터 섹션을 참조하세요.
addError
호출 시 대시보드 또는 Explore에서 시각화 아래에 오류 메시지를 표시합니다.
clearError
호출 시 대시보드 또는 Explore에서 시각화 아래에 표시된 오류 메시지를 숨깁니다.
openDrillMenu
시각화 확장 프로그램에서 이 호출로 드릴다운 메뉴를 엽니다. 확장 프로그램이 타일 확장 시각화가 아니면 이 호출이 무시됩니다.
runDashboard
현재 대시보드를 실행합니다. 이 호출은 Explore에서 실행 중인 타일 시각화 확장 프로그램에서 무시됩니다.
stopDashboard
실행 중인 대시보드를 중지합니다. 이 호출은 Explore에서 실행 중인 타일 시각화 확장 프로그램에서 무시됩니다.
updateFilters
현재 대시보드 또는 Explore의 필터를 업데이트합니다.
openScheduleDialog
일정 대화상자를 엽니다. 이 호출은 Explore에서 실행될 때 무시됩니다.
toggleCrossFilter
교차 필터를 전환합니다. 이 호출은 Explore에서 실행될 때 무시됩니다.
타일 SDK 데이터
다음 표에서는 사용 가능한 타일 SDK 데이터 속성을 보여줍니다.
속성
설명
isExploring
True인 경우 타일이 Explore 내에서 시각화로 구성되어 있음을 나타냅니다.
dashboardId
렌더링 중인 타일의 대시보드 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.
elementId
렌더링 중인 타일의 요소 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.
queryId
시각화와 연결된 경우 렌더링 중인 타일의 쿼리 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.queryId는 시각화가 Looker Explore에 기본 제공되는 경우 생성되는 쿼리의 ID입니다. 대시보드에 적용할 필터 또는 교차 필터링을 포함하지 않습니다. QueryResponse에 표시된 데이터를 반영하려면 필터 및 교차 필터를 적용하고 새 쿼리를 생성합니다. 따라서 queryId보다 유용한 속성이 더 많을 수 있습니다. 필터가 적용된 쿼리 객체는 filteredQuery를 참조하세요.
querySlug
시각화와 연결된 경우 렌더링 중인 타일의 쿼리 슬러그입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.querySlug는 시각화가 Looker Explore에 기본 제공되는 경우 생성되는 쿼리의 슬러그입니다. 대시보드에 적용되는 필터 또는 교차 필터링을 포함하지 않습니다. QueryResponse에 표시된 데이터를 반영하려면 필터 및 교차 필터를 적용하고 새 쿼리를 생성합니다. 따라서 querySlug보다 유용한 속성이 더 많을 수 있습니다. 필터가 적용된 쿼리 객체는 filteredQuery를 참조하세요.
dashboardFilters
대시보드에 적용 중인 필터입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.
dashboardRunState
대시보드가 실행 중인지 여부를 나타냅니다. 타일이 Explore로 구성되는 경우 상태가 UNKNOWN이 됩니다.대시보드 성능상의 이유로 실행 상태가 실행 중으로 표시되지 않을 수 있습니다. 이는 일반적으로 확장 프로그램과 연결된 타일 등 쿼리와 연결된 다른 타일이 없는 경우에 발생합니다. 확장 프로그램에서 대시보드가 실행되었는지 확인해야 할 경우 lastRunStartTime의 차이를 감지하는 것이 안정적인 방법입니다.
isDashboardEditing
True인 경우 대시보드를 수정하는 중입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.
isDashboardCrossFilteringEnabled
True인 경우 대시보드에서 교차 필터링이 사용 설정됩니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.
filteredQuery
대시보드 수준에서 수행한 모든 대시보드 필터 및 시간대 변경사항을 적용하는 기본 대시보드 요소와 연결된 쿼리 ID와 일치하는 쿼리 객체입니다.
lastRunSourceElementId
마지막 대시보드 실행을 트리거한 타일 확장 프로그램 요소의 ID입니다. 대시보드 실행이 대시보드 실행 버튼 또는 autorefresh에 의해 트리거되었거나 삽입 SDK를 사용하여 실행이 트리거된 경우에는 ID가 정의되지 않습니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.lastRunSourceElementId는 현재 확장 프로그램 인스턴스의 요소 ID와 동일할 수 있습니다. 예를 들어 확장 프로그램이 대시보드 실행을 트리거하는 경우 대시보드 실행이 시작되고 완료되면 알림이 표시됩니다.
lastRunStartTime
마지막 대시보드 실행 시작 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.보고된 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용하지 않아야 합니다.
lastRunEndTime
마지막 대시보드 실행 종료 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중이면 이 속성이 채워지지 않습니다.보고된 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용하지 않아야 합니다.
lastRunSuccess
마지막 대시보드 실행이 성공했는지 여부를 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중이면 이 속성이 채워지지 않습니다.
시각화 SDK 함수 및 속성
다음 표에서는 사용 가능한 시각화 SDK 함수 및 속성을 보여줍니다.
함수 또는 속성
설명
visualizationData(속성)
시각화(visConfig 및 queryResponse 데이터의 조합)
visConfig(속성)
시각화 구성 데이터:
측정 구성
측정기준 구성
테이블 계산
피벗 구성
시각화 구성
Explore에서 시각화의 모양과 느낌을 맞춤설정하는 데 사용됩니다.
queryResponse(속성)
쿼리의 응답 데이터
configureVisualization
확장 프로그램 시각화의 기본 구성을 설정합니다. 이 구성이 Explore 시각화 편집기 내에서 렌더링됩니다. 한 번만 호출해야 합니다.
setVisConfig
시각화 구성을 업데이트합니다.
updateRowLimit
쿼리 행 한도를 업데이트합니다.
시각화 SDK 데이터
시각화 SDK는 다음으로 구성됩니다.
시각화 구성 데이터
쿼리 응답 데이터
시각화 구성 데이터
속성
설명
queryFieldMeasures
측정 정보
queryFieldDimensions
측정기준 정보
queryFieldTableCalculations
테이블 계산 정보
queryFieldPivots
피벗 정보
visConfig
시각적 구성 데이터. 기본 구성과 병합되고 확장 프로그램에서 렌더링되는 시각화에 적용되어야 합니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["이해하기 어려움","hardToUnderstand","thumb-down"],["잘못된 정보 또는 샘플 코드","incorrectInformationOrSampleCode","thumb-down"],["필요한 정보/샘플이 없음","missingTheInformationSamplesINeed","thumb-down"],["번역 문제","translationIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-03-04(UTC)"],[],[],null,["# Building tile extensions\n\nStarting in Looker 24.0, extensions can be developed to run in a tile in dashboards. Extensions that support being run as a tile or visualization can be [added while the dashboard is in edit mode](/looker/docs/creating-user-defined-dashboards#adding_extensions) or [saved to a dashboard as a visualization from an Explore](/looker/docs/viewing-and-interacting-with-explores#the_explore_actions_gear_menu). Extensions can also be configured as tiles in [LookML dashboards](/looker/docs/building-lookml-dashboards).\n\nExamples of extensions that can be used as dashboard tiles are available:\n\n- The [tile visualization extension](https://github.com/looker-open-source/extension-examples/tree/main/react/javascript/tile-visualization) shows how to build a custom visualization using the extension framework.\n- The [tile sdk extension](https://github.com/looker-open-source/extension-examples/tree/main/react/javascript/tile-sdk) shows the available API methods that are specific to tile extensions.\n\n| **Caution:** Embedded Looker content (such as reports, dashboards, Looks, Explores, LookML dashboards, and query visualizations) can't be used in tile extensions.\n\nUsing the Looker Extension SDK with tile extensions\n---------------------------------------------------\n\nTile extensions require the [`mount_points` parameter](/looker/docs/reference/param-manifest-application#mount_points) to be defined in the LookML [project manifest file](/looker/docs/lookml-project-files#project_manifest_files) in order for extensions to be loaded as tiles into a dashboard. There are two types of `mount_points` related to tile extensions: \n\n mount_points: {\n dashboard_vis: yes\n dashboard_tile: yes\n standalone: yes\n }\n\n- `dashboard_vis` --- When enabled, the extension will appear in the [visualization options of an Explore](/looker/docs/creating-visualizations#choosing_a_visualization_type), where the extension can be selected as a visualization and [saved as a dashboard tile](/looker/docs/creating-user-defined-dashboards#adding_query_tiles_from_an_explore). When the dashboard is run, the dashboard will execute the query associated with the tile and make the data available to the extension. This is similar to how [custom visualizations](/looker/docs/reference/param-manifest-visualization) work. The primary difference between a custom visualization and an extension running in a dashboard tile that has `dashboard_vis` enabled, is that the extension may make [Looker API](/looker/docs/reference/looker-api/latest) calls.\n- `dashboard_tile` --- When enabled, the extension will appear in the [**Extensions** panel](/looker/docs/creating-user-defined-dashboards#adding_extensions) that is displayed when a user is editing a dashboard and selects the **Extensions** option after clicking the **Add** button. This type of extension is responsible for retrieving its own data, instead of the having the tile query automatically supply the extension with data.\n\nAn additional mount point, `standalone`, causes the extension to appear under the **Applications** section of the Looker main menu. It is possible for an extension to have multiple mount points defined. At runtime, the extension is notified how it is mounted and it can adjust its behavior accordingly. For example, [`standalone` extensions may need to set their own height, while tile extensions don't](/looker/docs/extension-framework-building-tile-extensions#building_reactive_extensions).\n\nTile extension additional APIs\n------------------------------\n\nTile extensions are provided with additional APIs and data at runtime. These are obtained from the extension context: \n\n const {\n tileSDK,\n tileHostData,\n visualizationData,\n visualizationSDK,\n } = useContext(ExtensionContext40)\n\n- `tileSDK` --- Provides tile-specific functions to allow the extension to interact with the Looker dashboard host. For example, to allow the extension to display and clear error messages.\n- `tileHostData` --- Provides tile data to the extension. The data is automatically updated based upon interactions with the hosting dashboard. An example is the `isDashboardEditing` indicator.\n- `visualizationSDK` --- Provides visualization-specific functions to allow the extension to interact with the Looker dashboard host. An example is the `updateRowLimit` function.\n- `visualizationData` --- Provides visualization data to the extension. The data is automatically updated based upon interactions with the hosting dashboard. The data is similar to the data that is provided to [custom visualizations](/looker/docs/reference/param-manifest-visualization).\n\nBuilding reactive extensions\n----------------------------\n\nThe iframes that extensions run in automatically resize as the parent Looker host window resizes. This is automatically reflected in the iframe content window. The iframe component does not have any padding or margin so it is up to the extension to provide its own padding and margin so that it looks consistent with the Looker application. For standalone extensions, it is up to the extension to control the extension height. For extensions that run in dashboard tiles or Explore visualizations, the iframe content window will automatically be set to the height that is made available by the iframe.\n\nRendering considerations\n------------------------\n\nIt is important to note that tile extensions will be rendered when a dashboard is downloaded as a PDF or an image. The renderer expects that the tile will notify it when rendering is complete. If this is not done, the renderer will stop responding. The following is an example of how to notify the renderer that the tile has rendered. \n\n const { extensionSDK } = useContext(ExtensionContext40)\n\n useEffect(() =\u003e {\n extensionSDK.rendered()\n }, [])\n\nAnimations should also be disabled when rendering. The following is an example where animation configurations are turned off when rendering: \n\n const { lookerHostData} = useContext(ExtensionContext40)\n const isRendering = lookerHostData?.isRendering\n\n const config = isRendering\n ? {\n ...visConfig,\n valueCountUp: false,\n waveAnimateTime: 0,\n waveRiseTime: 0,\n waveAnimate: false,\n waveRise: false,\n }\n : visConfig\n\n if (mountPoint === MountPoint.dashboardVisualization) {\n return \u003cVisualizationTile config={config} /\u003e\n }\n\nTile SDK functions and properties\n---------------------------------\n\nThe tile SDK provides functions that allow a tile extension to interact with its hosting dashboard.\n\nThe available functions and properties are shown in the following table:\n\nTile SDK data\n-------------\n\nThe available tile SDK data properties are shown in the following table:\n\nVisualization SDK functions and properties\n------------------------------------------\n\nThe available visualization SDK functions and properties are shown in the following table:\n\nVisualization SDK data\n----------------------\n\nThe visualization SDK consists of the following:\n\n- Visualization configuration data\n- Query response data\n\n### Visualization configuration data\n\n export interface VisualizationConfig {\n queryFieldMeasures: Measure[]\n queryFieldDimensions: Dimension[]\n queryFieldTableCalculations: TableCalculation[]\n queryFieldPivots: PivotConfig[]\n visConfig: RawVisConfig\n }\n\n### Query response data\n\nUsing the Embed SDK\n-------------------\n\nUsing the [Embed SDK](/looker/docs/embed-sdk-intro) in a tile extension is not recommended for the following reasons:\n\n- It is possible that the extension may end up rendering a dashboard that the extension is a tile in. The extension framework has no way of detecting this, and, as a result, the browser may crash.\n- PDF rendering of embedded content inside of a tile extension doesn't work."]]
