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, éventuellement à l'aide d'é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 ne s'affiche que dans les visualisations de tableaux, de tableaux (anciens) et de valeurs uniques, ainsi que dans les info-bulles des visualisations lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique cartographique avec le paramètre html ne sera pas accessible dans les tableaux de bord qui utilisent la nouvelle expérience d'utilisation des tableaux de bord, mais il le sera dans les Looks, les Explorations et les anciens tableaux de bord.
Lorsque vous téléchargez du 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
Pour éviter certaines failles de sécurité, Looker limite les balises et attributs HTML, ainsi que les propriétés CSS qui peuvent être utilisés. Pour en savoir plus, consultez notre page de documentation sur la désinfection du code HTML.
Variables Liquid
Le paramètre html est compatible avec les variables Liquid. Pour savoir comment exploiter pleinement 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 ne s'affiche que dans les visualisations de tableaux et de valeurs uniques, ainsi que dans les info-bulles des visualisations lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique cartographique avec le paramètre
htmlne sera pas accessible dans les tableaux de bord, mais le sera dans 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 de l'info-bulle de visualisation du cookbook Exploiter tout le potentiel des visualisations dans Looker.
Utiliser des variables Liquid dans le paramètre html
Cet exemple montre comment la plupart des variables Liquid s'afficheraient 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 ressemblerait à ceci :
• 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 nombre 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 les données avec le paramètre html
La mise en forme HTML ne s'affiche que dans les visualisations de tableaux, de tableaux (anciens) et de valeurs uniques, ainsi que dans les info-bulles des visualisations lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique cartographique avec le paramètre
htmlne sera pas accessible dans les tableaux de bord qui utilisent la nouvelle expérience d'utilisation des tableaux de bord, mais il le sera dans les Looks, les Explorations et les anciens tableaux de bord.
Imaginez que vous disposez d'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 attribuer une couleur de fond distincte à chaque état. Pour ce faire, utilisez 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 de fond de chaque cellule varie en fonction de la valeur du champ status. La couleur de l'arrière-plan sera bleu clair lorsque la valeur est Paid (Payé), vert clair lorsqu'elle est Shipped (Expédié) et orange pour toute autre valeur. Par exemple, si votre tableau contient la valeur Renvoyé, la cellule correspondante 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ésentera comme suit :
| État des articles de la commande | Nombre d'articles de la commande |
|---|---|
 Annulée |
6 316 |
 Terminée |
232 791 |
 Traitement en cours |
809 |
| Rendus |
2 354 |
| Expédiée |
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" /> ;;
}
Maintenir les liens vers les vues détaillées
Pour conserver les liens Afficher le détail lorsque vous mettez en forme les résultats à 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>;;
}