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: IExecute 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:









 


Comments

Post a Comment

Popular posts from this blog

Oracle Apex - How to Display Add, Remove, Delete buttons on the Cards-Using Classic Report