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 時,您必須至少為 nametype 參數指定值。

heightwidthrowcol 參數適用於按鈕元素的圖塊方塊,而非按鈕本身。

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 會將按鈕及其文字的大小設為 smallmediumlargesize 的值不會影響按鈕元素的圖塊方塊大小或 height 參數。

style

style 會將按鈕樣式設為下列其中一個值:

  • FILLED:按鈕主體會填入 color 中設定的顏色。按鈕文字為白色。這是預設值。
  • OUTLINED:按鈕邊緣有外框,但主體是透明的。按鈕文字的顏色是由 color 設定。
  • TRANSPARENT:按鈕主體為透明,按鈕文字的顏色是由 color 設定。

color

color 會根據 style 設定,設定按鈕或按鈕文字的顏色。color 預設為 Looker 執行個體預設類別顏色集合中的第一個顏色。

顏色值可以格式化為十六進位字串 (例如 #2ca6cd),或 CSS 顏色名稱 (例如 mediumblue)。

href

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

嵌入式體驗中,資訊主頁的連結網址應包含 embed/