html

Penggunaan

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
Hierarki
view
Jenis Kolom
html
Jenis Kolom yang Direkomendasikan
Dimensi, Grup Dimensi, Metrik

Menerima
Ekspresi HTML, yang mungkin menggunakan elemen template Liquid, diikuti dengan dua titik koma

Definisi

Parameter html memungkinkan Anda menentukan HTML yang akan dimuat oleh kolom.

Anda juga dapat mengakses nilai yang biasanya ada di kolom dengan menggunakan variabel Liquid. Dengan begitu, Anda dapat membuat sejumlah fungsi yang berguna, termasuk link ke Look terkait lainnya, link ke situs eksternal, atau gambar.

Pemformatan HTML hanya dirender dalam visualisasi diagram tabel, tabel (lama), dan nilai tunggal serta dalam tooltip visualisasi saat beberapa kolom digabungkan. Konten interaktif apa pun yang ditempatkan di tooltip diagram peta dengan parameter html tidak akan dapat diakses di dasbor yang menggunakan pengalaman dasbor baru, meskipun akan dapat diakses di Look, Eksplorasi, dan dasbor lama.

Saat mendownload konten, pemformatan HTML tidak diterapkan ke format download berbasis teks, seperti TXT, CSV, Excel, atau JSON.

Menggunakan HTML yang valid

Untuk mencegah eksploitasi keamanan tertentu, Looker membatasi tag dan atribut HTML yang dapat digunakan, serta properti CSS yang dapat digunakan. Lihat halaman dokumentasi sanitasi HTML kami untuk mengetahui detail selengkapnya.

Variabel Liquid

Parameter html mendukung variabel Liquid. Lihat halaman dokumentasi variabel Liquid untuk mengetahui informasi tentang cara memanfaatkan variabel ini sepenuhnya.

Contoh

Berikut beberapa contoh penggunaan parameter kolom html.

Pemformatan HTML hanya dirender dalam tabel, dan visualisasi diagram nilai tunggal serta dalam tooltip visualisasi saat beberapa kolom digabungkan. Konten interaktif apa pun yang ditempatkan di tooltip diagram peta dengan parameter html tidak akan dapat diakses di dasbor, meskipun akan dapat diakses di Look dan Eksplorasi.

Contoh tambahan tentang cara menggunakan HTML untuk menyesuaikan font dan warna nilai kolom dalam visualisasi tersedia di halaman Penyesuaian pemformatan bersyarat dan halaman Penyesuaian tooltip visualisasi di buku resep Mendapatkan hasil maksimal dari visualisasi di Looker.

Menggunakan variabel Liquid dalam parameter html

Contoh ini menunjukkan tampilan sebagian besar variabel Liquid dalam parameter html. Pertimbangkan definisi total_order_amount:

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

Nilai sel yang ditampilkan untuk total_order_amount akan terlihat seperti ini:

  • 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

Memformat metrik secara bersyarat

Memformat jumlah secara bersyarat sesuai dengan nilainya:

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

Mengeksplorasi data dengan parameter html

Pemformatan HTML hanya dirender dalam visualisasi diagram tabel, tabel (lama), dan nilai tunggal serta dalam tooltip visualisasi saat beberapa kolom digabungkan. Konten interaktif apa pun yang ditempatkan di tooltip diagram peta dengan parameter html tidak akan dapat diakses di dasbor yang menggunakan pengalaman dasbor baru, meskipun akan dapat diakses di Look, Eksplorasi, dan dasbor lama.

Bayangkan Anda memiliki kolom dalam data yang disebut status, yang memberikan status setiap pesanan. Nilai yang mungkin untuk status adalah:

  • Paid
  • Shipped
  • Returned

Saat menjelajahi data, Anda mungkin ingin memiliki warna latar belakang yang berbeda untuk setiap status. Hal ini dapat dilakukan menggunakan Liquid html dalam parameter html: dimensi. Tampilannya akan seperti ini:

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

Di tabel, warna latar belakang setiap sel akan bervariasi bergantung pada nilai kolom status. Warna latar belakang akan berwarna biru muda jika nilainya Paid, hijau muda jika Shipped, dan oranye jika nilainya adalah yang lain. Misalnya, jika tabel Anda berisi nilai Returned, sel tersebut akan memiliki latar belakang berwarna oranye.

Anda dapat menggunakan sintaksis yang sama untuk menambahkan ikon atau gambar berdasarkan nilai sel:

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

Di tabel, tampilannya akan seperti ini:

Status Item Pesanan Jumlah Item Pesanan
Ikon dibatalkan.Dibatalkan 6.316
Ikon selesai.Selesai 232.791
Ikon pemrosesan.Memproses 809
Ikon dibatalkan.Dikembalikan 2.354
Ikon selesai.Dikirim 1.474

Membuat gambar produk

Berikut contoh cara menambahkan gambar produk ke Looker menggunakan tag <img>, berdasarkan ID produk:

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

Untuk mempertahankan link lihat perincian saat memformat output menggunakan parameter html, Anda dapat menyertakan tag HTML <a href="#drillmenu" target="_self">. Contoh:

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