Change the text color of a shuttle based on a condition in oracle apex

I have two different tables in oracle apex, the first one is the documentation table which contains KPI’s, the second one is the results table which contains all the KPI’s results.

I have created a shuttle in a page to choose KPI’s from documentation table then, insert the results into the result table. What I need is, if the showed KPI’s from the documentation table don’t have any result in the results table it should be appeared in red color. Is it possible to do that?? Note: the primary key and the foreign key for the join between the tables is kpicode

Here is a screenshot of the shuttle:

here is the SQL query for the shuttle to bring all the KPI’s from the documentation table:

select distinct kpi as k1, kpicode as k2
from documentation
where kpi is not null;

Answer

The shuttle item does not allow you to provide html tags to style the options displayed in a shuttle. You could write your own items or probably achieve your requirement with a modification to the template, but I’d like to propose a really simple way using jQuery.

As you did not provide sample data, I am using the view user_tables and will try to highlight all the tables that include DEMO in their name with a red color, as soon as they are moved to the right side of the shuttle.

For my example, the source of the shuttle must provide some marking for the elements that need to be highlighted. If the table name contains DEMO, I prepend [red]:

select
    case when table_name like '%DEMO%' then '[red]' end || 
    table_name as d,
table_name as r
from user_tables
order by table_name

Now, the shuttle will look like this:

Now, add a short jQuery snippet to the Execute when Page Loads section of the page attributes:

$('option:contains("[red]")').addClass("red").each(function() {
    $(this).html($(this).html().replace("[red]",""));
});

This will both add the CSS class red to the matched elements and remove the text [red].

As a last step, use inline CSS to actually apply the styles:

.shuttle_right .red { color: red; font-weight: bold }

The filter .shuttle_right will make the red color only appear on the right side. You can simply omit it if you want it to appear on both sides.

Now, the shuttle will look like this: