Oracle APEX Check Marks Plugin Tutorial

I recently updated the Oracle APEX Check Marks Template Component plugin to 24.2.1.

This plugin transforms ordinary data columns by swapping out plain values for dynamic icons and styles.

Imagine seeing green ticks ✔for completed tasks, red crosses ❌ for issues, or even custom icons 🧛‍♂️ for special statuses very easily

This plugin is super flexible: you can tailor which icons appear for different values, add tool-tips for extra context, and even turn icons into clickable links.

This blog is a simple getting started guide

Setup

Lets start with a table

-- Create the table
CREATE TABLE cm_demo (
    DETAIL VARCHAR2(255)
);

Add some data

BEGIN
DELETE FROM cm_demo;
-- Insert 10 rows
INSERT INTO cm_demo (DETAIL) VALUES ('Y');
INSERT INTO cm_demo (DETAIL) VALUES ('N');
INSERT INTO cm_demo (DETAIL) VALUES ('Y');
INSERT INTO cm_demo (DETAIL) VALUES ('N');
INSERT INTO cm_demo (DETAIL) VALUES ('Y');
INSERT INTO cm_demo (DETAIL) VALUES ('N');
INSERT INTO cm_demo (DETAIL) VALUES ('Y');
INSERT INTO cm_demo (DETAIL) VALUES ('N');
INSERT INTO cm_demo (DETAIL) VALUES ('E');
INSERT INTO cm_demo (DETAIL) VALUES (NULL);
END;

And create an Interactive Report on it

Finally install the Check Marks plugin into the application.

We’re ready.

Truthy / Falsey

By assigning the column type for DETAIL to Check marks, and the Plugin Setting of Column to DETAIL…

This produces

This is technically correct as it adheres to the Template Directive rules, however you may have noticed that I have values of E and NULL that are displayed as ✔️and ❌. Therefore to represent these as different icons, I set these attributes:

and it now produces

If I additionally want to see the value is I set this

which produces

What to shade in the background? I use these settings

Named Values

Lets insert some data

BEGIN
DELETE FROM cm_demo;
-- Insert 10 rows
INSERT INTO cm_demo (DETAIL) VALUES ('NEW');
INSERT INTO cm_demo (DETAIL) VALUES ('PENDING');
INSERT INTO cm_demo (DETAIL) VALUES ('IN_PROGRESS');
INSERT INTO cm_demo (DETAIL) VALUES ('COMPLETE');
INSERT INTO cm_demo (DETAIL) VALUES ('NEW');
INSERT INTO cm_demo (DETAIL) VALUES ('PENDING');
INSERT INTO cm_demo (DETAIL) VALUES ('IN_PROGRESS');
INSERT INTO cm_demo (DETAIL) VALUES ('COMPLETE');
INSERT INTO cm_demo (DETAIL) VALUES ('NEW');
INSERT INTO cm_demo (DETAIL) VALUES ('PENDING');
END;

Set the following attributes:

[
  { "v": "NEW", "r": "u-info" },
  { "v": "PENDING", "r": "u-danger" },
  { "v": "IN_PROGRESS", "r": "u-warning" },
  { "v": "COMPLETE", "r": "u-success" }
]

This gives this affect

Want icons too?

[
  { "v": "NEW", "r": "fa fa-file-new u-info-text" },
  { "v": "PENDING", "r": "fa fa-pause u-danger-text" },
  { "v": "IN_PROGRESS", "r": "fa fa-person-running u-warning-text" },
  { "v": "COMPLETE", "r": "fa fa-check-square-o u-success-text" }
]

Icons on the right?

I also set this

Or maybe just Icons?

Want the text colored the same as the icon?

Want a catch-all? - in this case I’ve removed COMPLETE from named values and going to catch it in Other Values

Want to use another label?

Change your SQL

select DETAIL, INITCAP( DETAIL ) alt_label
  from CM_DEMO

Then set ALT_LABEL to a hidden type. Then use the following settings on the plugin

Other Settings

Here are the other settings we’ve not covered

Link gives this

Custom-Attributes gives this

Tooltip gives this

Need more help?

There is a tonne of recipes and detailed help on the Check Marks Github Page. From Power levels, RAG statuses, Number counters, Pie charts and more as well as detailed overview of each setting

Like this plugin?

It’s MIT license Open Source Project, so you are welcome to contribute with a Pull Request. Consider donating or otherwise… just have fun with it.

ENJOY!

Whats the picture? It’s Bolton Abbey. Visit Yorkshire!