LookML 資訊主頁的按鈕參數

只有符合下列設定的 LookML 資訊主頁支援按鈕:

本頁說明如何使用 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"
 }'

以下範例用法會顯示資訊主頁按鈕,可導向資訊主頁上的分頁。

rich_content_json: '{
 "text": "Go to Users tab",
 "description": "View user data from the last 18 months.",
 "newTab": false,
 "alignment": "center",
 "size": "medium",
 "style": "FILLED",
 "color": "forestgreen",
 "targetTabName":"Users"
 "href":""
 }'

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)。

targetTabName

如果資訊主頁有分頁,targetTabName 會將按鈕導向資訊主頁分頁。

進一步瞭解分頁式資訊主頁。

href

href 會設定按鈕將使用者帶往的網址。其他 Looker 資訊主頁的連結可以包含篩選器參數,將資訊主頁篩選器設為特定值。