HTML

사용

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
계층 구조
view
필드 유형
html
가능한 필드 유형
측정기준, 측정기준 그룹, 측정값

수락
Liquid 템플릿 요소를 사용할 수 있는 HTML 표현식과 세미콜론 두 개

정의

html 파라미터를 사용하면 필드에 포함될 HTML을 지정할 수 있습니다.

Liquid 변수를 사용하여 일반적으로 해당 필드에 들어가는 값에 액세스할 수도 있습니다. 이를 통해 관련된 다른 Look으로의 링크, 외부 웹사이트 링크, 이미지 등 여러 유용한 기능을 만들 수 있습니다.

HTML 형식은 표, 표 (기존), 단일 값 차트 시각화와 여러 필드가 결합된 시각화 도움말에서만 렌더링됩니다. html 매개변수로 맵 차트 도움말에 배치된 모든 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

콘텐츠를 다운로드할 때 HTML 형식은 TXT, CSV, Excel, JSON 등의 텍스트 기반 다운로드 형식에는 적용되지 않습니다.

유효한 HTML 사용

특정한 보안 악용을 방지하기 위해 Looker는 사용할 수 있는 HTML 태그 및 속성과 사용할 수 있는 CSS 속성을 제한합니다. 자세한 내용은 HTML 정리 문서 페이지를 참고하세요.

Liquid 변수

html 매개변수는 Liquid 변수를 지원합니다. 이러한 변수를 최대한 활용하는 방법에 관한 자세한 내용은 Liquid 변수 문서 페이지를 참고하세요.

예시

다음은 html 필드 매개변수 사용의 몇 가지 예입니다.

HTML 형식은 표, 단일 값 차트 시각화 및 여러 필드가 결합된 시각화 도움말에서만 렌더링됩니다. html 매개변수를 사용하여 지도 차트 도움말에 배치된 대화형 콘텐츠는 대시보드에서 액세스할 수 없습니다. Look 및 Explore에서는 액세스할 수 있습니다.

시각화에서 HTML을 사용하여 필드 값의 글꼴과 색상을 맞춤설정하는 방법에 관한 추가 예는 Looker에서 시각화 최대한 활용하기 설명서의 조건부 서식 맞춤설정 페이지와 시각화 도움말 맞춤설정 페이지를 참고하세요.

html 매개변수에서 Liquid 변수 사용

이 예에서는 대부분의 Liquid 변수가 html 매개변수에 표시되는 방식을 보여줍니다. 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> ;;
}

total_order_amount에 표시되는 셀 값은 다음과 같습니다.

  • 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

측정값의 조건부 서식 지정

값에 따라 개수를 조건부로 서식 지정합니다.

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

html 매개변수로 데이터 탐색

HTML 형식은 표, 표 (기존), 단일 값 차트 시각화와 여러 필드가 결합된 시각화 도움말에서만 렌더링됩니다. html 매개변수로 맵 차트 도움말에 배치된 모든 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

데이터에 각 주문의 상태를 제공하는 status라는 필드가 있다고 가정해 보세요. status에 가능한 값은 다음과 같습니다.

  • Paid
  • Shipped
  • Returned

데이터를 탐색할 때 각 상태에 별도의 배경색을 지정할 수 있습니다. 이 작업은 측정기준의 html: 파라미터에서 Liquid html을 사용하여 실행할 수 있습니다. 다음과 같이 표시됩니다.

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

표에서 각 셀의 배경색은 status 필드의 값에 따라 달라집니다. 값이 Paid인 경우 배경색은 밝은 파란색, 값이 Shipped인 경우 밝은 녹색, 값이 그 외인 경우 주황색입니다. 예를 들어 테이블에 반환됨 값이 포함되어 있으면 해당 셀의 배경이 주황색으로 표시됩니다.

동일한 구문을 사용하여 셀 값에 따라 아이콘 또는 이미지를 추가할 수 있습니다.

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

표에서는 다음과 같이 표시됩니다.

주문 항목 상태 주문 항목 수
취소됨 아이콘취소됨 6,316
완료 아이콘완료 232,791
처리 중 아이콘처리 중 809
취소됨 아이콘반품됨 2,354
완료 아이콘발송됨 1,474

제품 이미지 생성

다음은 제품 ID를 기반으로 <img> 태그를 사용하여 Looker에 제품 사진을 추가하는 방법의 예입니다.

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

html 매개변수를 사용하여 출력을 포맷할 때 드릴다운 링크를 유지하려면 HTML 태그 <a href="#drillmenu" target="_self">를 포함하면 됩니다. 예를 들면 다음과 같습니다.

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