Creare un'immagine della dashboard dinamica con Liquid e HTML

Puoi aggiungere immagini alle dashboard di Looker codificando un URL immagine in un riquadro di testo Markdown. Tuttavia, le immagini nei riquadri di testo sono statiche e non vengono aggiornate in base ai risultati. Cosa succede se vuoi che l'immagine di una dashboard cambi in modo dinamico in base a un valore del filtro selezionato dall'utente?

Questa pagina delle best practice mostra come ottenere un'immagine dinamica della dashboard utilizzando Liquid e il parametro html.

La soluzione

La seguente soluzione si basa su un set di dati e-commerce che include un campo denominato users.state, che rappresenta gli stati in un ipotetico set di dati e-commerce: 

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

Supponiamo che tu voglia visualizzare l'immagine della bandiera di uno stato in una dashboard che si aggiornerà in base allo stato in base al quale un utente sceglie di filtrare i risultati della dashboard.

Per creare l'immagine della dashboard dinamica, devi completare tre passaggi:

  1. Crea una dimensione immagine in LookML.
  2. Crea un riquadro della dashboard con immagini dinamiche.
  3. Aggiungi filtri alla dashboard e gli ultimi ritocchi.

Passaggio 1: crea una dimensione immagine in LookML

Per creare una dimensione immagine in LookML:

  1. Per prima cosa, vai al progetto e visualizza il file contenente la dimensione a cui vuoi aggiungere le immagini. Quindi, crea una nuova dimensione basata su questo campo, specificamente per l'utilizzo della visualizzazione delle immagini.

  2. Aggiungi un parametro html per definire un'istruzione condizionale {% if %} Liquid con la variabile value per ogni valore per cui vuoi visualizzare un'immagine.

    Ad esempio, la seguente dimensione state_flag_image stabilisce una condizione per la visualizzazione delle immagini specificate (con tag html <img> ) quando il valore di state è "California", "New York", "Colorado" o "Illinois". Per tutti gli altri stati, puoi visualizzare un'icona "Nessuna immagine disponibile": 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% endif %} ;;
      }
  3. Crea una condizione di valore per ogni valore per il quale vuoi visualizzare un'immagine. In alternativa, puoi creare un campo immagine dinamica utilizzando la variabile Liquid value, come descritto nel post della community Come aggiungere immagini alle visualizzazioni.

Successivamente, puoi creare un riquadro della dashboard per la dimensione dell'immagine.

Passaggio 2: crea un riquadro della dashboard con immagini dinamiche

Ora che è stata creata la dimensione dell'immagine (state_flag_image), puoi creare un'esplorazione che diventerà il riquadro della dashboard delle immagini dinamiche.

Crea l'esplorazione con i seguenti criteri:

  • Aggiungi un filtro per la dimensione originale (in questo caso, state). Imposta il filtro su qualsiasi valore. Inizialmente verrà visualizzata l'immagine "Nessuna immagine disponibile", in quanto non è selezionato alcun valore filtro specifico. Questo valore del filtro verrà aggiornato in base a ciò che l'utente seleziona per il filtro della dashboard. 
  • Seleziona la dimensione dell'immagine (in questo caso, state_flag_image) e qualsiasi altra dimensione che potrebbe essere necessaria per la query che determina l'immagine (ad esempio, se vuoi prendere in considerazione una data, puoi includere la data e così via).
  • Modifica il limite di righe impostandolo su una riga.
  • Modifica il tipo di visualizzazione impostandolo su visualizzazione a valore singolo e nascondi tutte le altre colonne, ad eccezione della dimensione immagine (state_flag_image). 

Inizialmente, Esplora mostrerà l'immagine "Nessuna immagine disponibile" nella visualizzazione a valore singolo visualizzata nel riquadro Visualizzazione. L'immagine visualizzata cambierà in base al valore del filtro selezionato dall'utente nella dashboard finale:

Salva l'esplorazione in una dashboard come riquadro.

Passaggio 3: aggiungi filtri alla dashboard e ritocchi finali

Ora devi aggiungere filtri alla dashboard. I filtri nella dashboard aggiorneranno il filtro in Esplora per modificare l'immagine visualizzata in base alla selezione dell'utente.

Dalla modalità di modifica della dashboard, crea il filtro:

Ora il riquadro dell'immagine verrà aggiornato con la selezione del filtro utente.

Quando un utente sceglie di filtrare in base a "California", la dashboard mostra la bandiera e i dati dello stato della California:

Quando un utente sceglie di filtrare in base a "Colorado", la dashboard mostra la bandiera e i dati dello stato del Colorado:

Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.

Ultimo aggiornamento 2025-10-19 UTC.