작성일자 : 2023-09-26
Ver 0.1.1
0. Intro
보통 기업이 프로젝트를 통해 Tableau 대시보드 개발을 하면 Tableau Server를 직접 사용하기도 하지만, 그러기 보다는 이미 사용하고 있는 시스템(ex. Salesforce)이나 포털에 임베딩(Embedding)하여 대시보드를 조회하는 경우가 더 많고 일반적이다.
임베딩시 아무 조건 없이 임베딩을 할 수도 있겠지만, 요건 및 권한에 따라 데이터 필터링을 하여 대시보드를 조회하게 한다거나 뷰의 옵션을 수정해야할 수도 있다. 다른 포스팅에서는 URL을 통해 데이터를 필터링을 하는 경우에 대해서 정리해보았다.
이번 포스팅에서는 필터링이 아닌 View 임베딩시 여러 옵션들에 대해서 정리해보겠다.
내용은 Tableau Help의 뷰의 내장 코드 매개 변수를 참고하였다.
1. iframe 태그의 URL 매개변수
- 뷰 URL 지정: iframe 또는 image 태그를 사용하여 뷰를 내장합니다. 여기서, 원본은 뷰에서 공유를 클릭한 다음 링크 복사를 클릭하여 얻는 URL입니다. 웹 사이트에서 JavaScript를 사용할 수 없는 경우 유용합니다. 지정할 수 있는 것이 URL뿐인 상황도 있을 수 있습니다.
예시)
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
1-1. View URL 구조
Tableau Server 또는 Tableau Cloud에서 Tableau 뷰의 기본적인 URL 패턴은 다음과 같다.
http://<servername>/#/views/<workbook>/<sheet>
다중 사이트 환경에서 기본 사이트 이외의 사이트에 저장된 뷰의 경우 사이트의 ID도 URL에 포함된다.
http://<servername>/#/site/<sitename>/views/<workbook>/<sheet>
1-2. 기본 URL에 매개변수 추가
1) 쿼리 문자열 추가
필터링 URL을 만들려면 기본 URL에 쿼리 문자열을 추가한다. 쿼리 문자열에서 뷰 필터는 매개 변수다. 쿼리 문자열을 작성하려면:
- 물음표(?)로 쿼리 문자열을 시작
- 앰퍼샌드(&:)를 사용하여 매개 변수를 구분
예를 들면 다음과 같다.
http://<servername>/#/views/<workbook>/sheet?:linktarget=_blank&:render=true&:toolbar=no
참고: URL 매개 변수를 추가하기 전에 URL 끝에 있는 :iid=[#]을 제거합니다. 이 코드는 현재 브라우저 세션의 임시 뷰 카운터입니다.
URL 매개 변수 | 값 | 설명 | 예 |
:dataDetails | no | 툴바에서 뷰에 사용된 데이터의 세부 정보를 표시하는 데이터 세부 정보 단추를 숨깁니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:dataDetails=no |
:showDataDetails | yes | Tableau Catalog가 사용되는 경우 데이터 세부 정보 패널이 열린 상태로 뷰가 표시됩니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showDataDetails=yes |
:alerts | no | 내장된 뷰에서 알림 단추를 숨깁니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:alerts=no |
:customViews | no | 내 변경 내용 저장 옵션입니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:customViews=no |
:device | desktop; tablet; phone | 대시보드에 휴대기기를 위한 레이아웃이 있는 경우 화면 크기에 관계없이 특정 레이아웃을 표시합니다. 이 매개 변수가 설정되어 있지 않으면 Tableau Server 또는 Tableau Cloud에서 화면 크기를 감지하여 해당하는 레이아웃을 로드합니다. 예제에 대해서는 대시보드 내장을 참조하십시오. | http://tabserver/views/sales/sales_dashboard?:device=tablet |
:display_count (Tableau Public만 해당) |
yes | 왼쪽 아래에서 Tableau 로고를 클릭하면 총 페이지뷰 수가 표시됩니다. | https://public.tableau.com/en-us/s/gallery/what-emoji-say-about-music?:display_count=yes |
:embed | yes | 필수 URL 매개 변수입니다. 맨 위 탐색 영역을 숨겨 웹 페이지에 뷰 통합을 향상시킵니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes |
:format | pdf; png | 뷰를 PDF 또는 .png 파일로 표시합니다. | http://tabserver/views/Sales/Q2?:format=pdf |
:highdpi | false | 고해상도 디스플레이 및 기기를 위해 표준 DPI(Dots Per Inch)를 사용하여 뷰를 렌더링합니다. | http://tableauserver/views/Sales/Q2?:highdpi=false |
:linktarget | 문자열 | 외부 하이퍼링크에 대한 대상 창 이름입니다. 새창에서 동작이 실행됩니다. |
http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:linktarget=_blank |
:openid_hd | 문자열 | OpenID Connect로 인증할 때 사용됩니다. 사용자가 속한 호스팅된 도메인을 지정합니다. 예를 들어 도메인 선택 패널을 렌더링하지 않으려는 경우 이 옵션을 사용할 수 있습니다. :openid_login_hint와 함께 전체 사용자 식별자를 지정하는 데 사용됩니다. | http://tabserver/views/Sales/Q2?:openid_hd=example.com |
:openid_login_hint | 문자열 | OpenID Connect로 인증할 때 사용됩니다. 전체 사용자 식별자(이메일 주소)를 지정합니다. :openid_hd와 함께 사용자가 속한 호스팅된 도메인을 지정하는 데 사용됩니다. | http://tabserver/views/Sales/Q2?:openid_login_hint=tara@example.com |
:record_performance (Tableau Server에만 해당합니다. Tableau Cloud에는 적용할 수 없습니다.) |
yes | 뷰의 성능 기록을 시작합니다. 이 매개 변수를 URL 끝에 있는 세션 ID(:iid=<n>) 바로 앞에 추가합니다. 자세한 내용은 Tableau Server 도움말에서 성능 기록 만들기 (링크가 새 창에서 열림) 를 참조하십시오. |
http://tabserver/views/Sales2013/Regions?:recordperformance=yes |
:refresh | yes | Tableau Server 또는 Tableau Cloud의 최신 데이터를 사용하여 뷰를 렌더링합니다. 자세한 내용은 데이터 새로 고침 또는 자동 업데이트 일시 중지을 참조하십시오. 팁: 뷰를 지속적으로 새로 고치려면 웹 페이지의 <head> 섹션에 <meta http-equiv="refresh" content="#">을 추가합니다. 여기서 #은 새로 고침 간격(초)입니다. |
http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:refresh=yes |
:render | true; false; 숫자 | 클라이언트 쪽 렌더링이 사용으로 설정된 경우(기본값) 이 매개 변수를 false로 설정하면 세션에 대해 서버 쪽 렌더링을 사용하도록 설정됩니다. true로 설정하면 세션에 대해 클라이언트 쪽 렌더링이 강제 수행됩니다. 1에서 100까지의 숫자를 입력하여 복잡성 임계값을 설정할 수 있으며, 이 값을 넘으면 뷰가 서버에서 렌더링됩니다. 자세한 내용은 Tableau Server 도움말에서클라이언트 쪽 렌더링 정보 (링크가 새 창에서 열림) 를 참조하십시오. |
http://tabserver/views/Date-Time/DateCalcs?:render=false |
:revert | all; filters; sorts; axes; shelves | 항목을 원래 상태로 되돌립니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:revert=all |
:showAppBanner | false | 모바일 웹 브라우저에서 “Tableau Mobile에서 열기” 배너를 숨깁니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showAppBanner=false |
:showAskData | false | 내장된 뷰의 툴바에서 데이터에 질문 단추를 숨 깁니다. 기본적으로 데이터에 질문 단추가 표시됩니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showAskData=false |
:showShareOptions | true; false | 내장된 뷰에 공유 옵션을 표시할지 여부를 제어합니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showShareOptions=true |
:showVizHome (Tableau Public만 해당) |
yes; no | Tableau Public의 콘텐츠 탐색 인터페이스를 표시하거나 숨깁니다. 다른 웹 페이지에 비주얼리제이션을 내장할 경우 no로 설정하십시오. | https://public.tableau.com/en-us/s/gallery/what-emoji-say-about-music?:showVizHome=no |
:subscriptions | no | 내장된 뷰에서 구독 단추를 숨깁니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:subscriptions=no |
:tabs | yes; no | 탭을 표시하거나 숨깁니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:tabs=no |
:toolbar | yes; no; top | 이 매개 변수가 설정되지 않은 경우 기본적으로 아래쪽에 툴바가 표시됩니다. no인 경우 내장된 뷰에서 툴바가 제외됩니다. top인 경우 뷰 위쪽에 툴바가 배치됩니다. | http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:toolbar=no |
:tooltip | yes; no | 이 매개 변수가 설정되지 않은 경우 기본적으로 뷰에 도구 설명이 표시됩니다. no로 설정되어 있으면 내장된 뷰에서 도구 설명이 제외됩니다. | http://tabserver/views/workbookQ4/SalesQ4?:embed=yes&:tooltip=no |
2. Java Script 태그의 개체 매개변수
- Tableau JavaScript 사용: 선호되는 방식입니다. 직접 코드 작성을 위한 시작점으로 Tableau이 제공하는 내장 코드를 사용하여 툴바, 탭 등을 제어하는 개체 매개 변수를 추가하거나 편집합니다. Tableau JavaScript 파일 기반 기본 내장 코드만 다중 내장된 뷰의 로드 순서를 제어할 수 있습니다.
개체 매개 변수 | 값 | 설명 | 예 |
dataDetails | no | 툴바에서 뷰에 사용된 데이터의 세부 정보를 표시하는 데이터 세부 정보 단추를 숨깁니다. | <param name='dataDetails' value='no' /> |
showDataDetails | yes | Tableau Catalog가 사용되는 경우 데이터 세부 정보 패널이 열린 상태로 뷰가 표시됩니다. | <param name='showDataDetails' value='yes' /> |
alerts | no | 툴바에서 사용자가 데이터 기반 알림을 만들 수 있게 해 주는 알림 단추를 숨깁니다. | <param name='alerts' value='no'/> |
customViews | no | 툴바에서 사용자가 사용자 지정 뷰를 저장할 수 있게 해 주는 뷰 단추를 숨깁니다. | <param name='customViews' value='no'/> |
device | desktop; tablet; phone | 대시보드에 휴대기기를 위한 레이아웃이 있는 경우 화면 크기에 관계없이 특정 레이아웃을 표시합니다. 이 매개 변수가 설정되어 있지 않으면 Tableau Server 또는 Tableau Cloud에서 화면 크기를 감지하여 해당하는 레이아웃을 로드합니다. 예제에 대해서는 대시보드 내장을 참조하십시오. | <param name='device' value='phone'/> |
filter | 문자열 | 뷰가 열릴 때 표시되는 데이터를 필터링합니다. URL 매개 변수를 사용하여 필터링할 수도 있습니다. | <param name='filter' value='Team=Blue'/> |
host_url | 문자열 | 필수 항목입니다. URL에 나타나는 서버 이름입니다. | http://myserver.exampleco.com/'> <param name="host_url" value="http://localhost/"> |
linktarget | 문자열 | 외부 하이퍼링크에 대한 대상 창 이름입니다. | <param name="linktarget" value="_blank"/> |
load-order | 숫자 | 다중 뷰가 내장된 경우 페이지에서 뷰가 로드되는 순서를 결정합니다. 음수가 허용됩니다. | <param name="load-order" value="2"/> |
mobile | yes | 모바일 장치에 맞게 터치 방식에 최적화된 퀵 필터를 표시합니다. | <param name='mobile' value='yes'/> |
name | 문자열 | 이 구조에 필요한 개체 매개 변수: [workbook name]/[sheet name]/[optional custom view name] 선택적 사용자 지정 뷰 이름 형식: username@domain/[custom view name] Tableau Server 또는 Tableau Cloud URL을 참조하여 name의 값을 확인하는 경우 URL의 끝 부분에 있는 세션 ID(:iid=<n>)를 제외합니다. |
<param name='name' value='ExampleCoSales/Sales'/> <param name='name' value='ExampleCoSales/Sales/jsmith@example.com/EastRegionSales'/> |
:original_view | yes | name 변수가 통합 문서, 또는 이 매개 변수가 포함된 시트 URL을 참조하고 사용자 지정 뷰를 명시적으로 참조하지 않는 경우 해당 뷰를 원래 뷰로 표시합니다. | <param name='filter' value=':original_view=yes'/> |
path (Tableau Server에만 해당합니다. Tableau Cloud에는 적용할 수 없습니다.) |
문자열 | 신뢰할 수 있는 인증 전용인 경우 ticket 매개 변수와 함께 사용할 수 없습니다. name수의 값을 재정의하며, URL로 사용됩니다. 자세한 내용은 Tableau Server 관리자 도움말에서 티켓을 사용하여 뷰 표시 (링크가 새 창에서 열림) 를 참조하십시오. |
<param name='path' value='trusted/Etdpsm_Ew6rJY-9kRrALjauU/views/workbookQ4/SalesQ4'/> http://tableauserver/trusted/Etdpsm_Ew6rJY-9kRrALjauU/views/workbookQ4/SalesQ4?:embed=yes&:tabs=yes |
showShareOptions | true; false | 내장된 뷰에 공유 옵션을 표시할지 여부를 제어합니다. | <param name='showShareOptions' value='true' /> |
site_root | 문자열 | 필수 항목입니다. 사이트 이름입니다. 기본 사이트 값은 Null(value='')입니다. 서버가 다중 사이트 서버인 경우 신뢰할 수 있는 인증을 사용하려면 Tableau Server 도움말에서 티켓을 사용하여 뷰 표시 (링크가 새 창에서 열림) 를 참조하십시오. |
<param name='site_root' value='/#/Sales'/> <param name='site_root' value=''/> |
subscriptions | no | 툴바에서 사용자가 정기적인 간격으로 뷰의 스냅샷을 받기 위해 이메일 구독을 설정할 수 있게 해 주는 구독 단추를 숨깁니다. | <param name='subscriptions' value='no'/> |
tabs | yes; no | 탭을 표시하거나 숨깁니다. | <param name='tabs' value='yes'/> |
ticket (Tableau Server에만 해당합니다. Tableau Cloud에는 적용할 수 없습니다.) |
문자열 | 신뢰할 수 있는 인증 전용인 경우 path매개 변수와 함께 사용할 수 없습니다. 신뢰할 수 있는 티켓 상환 URL을 생성하려면 name 개체와 함께 사용해야 합니다. 자세한 내용은 Tableau Server 도움말에서 티켓을 사용하여 뷰 표시 (링크가 새 창에서 열림) 를 참조하십시오. |
<param name='ticket' value='9D1ObyqDQmSIOyQpKdy4Sw==:dg62gCsSE0QRArXNTOp6mlJ5'/> http://tableauserver/trusted/9D1ObyqDQmSIOyQpKdy4Sw==:dg62gCsSE0QRArXNTOp6mlJ5/views/workbookQ4/SalesQ4?:embed=yes&:tabs=yes |
toolbar | yes; no; top | 툴바는 기본적으로 아래쪽에 표시됩니다. 이 매개 변수를 top으로 설정하면 툴바가 뷰 위쪽에 배치되고 no로 설정하면 내장된 뷰에서 툴바가 제거됩니다. | <param name='toolbar' value='top'/> |
tooltip | yes; no | 도구 설명은 기본적으로 표시되지만 이 매개 변수를 no로 설정하면 내장된 뷰에서 도구 설명이 제거됩니다. | <param name='tooltip' value='no'/> |