Utilisation
view: view_name {
dimension: field_name {
html: <img src="https://www.brettcase.com/
product_images/{{ value }}.jpg"/> ;;
}
}
|
Hiérarchie
html |
Types de champs possibles
Dimension, groupe de dimensions, mesure
Acceptation
Expression HTML, utilisant éventuellement des éléments de modèle Liquid, suivie de deux points-virgules
|
Définition
Le paramètre html vous permet de spécifier le code HTML qui sera contenu dans un champ.
Vous pouvez également accéder aux valeurs qui se trouvent généralement dans le champ à l'aide des variables Liquid. Cela vous permet de créer un certain nombre de fonctions utiles, y compris des liens vers d'autres Looks connexes, des liens vers des sites Web externes ou des images.
La mise en forme HTML n'est rendue que dans les visualisations de graphique tableau, tableau (hérité) et valeur unique, ainsi que dans les info-bulles de visualisation lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique de carte avec le paramètre html ne sera pas accessible sur les tableaux de bord qui utilisent la nouvelle expérience de tableau de bord, mais il sera accessible sur les Looks, les explorations et les anciens tableaux de bord.
Lors du téléchargement de contenu, la mise en forme HTML n'est pas appliquée aux formats de téléchargement basés sur du texte, tels que TXT, CSV, Excel ou JSON.
Utiliser un code HTML valide
Afin d'éviter certaines failles de sécurité, Looker limite les balises et attributs HTML qui peuvent être utilisés, ainsi que les propriétés CSS. Pour en savoir plus, consultez la page de documentation sur la désinfection HTML.
Variables Liquid
Le paramètre html est compatible avec les variables Liquid. Pour savoir comment tirer pleinement parti de ces variables, consultez la page de documentation sur les variables Liquid.
Exemples
Voici quelques exemples d'utilisation du paramètre de champ html.
La mise en forme HTML n'est rendue que dans les visualisations de tableau et de graphique à valeur unique, ainsi que dans les info-bulles de visualisation lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique de carte avec le paramètre
htmlne sera pas accessible sur les tableaux de bord, mais il sera accessible sur les Looks et les explorations.
D'autres exemples d'utilisation du code HTML pour personnaliser la police et les couleurs des valeurs de champ dans les visualisations sont disponibles sur les pages Personnalisation de la mise en forme conditionnelle et Personnalisation des info-bulles de visualisation du livre de recettes "Tirer le meilleur parti des visualisations dans Looker".
Utiliser des variables Liquid dans le paramètre html
Cet exemple montre comment la plupart des variables Liquid s'affichent dans un paramètre html. Prenons l'exemple d'une définition total_order_amount :
measure: total_order_amount {
type: sum
sql: ${order_amount} ;;
value_format: "0.00"
html:
<ul>
<li> value: {{ value }} </li>
<li> rendered_value: {{ rendered_value }} </li>
<li> linked_value: {{ linked_value }} </li>
<li> link: {{ link }} </li>
<li> model: {{ _model._name }} </li>
<li> view: {{ _view._name }} </li>
<li> explore: {{ _explore._name }} </li>
<li> field: {{ _field._name }} </li>
<li> dialect: {{ _dialect._name }} </li>
<li> access filter: {{ _access_filters['company.name'] }} </li>
<li> user attribute: {{ _user_attributes['region'] }} </li>
<li> query timezone: {{ _query._query_timezone }} </li>
<li> filters: {{ _filters['order.total_order_amount'] }} </li>
</ul> ;;
}
La valeur de cellule affichée pour total_order_amount se présente comme suit :
• value: 8521935 • rendered_value: 8,521,935.00 • linked_value: 8,521,935.00 • link: /explore/thelook/orders?fields=orders.order_amount&limit=500 • model: thelook • view: orders • explore: order_items • field: total_order_amount • dialect: mysql • access filter: altostrat.com • user attribute: northeast • query timezone: America/Los_Angeles • filters: NOT NULL
Mettre en forme une mesure de manière conditionnelle
Mettez en forme un décompte de manière conditionnelle en fonction de ses valeurs :
measure: formatted_count {
type: count
html:
{% if value > 100 %}
<span style="color:darkgreen;">{{ rendered_value }}</span>
{% elsif value > 50 %}
<span style="color:goldenrod;">{{ rendered_value }}</span>
{% else %}
<span style="color:darkred;">{{ rendered_value }}</span>
{% endif %} ;;
}
Explorer des données avec le paramètre html
La mise en forme HTML n'est rendue que dans les visualisations de graphique tableau, tableau (hérité) et valeur unique, ainsi que dans les info-bulles de visualisation lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique de carte avec le paramètre
htmlne sera pas accessible sur les tableaux de bord qui utilisent la nouvelle expérience de tableau de bord, mais il sera accessible sur les Looks, les explorations et les anciens tableaux de bord.
Supposons que vous ayez un champ dans vos données appelé status, qui indique l'état de chaque commande. Les valeurs possibles pour status sont les suivantes :
PaidShippedReturned
Lorsque vous explorez vos données, vous pouvez souhaiter avoir une couleur d'arrière-plan distincte pour chaque état. Pour ce faire, vous pouvez utiliser le code HTML Liquid dans le paramètre html: d'une dimension. Voici un exemple :
dimension: status {
sql: ${TABLE}.status ;;
html: {% if value == 'Paid' %}
<p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% elsif value == 'Shipped' %}
<p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% else %}
<p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% endif %}
;;
}
Dans votre tableau, la couleur d'arrière-plan de chaque cellule varie en fonction de la valeur du champ status. La couleur d'arrière-plan est bleu clair lorsque la valeur est Paid, vert clair lorsqu'elle est Shipped et orange dans tous les autres cas. Par exemple, si votre tableau contient la valeur Returned, cette cellule aura un arrière-plan orange.
Vous pouvez utiliser la même syntaxe pour ajouter des icônes ou des images en fonction des valeurs des cellules :
dimension: status {
sql: ${TABLE}.status ;;
html: {% if value == 'Shipped' or value == 'Complete' %}
<p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% elsif value == 'Processing' %}
<p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% else %}
<p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
{% endif %}
;;
}
Dans votre tableau, cela se présente comme suit :
| État des articles de la commande | Nombre d'articles de la commande |
|---|---|
 Annulé |
6 316 |
 Terminé |
232 791 |
 Traitement |
809 |
| Retourné |
2 354 |
| Expédié |
1 474 |
Générer des images de produits
Voici un exemple d'ajout de l'image d'un produit dans Looker à l'aide d'une balise <img>, en fonction de l'ID du produit :
dimension: product_image {
sql: ${product_id} ;;
html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}
Conserver les liens d'exploration
Pour conserver les liens d'exploration lorsque vous mettez en forme la sortie à l'aide du paramètre html, vous pouvez inclure la balise HTML <a href="#drillmenu" target="_self">. Exemple :
measure: count {
type: count
drill_fields: [detail*]
html:
<a href="#drillmenu" target="_self">
{% if value > 10000 %}
<span style="color:#42a338;">{{ rendered_value }}</span>
{% elsif value > 5000 %}
<span style="color:#ffb92e;">{{ rendered_value }}</span>
{% else %}
<span style="color:#fa4444;">{{ rendered_value }}</span>
{% endif %}
</a>;;
}