Highlight Interactive Grid cells using MutationObserver API in Oracle APEX

This blog explains how to highlight the Interactive Grid cells using JavaScript instead of using the inbuilt highlight feature.

Let us start with a one-line information about Mutation Observer: 

• The Mutation Observer provides the ability to watch for changes made in the DOM tree.

What advantage does the Mutation Observer have when compared to the normal way of highlighting. Let me tell this with an example.

  

Customer: I want an Editable  Interactive Grid that highlights the status field on Page Load and when the changes are made and saved. The color must also remain when sorting, filtering etc.. is applied to the IG.

  

In the usual way, if I have to achieve this, I should create a JavaScript function that highlights the IG and call the function "on page load, on save of the IG and on page change of the IG". So, I was thinking, how can this be achieved using a single piece of code instead of calling it in each event. Mutation Observer helped me to achieve this use case.

Follow the below steps to highlight the IG:

1) Create an Interactive Grid.

2) Provide a Static ID to the Interactive Grid. (In this example: EMP_IG)

3) A CSS class has to be provided to the column that has to highlighted. Go to the Appearance section of the column that has to be highlighted and provide a CSS Class. (In this example: role)

4) Paste the below code in the Function and Global Variable Declaration Section of the page.

function highlightIgCell(){
    $('.role').each(function(index) {
            //get current cell element
            var td_element = $(this);
            //get value of cell element
            var condition_value = $(this).text(); 
            // color the corresponding cell based on condition           
            if(condition_value == 'Manager')
            {
            td_element.attr('style', 'background-color:#0047AB;color:#FFFFFF;font-weight:bold;') 
            }  
            else if(condition_value == 'Team Lead'){
                
                td_element.attr('style', 'background-color:#006400;color:#FFFFFF;font-weight:bold;')
            }
            else if(condition_value == 'Software Developer'){
                td_element.attr('style', 'background-color:#ffff00;color:#000000;font-weight:bold;')
            }                       
    });
}

5) Paste the below code in the Execute when Page Loads section of the Page.

//On Pageload load for elements to colour
highlightIgCell();
// Get element too observe
var targetNode = document.getElementById('EMP_IG');
// Options for the observer (which mutations to observe) --> Check if something changes for children elements
var config = {childList: true, subtree: true};
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {               
            highlightIgCell();
        }
    }
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);

Note: In the above codes replace EMP_IG and role with the Static ID and Class that you have provided.

    

6) Save and Run the page.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Click here for DEMO

Happy CODING !!!

Thank you :)