HTML

Nutzung

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
Hierarchie
view
Feldtyp
html
Mögliche Feldtypen
Dimension, Dimensionsgruppe, Messwert

Akzeptiert
Ein HTML-Ausdruck, möglicherweise mit Liquid-Vorlagenelementen, gefolgt von zwei Semikolons

Definition

Mit dem Parameter html können Sie das HTML angeben, das in einem Feld enthalten sein soll.

Mit Liquid-Variablen können Sie auch auf die Werte zugreifen, die normalerweise in dem Feld vorhanden sind. So lassen sich eine Reihe nützlicher Funktionen erstellen, darunter Links zu anderen zugehörigen Looks, Links zu externen Websites oder Bilder.

Die HTML-Formatierung wird nur in Tabellen, Tabellen- (Legacy-) und Einzelwert-Diagramm-Visualisierungen sowie in Visualisierungs-Tooltips gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html in den Tooltip eines Kartendiagramms eingefügt werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. In Looks, explorativen Datenanalysen und Legacy-Dashboards sind sie jedoch zugänglich.

Beim Herunterladen von Inhalten wird die HTML-Formatierung nicht auf textbasierte Downloadformate wie TXT, CSV, Excel oder JSON angewendet.

Gültiges HTML verwenden

Um bestimmte Sicherheitslücken zu vermeiden, schränkt Looker ein, welche HTML-Tags und ‑Attribute sowie welche CSS-Eigenschaften verwendet werden dürfen. Weitere Informationen finden Sie auf der Dokumentationsseite zur HTML-Bereinigung.

Liquid-Variablen

Der Parameter html unterstützt Liquid-Variablen. Informationen zur optimalen Nutzung dieser Variablen finden Sie auf der Dokumentationsseite zu Liquid-Variablen.

Beispiele

Hier sind einige Beispiele für die Verwendung des Feldparameters html.

Die HTML-Formatierung wird nur in Tabellen- und Einzelwert-Diagramm-Visualisierungen sowie in Visualisierungs-Tooltips gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html in den Tooltip eines Kartendiagramms eingefügt werden, sind in Dashboards nicht zugänglich. In Looks und explorativen Datenanalysen sind sie jedoch zugänglich.

Weitere Beispiele für die Verwendung von HTML zum Anpassen der Schriftart und der Farben von Feldwerten in Visualisierungen finden Sie auf den Seiten Benutzerdefinierte bedingte Formatierung und Benutzerdefinierte Visualisierungs-Tooltips im Looker-Kochbuch „Das Beste aus Visualisierungen in Looker herausholen“.

Liquid-Variablen im Parameter html verwenden

In diesem Beispiel wird gezeigt, wie die meisten Liquid-Variablen in einem html-Parameter aussehen würden. Nehmen wir eine total_order_amount-Definition an:

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

Der für total_order_amount angezeigte Zellenwert würde so aussehen:

  • 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

Messwert bedingt formatieren

Zählungen bedingt nach ihren Werten formatieren:

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

Daten mit dem Parameter html untersuchen

Die HTML-Formatierung wird nur in Tabellen, Tabellen- (Legacy-) und Einzelwert-Diagramm-Visualisierungen sowie in Visualisierungs-Tooltips gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html in den Tooltip eines Kartendiagramms eingefügt werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. In Looks, explorativen Datenanalysen und Legacy-Dashboards sind sie jedoch zugänglich.

Angenommen, Sie haben ein Feld in Ihren Daten mit dem Namen status, das den Status jeder Bestellung angibt. Die möglichen Werte für status sind:

  • Paid
  • Shipped
  • Returned

Beim Untersuchen Ihrer Daten möchten Sie möglicherweise für jeden Status eine eigene Hintergrundfarbe haben. Dies ist mit Liquid-HTML im html: Parameter einer Dimension möglich. Das würde so aussehen:

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

In der Tabelle variiert die Hintergrundfarbe jeder Zelle je nach Wert des Felds status. Die Hintergrundfarbe ist hellblau, wenn der Wert Paid ist, hellgrün, wenn er Shipped ist, und orange, wenn der Wert etwas anderes ist. Wenn Ihre Tabelle beispielsweise den Wert Returned enthält, hat diese Zelle einen orangefarbenen Hintergrund.

Mit derselben Syntax können Sie Symbole oder Bilder basierend auf Zellenwerten hinzufügen:

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

In der Tabelle sieht das so aus:

Status der Bestellartikel Anzahl der Bestellartikel
Symbol für „Abgebrochen“Abgebrochen 6.316
Symbol „Abgeschlossen“Abgeschlossen 232.791
VerarbeitungssymbolIn Bearbeitung 809
Symbol für „Abgebrochen“Zurückgegeben 2.354
Symbol „Abgeschlossen“Versendet 1.474

Produktbilder generieren

Hier ist ein Beispiel dafür, wie Sie das Bild eines Produkts mithilfe eines <img>-Tags basierend auf der Produkt-ID in Looker einfügen:

dimension: product_image {
  sql: ${product_id} ;;
  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}

Wenn Sie die Ausgabe mit dem Parameter html formatieren und Links zur Aufschlüsselung beibehalten möchten, können Sie das HTML-Tag <a href="#drillmenu" target="_self"> einfügen. Beispiel:

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