Dynamisches Dashboard-Bild mit Liquid und HTML erstellen

Sie können Looker-Dashboards Bilder hinzufügen, indem Sie eine Bild-URL in einem Textkachel mit Markdown-Formatierung fest codieren. Bilder in Textkacheln sind jedoch statisch und werden nicht auf Grundlage von Ergebnissen aktualisiert. Was ist, wenn sich ein Dashboard-Bild dynamisch basierend auf einem vom Nutzer ausgewählten Filterwert ändern soll?

Auf dieser Seite mit Best Practices wird gezeigt, wie Sie mit Liquid und dem Parameter html ein dynamisches Dashboard-Bild erstellen.

Die Lösung

Die folgende Lösung basiert auf einem E-Commerce-Dataset, das ein Feld namens users.state enthält, das die Bundesstaaten in einem hypothetischen E-Commerce-Dataset darstellt: 

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

Angenommen, Sie möchten das Bild einer Staatsflagge in einem Dashboard anzeigen, das basierend auf dem Bundesstaat aktualisiert wird, nach dem ein Nutzer die Dashboard-Ergebnisse filtert.

Um das dynamische Dashboard-Bild zu erstellen, sind drei Schritte erforderlich:

  1. Bilddimension in LookML erstellen
  2. Dynamische Bildkachel für das Dashboard erstellen
  3. Dashboard-Filter hinzufügen und den letzten Schliff vornehmen

Schritt 1: Bilddimension in LookML erstellen

So erstellen Sie eine Bilddimension in LookML:

  1. Rufen Sie zuerst das Projekt und die Ansichtsdatei mit der Dimension auf, der Sie Bilder hinzufügen möchten. Erstellen Sie dann eine neue Dimension basierend auf diesem Feld, speziell für die Anzeige der Bilder.

  2. Fügen Sie für jeden Wert, für den Sie ein Bild einfügen möchten, einen html-Parameter hinzu, um eine {% if %}-Bedingungsanweisung mit der value-Variablen zu definieren.

    Mit der folgenden state_flag_image-Dimension wird beispielsweise eine Bedingung für die Anzeige der angegebenen Bilder (mit html <img> -Tags) festgelegt, wenn der Wert von state "California", "New York", "Colorado" oder "Illinois" ist. In allen anderen Bundesstaaten können Sie ein Symbol für „Kein Bild verfügbar“ anzeigen: 

          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. Erstellen Sie für jeden Wert, für den Sie ein Bild anzeigen möchten, eine Wertbedingung. Alternativ können Sie ein dynamisches Bildfeld mit der Liquid-Variablen value erstellen, wie im Community-Beitrag Visualisierungen Bilder hinzufügen beschrieben.

Als Nächstes können Sie eine Dashboardkachel für die Bilddimension erstellen.

Schritt 2: Dynamische Bildkachel für das Dashboard erstellen

Nachdem die Bilddimension (state_flag_image) erstellt wurde, können Sie ein Explore erstellen, das zur dynamischen Bild-Dashboardkachel wird.

Erstellen Sie die Analyse mit den folgenden Kriterien:

  • Fügen Sie einen Filter für die ursprüngliche Dimension (in diesem Fall state) hinzu. Legen Sie den Filter für einen beliebigen Wert fest. Dadurch wird anfangs das Bild „Kein Bild verfügbar“ angezeigt, da kein bestimmter Filterwert ausgewählt ist. Dieser Filterwert wird entsprechend der Auswahl des Nutzers für den Dashboard-Filter aktualisiert. 
  • Wählen Sie die Bilddimension (in diesem Fall state_flag_image) und alle anderen Dimensionen aus, die für die Abfrage erforderlich sind, mit der das Bild bestimmt wird. Wenn Sie beispielsweise ein Datum berücksichtigen möchten, können Sie „Datum“ usw. einfügen.
  • Ändern Sie das Zeilenlimit in eine Zeile.
  • Ändern Sie den Visualisierungstyp in eine Einzelwertvisualisierung und blenden Sie alle anderen Spalten außer der Bilddimension (state_flag_image) aus. 

In Ihrem Explore wird in der Einzelwertvisualisierung, die im Bereich Visualisierung gerendert wird, zunächst das Bild „Kein Bild verfügbar“ angezeigt. Das angezeigte Bild ändert sich je nach dem Filterwert, den der Nutzer im endgültigen Dashboard auswählt:

Speichern Sie das Explore als Kachel in einem Dashboard.

Schritt 3: Dashboard-Filter und letzte Anpassungen hinzufügen

Jetzt müssen Sie dem Dashboard Dashboard-Filter hinzufügen. Durch die Filter im Dashboard wird der Filter in der Funktion „Erkunden“ aktualisiert, sodass das angezeigte Bild basierend auf der Auswahl des Nutzers geändert wird.

Erstellen Sie den Filter im Bearbeitungsmodus des Dashboards:

  • Öffnen Sie das Fenster „Filter hinzufügen“.
  • Wählen Sie das Feld aus, nach dem gefiltert werden soll. Das Filterfeld sollte die Dimension sein, auf der die Bilddimension basiert. In diesem Beispiel ist das Feld für den Filter state.
  • Wählen Sie auf dem Tab Zu aktualisierende Kacheln die Bildkachel aus Schritt 2 aus.
  • Wählen Sie im Inline-Drop-down-Menü Field to Filter (Zu filterndes Feld) die ursprüngliche Dimension aus (in diesem Fall state).
    • Wählen Sie bei Bedarf weitere Kacheln aus, die aktualisiert werden sollen.
  • Passen Sie den Filter nach Bedarf an. Wenn Sie die Steuerungsoption Erweitert auswählen, müssen Sie die Option Mehrere Filterwerte zulassen deaktivieren, die für die Steuerungsoption Erweitert automatisch aktiviert ist.

Die Bildkachel wird jetzt entsprechend der Auswahl des Nutzerfilters aktualisiert.

Wenn ein Nutzer nach „Kalifornien“ filtert, werden im Dashboard die Flagge des Bundesstaats und Daten für Kalifornien angezeigt:

Wenn ein Nutzer nach „Colorado“ filtert, werden im Dashboard die Flagge und die Daten für den Bundesstaat Colorado angezeigt: