Oracle APEX – CSS + Template Directive Pattern Library

Previous Blog.

Below is a ready-to-use CSS + Template Directive pattern library you can drop into any Oracle APEX application.

This is meant to be practical, consistent, and team-friendly. No experiments, only patterns that work in real projects.

You can think of this as a mini design system for templates.

Core CSS (Add Once Per App)

Add this in:

Shared Components → Static Application Files or

Theme Roller → Custom CSS

This CSS is neutral, readable, and works well with Universal Theme.

Status Badge Pattern

Template Directive

{case STATUS/}
{when ACTIVE/}
<span class=”os-badge os-badge–success”>Active</span>
{when INACTIVE/}
<span class=”os-badge os-badge–warning”>Inactive</span>
{when CANCELLED/}
<span class=”os-badge os-badge–danger”>Cancelled</span>
{otherwise/}
<span class=”os-badge os-badge–muted”>Unknown</span>
{endcase/}

Where to use

Classic Reports

Cards

Interactive Reports

Emails (inline-safe)

Boolean Flag Pattern (Y/N, 1/0)

{if FLAG/}
<span class=”os-badge os-badge–success”>Yes</span>
{else/}
<span class=”os-badge os-badge–muted”>No</span>
{endif/}

Action Link with Permission

{if CAN_EDIT/}
<a class=”os-link”
href=”f?p=&APP_ID.:10:&SESSION.::NO::P10_ID:&ID.”>
Edit
</a>
{else/}
<span class=”os-empty”>View only</span>
{endif/}

Clean, readable, and safe.

Priority Indicator (Visual + Text)

{case PRIORITY/}
{when HIGH/}
<div class=”os-priority-high”>
<span class=”os-badge os-badge–danger”>High</span>
</div>
{when MEDIUM/}
<div class=”os-priority-medium”>
<span class=”os-badge os-badge–warning”>Medium</span>
</div>
{when LOW/}
<div class=”os-priority-low”>
<span class=”os-badge os-badge–success”>Low</span>
</div>
{endcase/}

Empty State Pattern (Highly Recommended)

{if VALUE/}
&VALUE.
{else/}
<span class=”os-empty”>No data available</span>
{endif/}

Use this everywhere instead of blank cells.

Tags / Labels Pattern

{loop “,” TAGS/}
<span class=”os-tag”>&APEX$ITEM.</span>
{endloop/}

Highlight Special Tags (Loop + Case)

{loop “,” TAGS/}
{case APEX$ITEM/}
{when Critical/}
<span class=”os-badge os-badge–danger”>&APEX$ITEM.</span>
{when Internal/}
<span class=”os-badge os-badge–warning”>&APEX$ITEM.</span>
{otherwise/}
<span class=”os-tag”>&APEX$ITEM.</span>
{endcase/}
{endloop/}

UI State Pattern (Cleanest Architecture)

SQL

CASE
WHEN can_edit = ‘Y’ THEN ‘EDIT’
WHEN can_view = ‘Y’ THEN ‘VIEW’
ELSE ‘NONE’
END AS ui_state

Template

{case UI_STATE/}
{when EDIT/}
<a class=”os-link” href=”…”>Edit</a>
{when VIEW/}
<span class=”os-empty”>View only</span>
{otherwise/}
<span class=”os-badge os-badge–danger”>No access</span>
{endcase/}

This pattern scales best in large apps.

Email Template Pattern (CSS-Safe)

{case STATUS/}
{when APPROVED/}
<span class=”os-badge os-badge–success”>Approved</span>
{when REJECTED/}
<span class=”os-badge os-badge–danger”>Rejected</span>
{otherwise/}
<span class=”os-badge os-badge–muted”>Pending</span>
{endcase/}

Tip: keep CSS simple for email compatibility.

Checkout our sample app

Login: DEMO/DEMO

Team Usage Guidelines

One CSS file, many templates

Never hardcode colours in templates

Prefer {case} over nested {if}

SQL decides state, template decides look

Any snippet reused twice becomes a standard

Final Thought

This library gives you:

Consistent UI

Cleaner templates

Faster development

Easier maintenance

Most APEX template mess happens because CSS and directives grow randomly.

This approach keeps both intentional and reusable.

The post Oracle APEX – CSS + Template Directive Pattern Library appeared first on Ontoor blogs.