html

Utilizzo

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
Gerarchia
view
Tipo di campo
html
Tipi di campi disponibili
Dimensione, gruppo di dimensioni, misura

Accetta
Un'espressione HTML, che può utilizzare elementi di template 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 di tabelle, tabelle (legacy) e grafici a valore singolo e nelle descrizioni comando delle visualizzazioni quando vengono combinati più campi. I contenuti interattivi inseriti nella descrizione comando di un grafico a mappa con il parametro html non saranno accessibili nelle dashboard che utilizzano la nuova esperienza dashboard, ma saranno accessibili in Look, Esplora 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 HTML valido

Per evitare determinati exploit di sicurezza, Looker limita i tag e gli attributi HTML 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.

La formattazione HTML viene visualizzata solo nelle visualizzazioni di tabelle e grafici a valore singolo e nelle descrizioni comando delle visualizzazioni quando vengono combinati più campi. I contenuti interattivi inseriti nella descrizione comando di un grafico a mappa con il parametro html non saranno accessibili nelle dashboard, ma saranno accessibili in Look ed Esplora.

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 della descrizione comando della visualizzazione del ricettario Ottenere il massimo dalle visualizzazioni in Looker.

Utilizzo delle variabili Liquid nel parametro html

Questo esempio mostra come la maggior parte delle variabili Liquid apparirebbe in un parametro html. Considera una definizione 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

Formattazione condizionale di una misura

Formatta condizionalmente 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 di tabelle, tabelle (legacy) e grafici a valore singolo e nelle descrizioni comando delle visualizzazioni quando vengono combinati più campi. I contenuti interattivi inseriti nella descrizione comando di un grafico a mappa con il parametro html non saranno accessibili nelle dashboard che utilizzano la nuova esperienza dashboard, ma saranno accessibili in Look, Esplora e dashboard legacy.

Supponiamo di avere un campo nei dati denominato status, che indica lo stato di ogni ordine. I valori possibili per status sono:

  • Paid
  • Shipped
  • Returned

Durante l'esplorazione dei dati, potresti voler avere un colore di sfondo diverso per ogni stato. Questa operazione può essere eseguita utilizzando Liquid HTML nel parametro html: di una dimensione. Il risultato sarà 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 a seconda del valore del campo status. Il colore di sfondo sarà blu chiaro quando il valore è Paid, verde chiaro quando è Shipped e arancione quando il valore è qualsiasi altro. Ad esempio, se la tabella contiene un valore Returned, 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, il risultato sarà il seguente:

Stato degli articoli ordinati Conteggio degli articoli ordinati
Icona Annullato.Cancellato 6.316
Icona Completa.Completato 232.791
Icona di elaborazione.In elaborazione 809
Icona Annullato.Restituito 2.354
Icona Completa.Spedito 1.474

Generazione di immagini dei prodotti

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" /> ;;
}

Per mantenere i link di visualizzazione in dettaglio 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>;;
}