Interactive Report Custom Column Formatting With HTML Expressions

Beyond Plain Text Columns

HTML Expressions on IR columns let you transform raw data into rich visual elements: progress bars, star ratings, status badges, thumbnail images, and action buttons. This turns a plain tabular report into an engaging, scannable interface without JavaScript or plug-ins.

Status Badge

-- Column: STATUS
-- HTML Expression:
<span class="u-label u-label--#STATUS_CSS#">#STATUS#</span>

-- Add a hidden column STATUS_CSS:
CASE status
    WHEN 'ACTIVE' THEN 'success'
    WHEN 'PENDING' THEN 'warning'
    WHEN 'INACTIVE' THEN 'danger'
    ELSE 'info'
END AS status_css

Progress Bar

-- Column: COMPLETION_PCT
-- HTML Expression:
<div class="t-Report-percentBar" style="width:100px;background:#e8e8e8;border-radius:4px">
  <div style="width:#COMPLETION_PCT#%;background:#4CAF50;height:16px;border-radius:4px;text-align:center;color:white;font-size:11px;line-height:16px">
    #COMPLETION_PCT#%
  </div>
</div>

Star Rating

-- Column: RATING (1-5)
-- HTML Expression:
<span style="color:#f5a623">#RATING_STARS#</span>

-- Hidden column RATING_STARS:
RPAD('★', rating, '★') || RPAD('☆', 5 - rating, '☆') AS rating_stars

Thumbnail Image

-- Column: IMAGE_URL
-- HTML Expression:
<img src="#IMAGE_URL#" alt="#PRODUCT_NAME#"
     style="width:48px;height:48px;border-radius:4px;object-fit:cover">

Multi-Value Display

-- Show tags as pills/badges
-- Column: TAGS (comma-separated from LISTAGG)
-- HTML Expression:
<div style="display:flex;gap:4px;flex-wrap:wrap">#TAG_BADGES#</div>

-- Hidden column TAG_BADGES computed in SQL:
SELECT order_id,
       (SELECT LISTAGG('<span class="u-label">' || tag_name || '</span>', ' ')
          FROM order_tags WHERE order_id = o.order_id) AS tag_badges
  FROM orders o;

Important: Escape Setting

For HTML Expressions to render, the column’s “Escape special characters” property must be set to No. Only do this for columns where YOU control the HTML. Never set Escape to No for columns that display user-entered data without sanitization, as this creates a Cross-Site Scripting (XSS) vulnerability. For user data columns, always keep Escape set to Yes.