You are viewing documentation for Looker 25.20. Click this link to see the most recent documentation.

html

Penggunaan

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}

Hierarki

Lihat File

view

Jenis Kolom

html

Jenis Kolom yang Mungkin

Dimensi, Grup Dimensi, Ukuran

Menerima

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

Definisi

Dengan parameter html, Anda dapat menentukan HTML yang akan dimuat oleh kolom.

Anda juga dapat mengakses nilai yang biasanya ada di kolom 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, Jelajah, 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 pembersihan 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 visualisasi diagram tabel 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, meskipun akan dapat diakses di Tampilan 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 dalam buku resep Memanfaatkan visualisasi secara maksimal di Looker.

Menggunakan variabel Liquid dalam parameter `html`

Contoh ini menunjukkan bagaimana sebagian besar variabel Liquid akan muncul 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 ukuran secara bersyarat

Memformat jumlah secara kondisional 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 %} ;;
}

Menjelajahi 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, Jelajah, 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 html Liquid dalam parameter html: dari dimensi. Tampilannya akan terlihat seperti:

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

Dalam 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 nilainya Shipped, dan oranye jika nilainya yang lain. Misalnya, jika tabel Anda berisi nilai Dikembalikan, 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 %}
;;
}

Dalam tabel Anda, tampilannya akan seperti ini:

Status Item Pesanan	Jumlah Item Pesanan
Dibatalkan	6.316
Selesai	232.791
Memproses	809
Dikembalikan	2.354
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" /> ;;
}

Mempertahankan link perincian

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

html Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.