按鈕僅適用於採用下列設定的 LookML 資訊主頁:
- 「
preferred_viewer」已設為「dashboards-next」 - 「
layout」已設為「newspaper」
本頁說明如何使用 dashboard.lkml 檔案中的 LookML 資訊主頁參數,新增及自訂 type: button 的 LookML 資訊主頁元素。按鈕可用於在資訊主頁中放置連結。您可以連結至 Looker 內容 (例如 Look 和資訊主頁),或是其他網站。
如要瞭解如何透過 Looker 使用者介面將按鈕新增至資訊主頁,請參閱「建立使用者定義的資訊主頁」說明文件頁面。
應用實例
## BASIC PARAMETERS
type: button
name: text
height: N
width: N
row: N
col: N
## BUTTON PARAMETER
rich_content_json: '{
"text": "button text",
"description": "description",
"newTab": true | false,
"alignment": "left" | "right" | "center",
"size": "small" | "medium" | "large",
"style": "OUTLINED" | "FILLED" | "TRANSPARENT",
"color": "hex string or css color",
"href": "link"
}'
參數定義
| 參數名稱 | 說明 | |
|---|---|---|
| 基本參數 | ||
type (適用於元素) |
決定要在元素中使用的圖表類型 | |
name (適用於元素) |
建立元素 | |
height (適用於元素) |
定義按鈕元素圖塊方塊的高度。layout: newspaper 資訊主頁的高度是以列為單位 |
|
width (適用於元素) |
定義按鈕元素圖塊方塊的寬度。寬度是以 layout: newspaper 資訊主頁的欄為單位 |
|
row |
定義按鈕元素圖塊方塊在layout: newspaper資訊主頁中的上下位置,以列為單位 |
|
col |
定義按鈕元素在 layout: newspaper 資訊主頁中資訊方塊的左右位置,以欄為單位 |
|
| 按鈕參數 | ||
rich_content_json |
包含鍵/值組合的 JSON 物件,內含按鈕相關資訊。 | |
基本參數
定義 LookML 資訊主頁元素 type: button 時,您必須至少為 name 和 type 參數指定值。
height、width、row 和 col 參數適用於按鈕元素的圖塊方塊,而非按鈕本身。
name
本節是指屬於資訊主頁元素的
name參數。
name也可做為資訊主頁篩選器的一部分,詳情請參閱「資訊主頁參數」說明文件頁面。
每個 name 宣告都會建立新的資訊主頁元素,並指派名稱。元素名稱不得重複。
按鈕的 name 不會顯示在資訊主頁使用者介面中。
- name: orders_by_date
type
本節是指屬於資訊主頁元素的
type參數。
type也可做為資訊主頁篩選器的一部分,詳情請參閱「資訊主頁參數」說明文件頁面。
type也可做為聯結的一部分,詳情請參閱type(適用於聯結) 參數說明文件頁面。
type也可做為維度的一部分,詳情請參閱「維度、篩選器和參數類型」說明文件頁面。
type也可以做為測量值的一部分,詳情請參閱「測量類型」說明文件頁面。
type 參數會決定元素中使用的圖表類型。
- name: element_name
type: text | looker_grid | table | single_value | looker_single_record |
looker_column | looker_bar | looker_scatter | looker_line | looker_area |
looker_pie | looker_donut_multiples | looker_funnel | looker_timeline |
looker_map | looker_geo_coordinates | looker_geo_choropleth | looker_waterfall |
looker_wordcloud | looker_boxplot | button
如要瞭解不同類型的 LookML 資訊主頁元素,請參閱 type (適用於 LookML 資訊主頁) 說明文件頁面。
height
本節是指屬於資訊主頁元素的
height參數。
height也可做為資訊主頁列的一部分,詳情請參閱「資訊主頁參數」說明文件頁面。
height 參數會以「列」為單位,定義按鈕元素圖塊方塊的高度。
按鈕元素資訊方塊預設高度為 6 列。高度下限為 1 列。變更按鈕元素的高度可能會影響資訊主頁上的其他元素,但不會影響按鈕本身的高度。
舉例來說,下列程式碼會將按鈕的圖塊方塊設為 12 列高:
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
height: 12
...
width
本節是指屬於資訊主頁元素的
width參數。
width也可做為資訊主頁的一部分,詳情請參閱「資訊主頁參數」說明文件頁面。
width 參數會以欄為單位,定義按鈕元素圖塊方塊的寬度。
按鈕元素圖塊方塊的寬度預設為 8 欄,也就是資訊主頁完整寬度的三分之一。按鈕圖塊方塊的最小寬度為 2。
舉例來說,下列程式碼會將按鈕的圖塊方塊設為資訊主頁寬度的一半:
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
width: 12
...
如果按鈕的圖塊方塊內有空間,按鈕寬度就會增加,以容納 text 中定義的長字串。不過,按鈕寬度不會超過 width 參數中設定的值;如有需要,按鈕上會截斷 text 中定義的字串。
row
row 參數會定義按鈕元素圖塊方塊頂端邊緣所在的列。
資訊主頁的第 0 列位於頂端,資訊主頁按鈕元素預設為 6 列的高度,也就是說,資訊主頁頂端的資訊主頁元素 (row: 0) 預設會佔用第 0 到第 5 列。
在下列範例中,程式碼會將按鈕的圖塊方塊設為放置在資訊主頁的第二列元素上,假設元素設為預設高度:
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
row: 6
...
col
col 參數會定義按鈕元素圖塊方塊左側邊緣所在的欄。
資訊主頁會分成 24 欄,資訊主頁的左側是第 0 欄。採用報紙版面配置的資訊主頁預設元素寬度為 8 欄,也就是說,資訊主頁左側的資訊主頁元素 (col: 0) 預設會佔用第 0 到第 7 欄。
舉例來說,下列程式碼會將元素設為資訊主頁中第三欄的元素:
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
col: 16
...
按鈕參數
本節所述的參數可用於將內容新增至 type: button 的 LookML 資訊主頁元素。
rich_content_json
rich_content_json 是 JSON 物件,包含多個鍵/值組合,用於定義資訊主頁按鈕的特徵。
rich_content_json: '{
"text": "Go to Sales Dashboard",
"description": "View sales from the last 18 months.",
"newTab": true,
"alignment": "center",
"size": "medium",
"style": "FILLED",
"color": "forestgreen",
"href":"https://instance_name.looker.com/dashboards/152?State=California&Created+Fiscal+Quarter=2022"
}'
text
text 會定義資訊主頁 UI 中按鈕上顯示的文字。按鈕會擴展寬度以容納文字,直到達到 width 參數設定的限制為止,此時文字會遭到截斷。
description
description 會定義文字,當游標懸停在按鈕上時,文字會顯示為彈出式工具提示。如未提供說明,系統會預設顯示 href 中提供的連結。
newTab
newTab 是布林值,用於定義按鈕連結是否在新分頁中開啟 (true),或在目前分頁中開啟 (false)。newTab 預設為 true。
alignment
alignment 會設定按鈕在按鈕元素圖塊方塊中的對齊方式。alignment 預設為 center。
大小
size 會將按鈕及其文字的大小設為 small、medium 或 large。size 的值不會影響按鈕元素的圖塊方塊大小或 height 參數。
style
style 會將按鈕樣式設為下列其中一個值:
FILLED:按鈕主體會填入color中設定的顏色。按鈕文字為白色。這是預設值。OUTLINED:按鈕邊緣有外框,但主體是透明的。按鈕文字的顏色是由color設定。TRANSPARENT:按鈕主體為透明,按鈕文字的顏色是由color設定。
color
color 會根據 style 設定,設定按鈕或按鈕文字的顏色。color 預設為 Looker 執行個體預設類別顏色集合中的第一個顏色。
顏色值可以格式化為十六進位字串 (例如 #2ca6cd),或 CSS 顏色名稱 (例如 mediumblue)。
href
href 會設定按鈕將使用者帶往的網址。其他 Looker 資訊主頁的連結可以包含篩選器參數,將資訊主頁篩選器設為特定值。
在嵌入式體驗中,資訊主頁的連結網址應包含
embed/。