ボタン パラメータを使用するには、Looker の管理者が ダッシュボードのカスタムボタン機能を有効にする必要があります。
ボタンは、次の設定を持つ 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 ダッシュボードの列単位で定義します |
|
Button パラメータ | ||
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
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/
を含める必要があります。