html

שימוש

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 מוצג רק בתצוגות החזותיות של התרשימים table,‏ table (legacy),‏ KPI (Single Value) ו-single value (legacy), ובהסברים הקצרים של התצוגה החזותית כשמשלבים כמה שדות. תוכן אינטראקטיבי שמוצב בהסבר קצר של תרשים מפה עם הפרמטר html לא יהיה נגיש במרכזי בקרה שמשתמשים בממשק החדש של מרכז הבקרה, אבל הוא יהיה נגיש ב-Looks, ב-Explores ובמרכזי בקרה מדור קודם.

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

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

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

משתני Liquid

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

דוגמאות

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

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

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

שימוש במשתני 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 מוצג רק בתצוגות החזותיות של התרשימים table,‏ table (legacy) ו-KPI (Single Value), ובהסברים הקצרים של התצוגה החזותית כשמשלבים כמה שדות. תוכן אינטראקטיבי שמוצב בהסבר קצר של תרשים מפה עם הפרמטר html לא יהיה נגיש במרכזי בקרה שמשתמשים בממשק החדש של מרכז הבקרה, אבל הוא יהיה נגיש ב-Looks, ב-Explores ובמרכזי בקרה מדור קודם.

נניח שיש לכם שדה בנתונים שנקרא 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

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

דוגמה להוספת תמונה של מוצר ל-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>;;
}