Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

How to use colours in a badge-list and limit the DA called javascript to just a specific region

boketiApr 9 2019 — edited Apr 12 2019

Hi everyone!

I'm using Apex 18.1 on an Application that was originally written in Apex 5 and converted to Apex 18.1. The application works well. One of my pages incorporates a region which utilizes a 'badge-list' (defined as a plug-in).

As an example I've defined a region type: Badge List (plugin) with the following Source SQL.

In Region 'A'

select label,

       to_char(value,'999G999G990') val,

       url

from (

       SELECT DISTINCT 1 display_order

              , 'LPMH' label

              ,12.6 value

              , '' url

       FROM DUAL

   

UNION ALL

        SELECT DISTINCT 2 display_order

              , 'OUTSTANDING VOR' label

              ,300 value

              , '' url

       FROM DUAL

)

order by display_order

The Badge List displays perfectly.

To add colours dependent on the values I created a Dynamic Action

Affected Elements: Region

Region A

Execution Options

Event: Set Badge List Colours - A

After Refresh: executes the following Javascript code

javascript: $(".t-BadgeList-value").each(function() 

    { 

        if (parseInt($(this).text()) < 76) $(this).css( 

        { 

            "background-color": "lightgreen" 

        }); 

        else if (parseInt($(this).text()) > 149) $(this).css( 

        { 

            "background-color": "red" 

        }); 

        else $(this).css( 

        { 

            "background-color": "yellow" 

        }); 

    }); 

This works perfectly.

I've repeated the above creating two badge lists this time using a different Region and Dynamic action and a javascript to set the colours for the new badge list only.

javascript: $(".t-BadgeList-value").each(function() 

    { 

        if (parseInt($(this).text()) < 30) $(this).css( 

        { 

            "background-color": "blue" 

        }); 

        else if (parseInt($(this).text()) > 200) $(this).css( 

        { 

            "background-color": "yellow" 

        }); 

        else $(this).css( 

        { 

            "background-color": "red" 

        }); 

    }); 

The problem I have is that the 'last' defined javascript seems to affect all the badge lists in different regions on the page.

How can I write the code so as I can have different set of colours for the values in a region/badge list.

Any suggestions?

TIA

Comments
Post Details
Added on Apr 9 2019
3 comments
1,165 views