ボタンは、次の設定の 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
さまざまな種類の 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 パラメータは、ボタン要素のタイルボックスの上端が配置される行を定義します。
ダッシュボードは、ダッシュボードの上部にある行 0 から始まります。ダッシュボードのボタン要素のデフォルトの高さは 6 行です。つまり、ダッシュボードの上部にあるダッシュボード要素（row: 0）は、デフォルトで 0 ～ 5 行を占有します。
次の例では、要素がデフォルトの高さに設定されていると仮定して、ダッシュボードの 2 行目の要素にボタンのタイルボックスを配置するようにコードを設定しています。
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
row: 6
...
col
col パラメータは、ボタン要素のタイルボックスの左端が配置される列を定義します。
ダッシュボードは 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"
}'
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 のカラー名として書式設定できます。
href
href は、ボタンをクリックしたときにユーザーが移動する URL を設定します。他の Looker ダッシュボードへのリンクには、ダッシュボード フィルタを特定の値に設定するフィルタ パラメータを含めることができます。
埋め込みエクスペリエンスでは、ダッシュボードへのリンクの URL に
embed/が含まれている必要があります。