Paramètres des boutons pour les tableaux de bord LookML

Les boutons ne sont compatibles qu'avec les tableaux de bord LookML présentant les paramètres suivants :

Cette page explique comment ajouter et personnaliser un élément de tableau de bord LookML de type 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 un lien vers du contenu Looker, comme 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 de 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 zone de vignette d'un élément de bouton. La hauteur est exprimée en nombre de lignes pour les tableaux de bord layout: newspaper.
width (pour les éléments) Définit la largeur de la zone de vignette d'un élément de bouton. La largeur est exprimée en unités de colonnes pour les tableaux de bord layout: newspaper.
row Définit la position verticale de la zone de vignette d'un élément de bouton en unités de lignes pour les tableaux de bord layout: newspaper
col Définit la position de gauche à droite de la zone de vignette d'un élément de bouton en unités de colonnes pour les tableaux de bord layout: newspaper
Paramètre du 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 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 zone de tuile d'un élément de bouton, et non au bouton lui-même.

name

Cette section fait référence au paramètre name qui fait partie d'un élément de tableau de bord.

name peut également être utilisé dans un filtre de tableau de bord, comme décrit sur la page de documentation Paramètres de tableau de bord.

Chaque déclaration name crée un élément du tableau de bord et lui attribue un nom. Les noms des éléments doivent être uniques.

La valeur name attribuée au bouton n'apparaîtra pas dans l'interface utilisateur du tableau de bord.

- name: orders_by_date

type

Cette section fait référence au paramètre type qui fait partie d'un élément de tableau de bord.

type peut également être utilisé dans un filtre de tableau de bord, comme décrit sur la page de documentation Paramètres de tableau de bord.

type peut également être utilisé dans le cadre d'une jointure, comme décrit sur la page de documentation du paramètre type (pour les jointures).

type peut également être utilisé dans une dimension, comme décrit sur la page de documentation Types de dimensions, de filtres et de paramètres.

type peut é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 | group

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 paramètre height qui fait partie d'un élément de tableau de bord.

height peut également être utilisé dans une ligne de tableau de bord, comme décrit sur la page de documentation Paramètres de tableau de bord.

Le paramètre height définit la hauteur de la zone de tuile d'un élément de bouton, en unités de ligne.

Par défaut, les cases des vignettes des éléments de bouton ont une hauteur de six lignes. La hauteur minimale est d'une ligne. La modification de la hauteur de l'é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 zone de tuile 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 paramètre width qui fait partie d'un élément de tableau de bord.

width peut également être utilisé dans un tableau de bord, comme décrit sur la page de documentation Paramètres de tableau de bord.

Le paramètre width définit la largeur de la zone de tuile d'un élément de bouton, en unités de colonnes.

Par défaut, la largeur de la case de la vignette d'un élément de bouton est de huit colonnes, ce qui correspond à un tiers de la largeur totale d'un tableau de bord. La largeur minimale de la zone de tuile d'un bouton est de 2.

Par exemple, le code suivant définit la zone de tuile 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
    ...

S'il y a de la place dans la zone de tuile d'un bouton, 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 est placé le bord supérieur de la zone de tuile d'un élément de bouton. Si le bouton est placé dans un groupe de tuiles à l'aide du paramètre group, row définit la position de la ligne du bouton par rapport au haut du conteneur du groupe (row: 0).

Un tableau de bord commence par la ligne 0 en haut du tableau de bord. Par défaut, les éléments de bouton du tableau de bord ont une hauteur de six lignes. Cela signifie que les éléments du tableau de bord situés en haut d'un tableau de bord (row: 0) occupent par défaut les lignes 0 à 5.

Dans l'exemple suivant, le code définit l'emplacement 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 à 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 est placé le bord gauche de la zone de tuile de l'élément de bouton. Si le bouton est placé dans un groupe de tuiles à l'aide du paramètre group, col définit la position de la colonne du bouton par rapport au bord gauche du conteneur du groupe (col: 0).

Les tableaux de bord sont divisés en 24 colonnes. Un tableau de bord commence par la colonne 0 à gauche du tableau de bord. Un tableau de bord avec une mise en page de type journal utilise par défaut une largeur d'élément de huit colonnes, ce qui signifie que les éléments du tableau de bord situés à gauche (col: 0) occupent par défaut les colonnes 0 à 7.

Par exemple, le code suivant définit un élément à placer 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 du 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 type: button.

rich_content_json

rich_content_json est un objet JSON contenant plusieurs paires clé/valeur qui définissent les caractéristiques du bouton du tableau de bord.

L'exemple d'utilisation suivant illustre 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'affichera sur le bouton dans l'UI du tableau de bord. La largeur du bouton sera adaptée à la taille du texte jusqu'à ce qu'il atteigne la limite définie par le paramètre width, auquel cas le texte sera tronqué.

description

description définit le texte qui s'affiche sous forme d'info-bulle lorsque vous pointez sur le bouton. Si aucune description n'est fournie, le lien indiqué dans href s'affiche par défaut.

newTab

newTab est une valeur booléenne qui définit 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 zone de tuile de l'élément de bouton. alignment a la valeur par défaut 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 zone de tuile 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 avec la couleur définie dans color. Le texte du bouton est blanc. Il s'agit de la valeur par défaut.
  • OUTLINED : le bouton est entouré d'un contour, mais son corps est transparent. La couleur du texte du bouton est définie par color.
  • TRANSPARENT : le corps du bouton est transparent. La couleur du texte du bouton est définie par color.

color

color définit la couleur du bouton ou du texte du bouton, en fonction du paramètre style. color utilise 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 formatées en tant que chaînes hexadécimales, telles que #2ca6cd, ou en tant que noms de couleur 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 redirigera les utilisateurs.

En savoir plus sur les tableaux de bord à onglets

href

href définit l'URL vers laquelle le bouton redirigera les utilisateurs. Les liens vers d'autres tableaux de bord Looker peuvent contenir des paramètres de filtre qui définissent des valeurs spécifiques pour les filtres du tableau de bord.