ボタンは、次の設定の LookML ダッシュボードでのみサポートされています。
preferred_viewerをdashboards-nextに設定layoutをnewspaperに設定
このページでは、dashboard.lkml ファイルの LookML ダッシュボード パラメータを使用して、type: button の LookML ダッシュボードの要素を追加してカスタマイズする方法について説明します。ボタンは、ダッシュボード内にリンクを配置するのに便利です。Look やダッシュボードなどの Looker コンテンツや、他のウェブサイトにリンクできます。
Looker UI を使用してダッシュボードにボタンを追加する方法については、ユーザー定義のダッシュボードの作成のドキュメント ページをご覧ください。
使用例
## 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 |
ボタンに関する情報を含む Key-Value ペアを含む JSON オブジェクト。 | |
基本パラメータ
type: button の LookML ダッシュボードの要素を定義する場合は、少なくとも name パラメータと type パラメータの値を指定する必要があります。
height、width、row、col の各パラメータは、ボタン自体ではなく、ボタン要素のタイルボックスに適用されます。
name
このセクションでは、ダッシュボードの要素の一部である
nameパラメータについて説明します。
nameは、ダッシュボード パラメータのドキュメント ページで説明されているように、ダッシュボード フィルタの一部として使用することもできます。
name 宣言ごとに、新しいダッシュボードの要素が作成され、名前が割り当てられます。要素名は一意である必要があります。
ボタンに指定された name は、ダッシュボード UI に表示されません。
- 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 | group
さまざまなタイプの 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 列（ダッシュボードの全幅の 3 分の 1）です。ボタンのタイルボックスの最小幅は 2 です。
たとえば、次のコードは、ボタンのタイルボックスをダッシュボードの幅の半分に設定します。
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
width: 12
...
ボタンのタイルボックス内にスペースがある場合、ボタンの幅は、text で定義されている長いテキスト文字列に合わせて広がります。ただし、ボタンの幅は width パラメータで設定された値を超えて増加することはありません。必要に応じて、text で定義された文字列がボタン上で切り捨てられます。
row
row パラメータは、ボタン要素のタイルボックスの上端が配置される行を定義します。group パラメータを使用してボタンがタイルグループ内に配置されている場合、row は、グループ コンテナの上部（row: 0）を基準としたボタンの行位置を定義します。
ダッシュボードは、ダッシュボードの上部にある行 0 から始まります。ダッシュボード ボタン要素のデフォルトの高さは 6 行です。つまり、ダッシュボードの上部にあるダッシュボードの要素（row: 0）は、デフォルトで 0 ～ 5 行目を占有します。
次の例では、要素がデフォルトの高さに設定されていると仮定して、ボタンのタイルボックスをダッシュボードの要素の 2 行目に配置するようにコードを設定しています。
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
row: 6
...
col
col パラメータは、ボタン要素のタイルボックスの左端が配置される列を定義します。group パラメータを使用してボタンがタイルグループ内に配置されている場合、col は、グループ コンテナの左端（col: 0）を基準としたボタンの列位置を定義します。
ダッシュボードは 24 列に分割されています。ダッシュボードは、ダッシュボードの左側の列 0 から始まります。新聞レイアウトのダッシュボードでは、ダッシュボードの要素の幅がデフォルトで 8 列になります。つまり、ダッシュボードの左側にあるダッシュボードの要素（col: 0）は、デフォルトで 0 ～ 7 列を占有します。
たとえば、次のコードは、ダッシュボードの要素の 3 番目の列に設定される要素を設定します。
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
col: 16
...
ボタン パラメータ
このセクションで説明するパラメータを使用すると、type: button の LookML ダッシュボード要素にコンテンツを追加できます。
rich_content_json
rich_content_json は、ダッシュボード ボタンの特性を定義する複数の Key-Value ペアを含む 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 などの 16 進数文字列、または mediumblue などの CSS のカラー名として書式設定できます。
targetTabName
ダッシュボードにタブがある場合、targetTabName は、ボタンをクリックしたユーザーを移動させるダッシュボード タブを設定します。
タブ付きダッシュボードの詳細を確認する。
href
href は、ボタンをクリックしたユーザーを誘導する URL を設定します。他の Looker ダッシュボードへのリンクには、ダッシュボード フィルタを特定の値に設定するフィルタ パラメータを含めることができます。