html

Utilizzo

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}

Gerarchia Visualizza file view Tipo di campo html

Tipi di campi possibili 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 il codice 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) e valore singolo e nelle descrizioni comando della visualizzazione quando vengono combinati più campi. Qualsiasi contenuto interattivo inserito nella descrizione comando di un grafico a mappa con il parametro html non sarà accessibile nelle dashboard che utilizzano la nuova esperienza dashboard, anche se sarà accessibile in Look, Esplorazioni e dashboard legacy.

Quando scarichi 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 evitare determinati exploit di sicurezza, Looker limita i tag e gli attributi HTML che possono essere utilizzati, nonché le proprietà CSS. Per ulteriori dettagli, consulta la pagina della documentazione relativa alla 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 grafici tabellari e a valore singolo e nelle descrizioni comando delle visualizzazioni quando vengono combinati più campi. Qualsiasi contenuto interattivo inserito nella descrizione comando di un grafico a mappa con il parametro html non sarà accessibile nelle dashboard, anche se sarà accessibile in Look ed esplorazioni.

Altri esempi di come utilizzare l'HTML per personalizzare il carattere e i colori dei valori dei campi nelle visualizzazioni sono disponibili nelle pagine Personalizzazione della formattazione condizionale e Personalizzazione della descrizione comando della visualizzazione del manuale Ottenere il massimo dalle visualizzazioni in Looker.

Utilizzo delle variabili Liquid nel parametro html

Questo esempio mostra come apparirebbero 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 valore singolo e nelle descrizioni comando della visualizzazione quando vengono combinati più campi. Qualsiasi contenuto interattivo inserito nella descrizione comando di un grafico a mappa con il parametro html non sarà accessibile nelle dashboard che utilizzano la nuova esperienza dashboard, anche se sarà accessibile in Look, Esplorazioni e dashboard legacy.

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

• Paid
• Shipped
• Returned

Durante l'esplorazione dei dati, potresti voler assegnare un colore di sfondo diverso a ogni stato. Questa operazione può essere eseguita utilizzando il codice HTML Liquid nel parametro html: di una dimensione. Il risultato sarà simile a questo:

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à azzurro chiaro quando il valore è Pagato, verde chiaro quando è Spedito e arancione per tutti gli altri valori. Ad esempio, se la tabella contiene il 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, questo aspetto sarà simile al seguente:

Stato degli articoli dell'ordine	Conteggio articoli dell'ordine
Annullato	6316
Completato	232.791
Elaborazione in corso	809
Restituito	2354
Spedito	1474

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

Mantenere i link di visualizzazione in dettaglio

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