Oracle APEX: How to Display Column Text Color in Interactive Grid with JavaScript
Step-1:Create a new page in your application and give name to the page.
Step-2: Add below code in page level - Function and Global Variable Declaration
function highlightIgCell(){
$('.COLOR').each(function(index) {
var td_ele = $(this);
var val = $(this).text();
if(val == 'Preparing')
{
td_ele.attr('style','text-color:RED;color:#d50000
;font-weight:bold;')
}
if(val == 'Received')
{
td_ele.attr('style','text-color:ORANGE;color:#ff6d00
;font-weight:bold;')
}
else if(val == 'Completed'){
td_ele.attr('style','text-color:GREEN;color:#1b5e20;font-weight:bold;')
}
});
}
Step-3: In Execute when Page Loads paste the following code:
highlightIgCell();
var Node_v = document.getElementById('REGION_ID');
var children_v= {childList: true, subtree: true};
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
highlightIgCell();
}
}
};
var observer = new MutationObserver(callback);
observer.observe(Node_v, children_v);
Step-4: Create one region in the body and go to the properties select the type - Interactive grid .
Below is the SQL query for my table. you can change the code for your requirement.
SQL query:
SELECT
ORDERNUMBER order_num,
USER_NAME,
ITEM_NAME,
QUANTITY,
STATUS,
case
WHEN STATUS = 'Completed' THEN 'green'
WHEN STATUS = 'Preparing' THEN 'red'
WHEN STATUS = 'Received' THEN 'yellow'
end as COLOR,
NOTIFICATION_ID,
CREATION_DATE,
ITEM_ID,
MSG_READ,
DESCRIPTION
from KITCHEN_NOTIFICATION
Step-5: Add CLASS to your column that will be
color in my case : COLOR
Step-6: Add static id to your interactive grid in my case: REGION_ID
Output:
Great blog... thanks for sharing such a useful information
ReplyDelete