Utilizzo
view: view_name {
dimension: field_name {
html: <img src="https://www.brettcase.com/
product_images/{{ value }}.jpg"/> ;;
}
}
|
Gerarchia
html |
Tipi di campi disponibili
Dimensione, gruppo di dimensioni, misura
Accetta
Un'espressione HTML, che potrebbe utilizzare elementi del modello Liquid, seguita da due punti e virgola
|
Definizione
Il parametro html consente di specificare l'HTML che verrà contenuto in un campo.
Puoi anche accedere ai valori che in genere si trovano nel campo utilizzando le variabili Liquid. In questo modo puoi creare una serie di funzioni utili, tra cui link ad altri Look correlati, link a siti web esterni o immagini.
La formattazione HTML viene visualizzata solo nelle visualizzazioni dei grafici tabella, tabella (legacy), KPI (valore singolo) e valore singolo (legacy) e nei tooltip di visualizzazione quando vengono combinati più campi. I contenuti interattivi inseriti nel tooltip di un grafico a mappa con il parametro html non saranno accessibili nelle dashboard che utilizzano la nuova esperienza dashboard, anche se saranno accessibili in Look, Explore e dashboard legacy.
Quando scarichi i contenuti, la formattazione HTML non viene applicata ai formati di download basati su testo, come TXT, CSV, Excel o JSON.
Utilizzo di codice HTML valido
Per impedire determinati exploit di sicurezza, Looker limita i tag HTML e gli attributi che possono essere utilizzati, nonché le proprietà CSS che possono essere utilizzate. Per ulteriori dettagli, consulta la pagina della documentazione Sanificazione HTML.
Variabili Liquid
Il parametro html supporta le variabili Liquid. Per informazioni su come utilizzare al meglio queste variabili, consulta la pagina della documentazione Variabili Liquid.
Esempi
Ecco alcuni esempi di utilizzo del parametro del campo html.
Altri esempi di come utilizzare l'HTML per personalizzare il carattere e i colori dei valori dei campi nelle visualizzazioni sono disponibili nella pagina Personalizzazione della formattazione condizionale e nella pagina Personalizzazione dei tooltip di visualizzazione del cookbook Sfruttare al meglio le visualizzazioni in Looker.
Utilizzo delle variabili Liquid nel parametro html
Questo esempio mostra come apparirebbe la maggior parte delle variabili Liquid in un parametro html. Prendi in considerazione una definizione di 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> ;;
}
Il valore della cella visualizzato per total_order_amount sarà simile al seguente:
• 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
Formattare una misura in modo condizionale
Formatta in modo condizionale un conteggio in base ai relativi valori:
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 %} ;;
}
Esplorazione dei dati con il parametro html
La formattazione HTML viene visualizzata solo nelle visualizzazioni dei grafici tabella, tabella (legacy) e KPI (valore singolo) e nei tooltip di visualizzazione quando vengono combinati più campi. I contenuti interattivi inseriti nel tooltip di un grafico a mappa con il parametro
htmlnon saranno accessibili nelle dashboard che utilizzano la nuova esperienza dashboard, anche se saranno accessibili in Look, Explore e dashboard legacy.
Immagina di avere un campo nei dati chiamato status, che indica lo stato di ogni ordine. I valori possibili per status sono:
PaidShippedReturned
Durante l'esplorazione dei dati, potresti voler utilizzare un colore di sfondo separato per ogni stato. Puoi farlo utilizzando il codice HTML Liquid nel parametro html: di una dimensione. Il risultato sarebbe simile al seguente:
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 %}
;;
}
Nella tabella, il colore di sfondo di ogni cella varia in base al valore del campo status. Il colore di sfondo sarà azzurro quando il valore è Paid, verde chiaro quando è Shipped e arancione quando il valore è qualsiasi altro. Ad esempio, se la tabella contiene un valore Restituito, la cella avrà uno sfondo arancione.
Puoi utilizzare la stessa sintassi per aggiungere icone o immagini in base ai valori delle celle:
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 %}
;;
}
Nella tabella, l'aspetto sarà il seguente:
| Stato degli articoli dell'ordine | Conteggio elementi dell'ordine |
|---|---|
 Annullato |
6316 |
 Completata |
232.791 |
 Elaborazione in corso… |
809 |
| Restituito |
2354 |
| Spedito |
1474 |
Generazione di immagini prodotto
Ecco un esempio di come aggiungere l'immagine di un prodotto in Looker utilizzando un tag <img>, in base all'ID del prodotto:
dimension: product_image {
sql: ${product_id} ;;
html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}
Mantenimento dei link di visualizzazione in dettaglio
Per mantenere i link di drill-down quando formatti l'output utilizzando il parametro html, puoi includere il tag HTML <a href="#drillmenu" target="_self">. Ad esempio:
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>;;
}