Skip to main content

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

The demo is here.

That's it.

Happy APEXing!!!...

References:

Comments

  1. The highlight is lost after pagination. Maybe hook into apexafterrefrresh event. Or maybe the intention is not to show the highlight after the search filter is applied? For IG there is an undocumented highlighter option, which you can see in action in the popup lov.

    ReplyDelete
    Replies
    1. Hi John,

      Yes, You are correct. Thanks for notifying me. Highlight should't lost even after pagination or filter applied. Let me change it, but Idea behind this post is to highlight the cell of IR when IR search field has a some values else the highlight will be lost.

      Delete
    2. Hello,
      Thank you for the good example (very interesting).
      I gave it a try and still the issue with pagination (and filter setting) : as reported by John.
      In the same time, it is perfectly working in you example. Could you please share the modification brought ?
      BR
      Sen

      Delete
  2. I really liked your Information. Keep up the good work. Body Code Practitioners

    ReplyDelete

Post a Comment

Popular posts from this blog

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Here I am giving an example to print the page numbers dynamically in the RTF (Rich Text Format) template. Step 1:  Go to page footer and copy and paste the below script. Page |  <?fo:page-number?>  of  <?fo:page-number-citation:xdofo:lastpage-joinseq?> <fo:page-number> :   This is the object, which is used to represent the current page-number. <?fo:page-number-citation:xdofo:lastpage-joinseq?> :  This is the syntax, which is used to represent the total number of pages. Step 2:  Load the XML and preview the result. Output: That's it. References: fo:page-number Printing Page Number Code in Oracle XMLP RTF Template

Generating the report with APEX_DATA_EXPORT

With the APEX_DATA_EXPORT package, you are able to export data from Oracle Application Express in the following file types: PDF, XLSX, HTML, CSV, XML, and JSON. Step 1: Create a table and populate it with some sample records. CREATE TABLE emp   (     empno        NUMBER,     first_name   VARCHAR2(240),     last_name    VARCHAR2(240),     mgr          NUMBER,     deptno       NUMBER,     sal          NUMBER,     created_date TIMESTAMP (6),     comm         NUMBER,     hiredate     DATE,     JOB          VARCHAR2(240),     ename        VARCHAR2(240),     PRIMARY KEY (empno) USING INDEX ENABLE   ); /    INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (1, 'Larry', 'Ellison', ,                  10, 5000, LOCALTIMESTAMP);   INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (2, 'Juan', 'Juan', 1,  

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Here I am giving an example to save selected interactive grid records into a oracle apex collection. Step 1: Create a new blank page. Note: Mine was page 20. You will need to update reference to " P20 " with your page number if it's different. Step 2: Create a new interactive grid report region to the page using below query. Set Static Id "EmpDetails" to the region. SELECT  *     FROM   ( SELECT  emp . empno ,                emp . ename ,                emp . JOB ,                dept . dname department ,                dept . loc  LOCATION ,                mgr . ename  manager ,                emp . hiredate ,                 nvl ( emp . sal , 0 )  salary ,                 nvl ( emp . comm , 0 )  commission            FROM  eba_demo_chart_emp emp ,                eba_demo_chart_dept dept ,                eba_demo_chart_emp mgr           WHERE  emp . deptno = dept . deptno             AND  emp . mgr      = mgr . empno  ( + )           ORDER   BY  emp . ename