Les boutons ne sont compatibles qu'avec les tableaux de bord LookML qui présentent les paramètres suivants :
preferred_viewerdéfini surdashboards-nextlayoutdéfini surnewspaper
Cette page explique comment ajouter et personnaliser un élément de tableau de bord LookML de type: button avec des paramètres de tableau de bord LookML dans un fichier dashboard.lkml. Les boutons sont utiles pour placer des liens dans vos tableaux de bord. Vous pouvez créer des liens vers du contenu Looker, tel que des Looks et des tableaux de bord, ou vers d'autres sites Web.
Pour savoir comment ajouter des boutons à un tableau de bord via l'interface utilisateur Looker, consultez la page de documentation Créer des tableaux de bord définis par l'utilisateur.
Exemple d'utilisation
## 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"
}'
Définition des paramètres
| Nom du paramètre | Description | |
|---|---|---|
| Paramètres de base | ||
type (pour les éléments) |
Détermine le type de visualisation à utiliser dans l'élément | |
name (pour les éléments) |
Crée un élément | |
height (pour les éléments) |
Définit la hauteur de la case de la vignette d'un élément de bouton . La hauteur est exprimée en nombre de lignes pour les layout: newspaper tableaux de bord |
|
width (pour les éléments) |
Définit la largeur de la case de la vignette d'un élément de bouton . La largeur est exprimée en nombre de colonnes pour les layout: newspaper tableaux de bord. |
|
row |
Définit la position de haut en bas de la case de la vignette d'un élément de bouton en nombre de lignes pour les tableaux de bord layout: newspaper. |
|
col |
Définit la position de gauche à droite de la case de la vignette d'un élément de bouton en nombre de colonnes pour les tableaux de bord layout: newspaper. |
|
| Paramètre de bouton | ||
rich_content_json |
Objet JSON contenant des paires clé/valeur avec des informations sur le bouton | |
Paramètres de base
Lorsque vous définissez un élément de tableau de bord LookML de type: button, vous devez spécifier des valeurs pour au moins les paramètres name et type.
Les paramètres height, width, row et col s'appliquent à la case de la vignette d'un élément de bouton, et non au bouton lui-même.
name
Cette section fait référence au
nameparamètre qui fait partie d'un élément de tableau de bord.
namepeut également être utilisé dans un filtre de tableau de bord, comme décrit sur la page de documentation Paramètres du tableau de bord.
Chaque déclaration name crée un élément de tableau de bord et lui attribue un nom. Les noms des éléments doivent être uniques.
Le name attribué au bouton n'apparaît pas dans l'interface utilisateur du tableau de bord.
- name: orders_by_date
type
Cette section fait référence au
typeparamètre qui fait partie d'un élément de tableau de bord.
typepeut également être utilisé dans un filtre de tableau de bord, comme décrit sur la page de documentation Paramètres du tableau de bord.
typepeut également être utilisé dans une jointure, comme décrit sur la page de documentation du paramètretype(pour les jointures).
typepeut également être utilisé dans une dimension, comme décrit sur la page de documentation Types de dimensions, de filtres et de paramètres.
typepeut également être utilisé dans une mesure, comme décrit sur la page de documentation Types de mesures.
Le paramètre type détermine le type de visualisation à utiliser dans l'élément.
- 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
Consultez la page de documentation type (pour les tableaux de bord LookML) pour obtenir une présentation des différents types d'éléments de tableau de bord LookML.
height
Cette section fait référence au
heightparamètre qui fait partie d'un élément de tableau de bord.
heightpeut également être utilisé dans une ligne de tableau de bord, comme décrit sur la page de documentation Paramètres du tableau de bord.
Le paramètre height définit la hauteur de la case de la vignette d'un élément de bouton, en nombre de lignes.
Par défaut, la hauteur des cases de vignette des éléments de bouton est de six lignes. La hauteur minimale est d'une ligne. La modification de la hauteur d'un élément de bouton peut affecter d'autres éléments du tableau de bord, mais pas la hauteur du bouton lui-même.
Par exemple, le code suivant définit la hauteur de la case de la vignette du bouton sur 12 lignes :
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
height: 12
...
width
Cette section fait référence au
widthparamètre qui fait partie d'un élément de tableau de bord.
widthpeut également être utilisé dans un tableau de bord, comme décrit sur la page de documentation Paramètres du tableau de bord.
Le paramètre width définit la largeur de la case de la vignette d'un élément de bouton, en nombre de colonnes.
Par défaut, la largeur de la case de la vignette d'un élément de bouton est de huit colonnes, soit un tiers de la largeur totale d'un tableau de bord. La largeur minimale de la case de la vignette d'un bouton est de 2.
Par exemple, le code suivant définit la largeur de la case de la vignette d'un bouton sur la moitié de la largeur du tableau de bord :
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
width: 12
...
Si la case de la vignette d'un bouton est suffisamment large, la largeur du bouton augmente pour s'adapter à une longue chaîne de texte, définie dans text. Toutefois, la largeur du bouton ne dépassera pas la valeur définie dans le paramètre width. Si nécessaire, la chaîne définie dans text sera tronquée sur le bouton.
row
Le paramètre row définit la ligne sur laquelle le bord supérieur de la case de la vignette d'un élément de bouton est placé.
Un tableau de bord commence par la ligne 0 en haut du tableau de bord. Par défaut, la hauteur des éléments de bouton du tableau de bord est de six lignes, ce qui signifie que les éléments de tableau de bord en haut d'un tableau de bord (row: 0) occuperont par défaut les lignes 0 à 5.
Dans l'exemple suivant, le code définit la case de la vignette d'un bouton sur la deuxième ligne d'éléments du tableau de bord, en supposant que les éléments sont définis sur la hauteur par défaut :
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
row: 6
...
col
Le paramètre col définit la colonne sur laquelle le bord gauche de la case de la vignette de l'élément de bouton est placé.
Les tableaux de bord sont divisés en 24 colonnes. Un tableau de bord commence par la colonne 0 à gauche du tableau de bord. Par défaut, la largeur des éléments d'un tableau de bord disposé en journal est de huit colonnes, ce qui signifie que les éléments de tableau de bord à gauche d'un tableau de bord (col: 0) occuperont par défaut les colonnes 0 à 7.
Par exemple, le code suivant définit un élément dans la troisième colonne d'éléments du tableau de bord :
- dashboard: sales_overview
layout: newspaper
...
elements:
- name: orders_by_date
col: 16
...
Paramètre de bouton
Le paramètre décrit dans cette section peut être utilisé pour ajouter du contenu à un élément de tableau de bord LookML de type: button.
rich_content_json
rich_content_json est un objet JSON avec plusieurs paires clé/valeur qui définissent les caractéristiques du bouton du tableau de bord.
L'exemple d'utilisation suivant montre un bouton de tableau de bord qui permet d'accéder à un autre tableau de bord.
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"
}'
L'exemple d'utilisation suivant montre un bouton de tableau de bord qui permet d'accéder à un onglet du tableau de bord.
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 définit le texte qui s'affiche sur le bouton dans l'interface utilisateur du tableau de bord. La largeur du bouton augmente pour s'adapter au texte jusqu'à atteindre la limite définie par le paramètre width, après quoi le texte est tronqué.
description
description définit le texte qui s'affiche sous forme d'info-bulle lorsque vous pointez le curseur sur le bouton. Si aucune description n'est fournie, le lien fourni dans href s'affiche par défaut.
newTab
newTab est une valeur booléenne qui indique si le lien du bouton s'ouvre dans un nouvel onglet (true) ou dans l'onglet actuel (false). La valeur par défaut de newTab est true.
alignment
alignment définit l'alignement du bouton dans la case de la vignette de l'élément de bouton. La valeur par défaut de alignment est center.
taille
size définit la taille du bouton et de son texte sur small, medium ou large. La valeur de size n'affecte pas la taille de la case de la vignette de l'élément de bouton ni le paramètre height.
style
style définit le style du bouton sur l'une des valeurs suivantes :
FILLED: le corps du bouton est rempli par la couleur définie danscolor. Le texte du bouton est blanc. Il s'agit de la valeur par défaut.OUTLINED: le bouton a un contour, mais son corps est transparent. La couleur du texte du bouton est définie parcolor.TRANSPARENT: le corps du bouton est transparent. La couleur du texte du bouton est définie parcolor.
color
color définit la couleur du bouton ou du texte du bouton, en fonction du paramètre style. color correspond par défaut à la première couleur de la collection de couleurs catégorielles par défaut de l'instance Looker.
Les valeurs de couleur peuvent être mises en forme sous forme de chaînes hexadécimales, telles que #2ca6cd, ou sous forme de noms de couleurs CSS, tels que mediumblue.
targetTabName
Si votre tableau de bord comporte des onglets, targetTabName définit l'onglet du tableau de bord vers lequel le bouton redirige les utilisateurs.
En savoir plus sur les tableaux de bord à onglets.
href
href définit l'URL vers laquelle le bouton redirige les utilisateurs. Les liens vers d'autres tableaux de bord Looker peuvent contenir des paramètres de filtre qui définissent des filtres de tableau de bord sur des valeurs spécifiques.