Evaluate Consulting Services

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX


Oracle APEX Interactive Report has default search option, where we can search the values which are exists in the report. Here I am giving an elegant method to highlight the cell of interactive report based on search criteria.

Step 1: Create a new blank page.

Step 2: Create a new Interactive Report region to the page.

Step 3: Set CSS Classes “data-highlighter” to the region.

Fig 1: Set CSS Classes

Step 4: Create a class by adding below CSS to the page in inline CSS section. It will change the style of report cells.

Go to Page => CSS => Inline

.highlight-data {

    font-weight: bold !important;

    background-color: #ffecb4 !important;

}

Step 5: Get a class for IR search component by following below steps.

  1. Place a mouse cursor on IR search component.
  2. Right click a mouse (The right mouse button is often used to open contextual menus, which are pop-up menus that change depending where you click) and select the menu Inspect. DevTools pop-up comes up when we click on Inspect menu, from there we can get a class (JQuery Selector) for the particular components.

Fig 2: Get a Class

Step 6: Create a new Dynamic Action and set name to Highlight IR Cell that fires when key is released from IR search field.

Fig 3: Create Dynamic Action

Step 7: Set action to Execute JavaScript Code and copy and paste the following code into the JavaScript Code section.

                                                                                 Fig 4: True Action

    // get the values from IR search field and make it to lower case

    v_search = $(‘.a-IRR-search-field’).val();

    v_search = v_search.toLowerCase();

    $(“.data-highlighter td”).each(function () {

        // get the data from IR cell and make it to lower case

        cellData = $(this).text();

        cellData = cellData.toLowerCase();

        // search IR search field value with IR cell data

        cellData = cellData.search(v_search);

        // class (highlight-data) should be defined in inline CSS section

        // if any match found in IR cells then add the class 

        if ((cellData != ‘-1’ || cellData == 0) && v_search != ) {

            $(this).closest(‘td’).addClass(‘highlight-data’);

        }

        // if no match found in IR cells then remove the class

        else if (cellData == ‘-1’) {

            $(this).closest(‘td’).removeClass(‘highlight-data’);

        } else

            $(this).closest(‘td’).removeClass(‘highlight-data’);

    });

Steps to Create Dynamic Action:

Event: Key Release

Selection Type: JQuery Selector

JQuery Selector: .a-IRR-search-field

True Action: 

Execute JavaScript Code:

<<JS Code – Ref Sep 7>>

That’s it.

Happy APEXing!!!…

References:

Leave a Comment

Your email address will not be published. Required fields are marked *