html

Usage

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

היררכיה הצגת הקובץ view סוג השדה html

סוגי שדות אפשריים מאפיין, קבוצת מאפיינים, מדד אישור ביטוי HTML, שאולי משתמש ברכיבי תבנית Liquid, ואחריו שתי נקודות-פסיק

הגדרה

הפרמטר html מאפשר לציין את קוד ה-HTML שייכלל בשדה.

אפשר גם לגשת לערכים שבדרך כלל נמצאים בשדה באמצעות משתני Liquid. כך אפשר ליצור מספר פונקציות שימושיות, כולל קישורים למבטים קשורים אחרים, קישורים לאתרים חיצוניים או תמונות.

עיצוב HTML מוצג רק בתצוגות חזותיות של טבלה, טבלה (קודמת) וערך יחיד, וגם בהסברים הדינמיים של התצוגה החזותית כשמשלבים כמה שדות. כל תוכן אינטראקטיבי שמוצב בתיאור הכלי של תרשים מפה עם הפרמטר html לא יהיה נגיש בלוחות בקרה שמשתמשים בחוויית לוחות הבקרה החדשה, אבל הוא יהיה נגיש ב-Looks, בחיפושים ובדיקות ובלוחות בקרה מדור קודם.

כשמורידים תוכן, עיצוב HTML לא חל על פורמטים של הורדה שמבוססים על טקסט, כמו TXT,‏ CSV,‏ Excel או JSON.

שימוש ב-HTML תקין

כדי למנוע ניצול לרעה של פרצות אבטחה מסוימות, Looker מגביל את השימוש בתגי HTML ובמאפיינים מסוימים, וגם במאפייני CSS מסוימים. פרטים נוספים מופיעים בדף התיעוד בנושא ניקוי HTML.

משתני Liquid

הפרמטר html תומך במשתני Liquid. במאמר בנושא משתני Liquid מוסבר איך להשתמש במשתנים האלה בצורה מלאה.

דוגמאות

ריכזנו כאן כמה דוגמאות לשימוש בפרמטר השדה html.

עיצוב HTML מוצג רק בטבלה, בתרשימים של ערך יחיד ובתיאורי הכלים של התצוגה החזותית כשמשלבים כמה שדות. לא תהיה גישה לתוכן אינטראקטיבי שמוצב בתיבת הטיפ של תרשים מפה עם הפרמטר html במרכזי בקרה, אבל תהיה גישה אליו ב-Looks וב-Explores.

בספר המתכונים Getting the most out of visualizations in Looker (שימוש אופטימלי בהמחשות חזותיות ב-Looker) יש דוגמאות נוספות לשימוש ב-HTML כדי להתאים אישית את הגופן והצבעים של ערכי שדות בהמחשות חזותיות. הדוגמאות האלה מופיעות בדפים Conditional formatting customization (התאמה אישית של עיצוב מותנה) ו-Visualization tooltip customization (התאמה אישית של תיאורי כלים בהמחשות חזותיות).

שימוש במשתני Liquid בפרמטר html

בדוגמה הזו אפשר לראות איך רוב משתני 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 לא יהיה נגיש בלוחות בקרה שמשתמשים בחוויית לוחות הבקרה החדשה, אבל הוא יהיה נגיש ב-Looks, בחיפושים ובדיקות ובלוחות בקרה מדור קודם.

נניח שיש לכם שדה בנתונים בשם 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 (נשלח) וכתום אם הערך הוא כל דבר אחר. לדוגמה, אם הטבלה מכילה את הערך Returned, הרקע של התא הזה יהיה כתום.

אפשר להשתמש באותו תחביר כדי להוסיף סמלים או תמונות על סמך ערכי התאים:

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

יצירת תמונות של מוצרים

דוגמה להוספת תמונה של מוצר ל-Looker באמצעות תג <img>, על סמך מזהה המוצר:

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