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 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.

HTML-Formatierungen werden nur in den Diagrammvisualisierungen Tabelle, Tabelle (Legacy), KPI (Einzelwert) und Einzelwert (Legacy) sowie in Kurzinfos für Visualisierungen gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html im Kurzinfo eines Kartendiagramms platziert werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. Sie sind jedoch in Looks, Explores und älteren Dashboards 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 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 einige Beispiele für die Verwendung des Feldparameters html.

Weitere Beispiele für die Verwendung von HTML zum Anpassen der Schriftart und der Farben von Feldwerten in Visualisierungen finden Sie auf der Seite Anpassung der bedingten Formatierung und der Seite Anpassung von Kurzinfos in Visualisierungen des Cookbooks Visualisierungen in Looker optimal nutzen.

Liquid-Variablen im Parameter html verwenden

In diesem Beispiel wird gezeigt, wie die meisten Liquid-Variablen in einem html-Parameter angezeigt werden. Betrachten wir eine 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 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

Anzahl 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

HTML-Formatierungen werden nur in den Diagrammvisualisierungen Tabelle, Tabelle (alt) und KPI (Einzelwert) sowie in Kurzinfos für Visualisierungen gerendert, wenn mehrere Felder kombiniert werden. Interaktive Inhalte, die mit dem Parameter html im Kurzinfo eines Kartendiagramms platziert werden, sind in Dashboards, die die neue Dashboard-Oberfläche verwenden, nicht zugänglich. Sie sind jedoch in Looks, Explores und älteren Dashboards 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

Beim Untersuchen Ihrer Daten möchten Sie möglicherweise für jeden Status eine eigene 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 Ihrer Tabelle variiert die Hintergrundfarbe jeder Zelle je nach Wert des Felds status. Die Hintergrundfarbe ist hellblau, wenn der Wert Bezahlt ist, hellgrün, wenn er Versendet ist, und orange, wenn der Wert ein anderer 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 Ihrer Tabelle sieht das so aus:

Status der Bestellartikel Anzahl der Bestellartikel
Symbol für „Abgebrochen“Abgebrochen 6.316
Symbol „Abgeschlossen“Abgeschlossen 232.791
Symbol „In Bearbeitung“Wird verarbeitet 809
Symbol für „Abgebrochen“Zurückgegeben 2.354
Symbol „Abgeschlossen“Versandt 1.474

Produktbilder generieren

Hier ist ein Beispiel dafür, wie Sie das Bild eines Produkts anhand der Produkt-ID mit einem <img>-Tag 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, können Sie das HTML-Tag <a href="#drillmenu" target="_self"> einfügen, um Drilldown-Links beizubehalten. 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>;;
}