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, der möglicherweise Liquid-Vorlagenelemente verwendet, gefolgt von zwei Semikolons

Definition

Mit dem Parameter html können Sie den HTML-Code angeben, der 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 (alt) und Einzelwertdiagrammen sowie in Kurzinfos für Visualisierungen gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html in der Kurzinfo eines Kartendiagramms platziert werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. In Looks, Explores und älteren 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ültigen HTML-Code 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 unserer Dokumentationsseite HTML-Bereinigung.

Liquid-Variablen

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

Beispiele

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

Die HTML-Formatierung wird nur in Tabellen, Einzelwertdiagrammen und in Kurzinfos für Visualisierungen gerendert, wenn mehrere Felder kombiniert werden. Alle interaktiven Inhalte, die mit dem Parameter html in der Kurzinfo eines Kartendiagramms platziert werden, sind in Dashboards nicht zugänglich, in Looks und Explores jedoch schon.

Weitere Beispiele für die Verwendung von HTML zum Anpassen der Schriftart und der Farben von Feldwerten in Visualisierungen finden Sie im Cookbook Getting the most out of visualizations in Looker auf den Seiten Conditional formatting customization und Visualization tooltip customization.

Liquid-Variablen im Parameter html verwenden

In diesem Beispiel sehen Sie, wie die meisten Liquid-Variablen in einem html-Parameter aussehen würden. Betrachten Sie die folgende total_order_amount-Definition:

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 in der Zelle für total_order_amount angezeigte Wert 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

Anzahl basierend auf ihren Werten bedingt 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 (alt) und Einzelwertdiagrammen sowie in Kurzinfos für Visualisierungen gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html in der Kurzinfo eines Kartendiagramms platziert werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. In Looks, Explores und älteren Dashboards sind sie jedoch zugänglich.

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

  • Paid
  • Shipped
  • Returned

Wenn Sie Ihre Daten analysieren, möchten Sie möglicherweise für jeden Status eine separate Hintergrundfarbe verwenden. Dazu können Sie Liquid-HTML im Parameter html: einer Dimension verwenden. Das würde in etwa 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 (Bezahlt) lautet, hellgrün, wenn er Shipped (Versendet) lautet, und orange, wenn der Wert ein anderer ist. Wenn Ihre Tabelle beispielsweise den Wert Zurückgegeben enthält, hat die entsprechende Zelle einen orangefarbenen Hintergrund.

Mit derselben Syntax können Sie Symbole oder Bilder basierend auf Zellwerten 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 Ihrer Tabelle sieht das so aus:

Status der Artikel der Bestellung Anzahl der Bestellartikel
Symbol für „Gekündigt“Gekündigt 6.316
Symbol „Abgeschlossen“Abgeschlossen 232.791
Verarbeitungssymbol wird verarbeitet 809
Symbol für „Gekündigt“Zurückgegeben 2.354
Symbol „Abgeschlossen“Versendet 1.474

Produktbilder generieren

Hier sehen Sie ein Beispiel dafür, wie Sie das Bild eines Produkts in Looker einfügen können. Dazu wird ein <img>-Tag verwendet, das auf der ID des Produkts basiert:

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