Add a “Reset” button to your Interactive Reports

Posted on Posted in APEX, Interactive Reports, Javascript

A client posed a reasonable question; could we just click on a button to reset an Interactive Report? Paraphrasing the conversation, the genesis of this request was that in order to reset a report we need to click Actions > Reset > Apply. That’s three clicks for what I would like to accomplish with one – said the client.

The APEX interactiveReport widget does contain a private _reset method, I was able to extend the widget with a public “reset” call this way:

if (typeof $.apex.interactiveReport === "function") {
    // only extend when the IR code is present
    $.apex.interactiveReport.prototype.reset = function() {this._reset();};
}

The code above is best if specified globally for the whole application (when Page Loads). The “IF” with typeof is to make sure the IR widget is present in the page, when your page does not contain an IR, the widget code will not be there and this call will fail.

Once this is in place, a button can reset the IR with a call like this:

apex.jQuery('#STATIC_ID_ir').interactiveReport("reset");

Demo: https://apex.oracle.com/pls/apex/f?p=46011:410

Tested on APEX 5.1, 18.1 & 18.2 (will likely work the same on APEX 5.0)

More Details

There are several other methods to accomplish this. Depending on what you want to accomplish, you can use the RIR or CIR keywords on the Clear Cache field of the APEX URL

f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:Request:Debug:ClearCache:itemNames:itemValues:PrinterFriendly

However, this method may require you also specify the Report in question (via the REQUEST ).

Also, you could use the API call APEX_IR.RESET_REPORT however it gets cumbersome to specify the currently selected report_id or report_alias. Plus it requires a page submission and that’s not always ideal.

The JavaScript reset() method taps into the standard reset of the IR, in my testing, it was the most flexible and fastest. Your mileage may vary.

DISCLAIMER: Because this method uses a private method call, it may change in future versions of APEX.

About

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

19 Comments on “Add a “Reset” button to your Interactive Reports”

  1. I need to automatically reset Interactive Report before new search is executed. Is it possible in Apex 5.04 version?
    eg:- Google Search (every new keyword search will auto reset filter of previous search)

    Reply

  3. Hi Jorge, I’m using apex 5.1. Im trying to use this reset report feature. The report itself runs fine, However when I click the button to reset it I get:

    Uncaught Error: cannot call methods on interactiveReport prior to initialization; attempted to call method ‘reset’

    I’ve confirmed that the piece of code to extend the _reset function is working., and my code to call reset is:

    apex.jQuery(‘#BudgetLookup’).interactiveReport(“reset”);

    If you have any ideas?

    Many Thanks
    Richard

    Reply

      • Its a DA on a button, but not set to “fire on initialization”. I dont get any errors in the chrome developer tools until I click on the button. The report is showing and has data on it etc.. Not a big issue because I now have a PL/SQL DA that resets the report when I click, but your solution looks neater… .

        Reply

        • Im getting the same Javascript error. I tried both putting the initial code with typeof condition in page properties as well as separate DA on page load.

          Reply

    • This is now an old question but I came across if whilst googling with the same error and looks like it has gone unanswered (though I’m sure most have sussed it). After a bit of digging I realised that what is not made clear in the original example is the ‘STATIC_ID_ir’ id is what is automaticaly assigned to the generated inner div (which contains the widget) and is basically the outer region div id with ‘_ir’ appended (for IR regions). So when I followed the example above I was incorrectly assigning ‘STATIC_ID_ir’ to the IR region in the IDE which meant the inner div was actually getting STATIC_ID_ir_ir’ but then still using STATIC_ID_ir’ to call the reset method which because there is no widget blows up. The author was obviously assiging ‘STATIC_ID’ to the IR region and not ‘STATIC_ID_ir’. So for the above example it should work by changing to: apex.jQuery(‘#BudgetLookup_ir’).interactiveReport(“reset”);

      Reply

  5. Hi,
    i was enjoying this solution till i hit dead-end with ie11 so ive to drop it…thx

    Reply

  7. Hi Jorge,

    I followed your blog and used ACTION as the Static ID for the IR. I placed the reset logic in the global JS file under Workspace files and also tried pasting the code into Page’s Function and Global Variables box. The Reset button has a DA that calls –

    apex.jQuery(‘#ACTION_ir’).interactiveReport(“reset”);

    However, I’m getting an error in the Console and the IR is not getting reset –

    Uncaught Error: no such method ‘reset’ for interactiveReport widget instance
    at Function.error (desktop_all.min.js?v=22.1.0:2:2616)
    at HTMLDivElement. (desktop_all.min.js?v=22.1.0:29:3836)
    at Function.each (desktop_all.min.js?v=22.1.0:2:3003)
    at S.fn.init.each (desktop_all.min.js?v=22.1.0:2:1481)
    at q.fn. [as interactiveReport] (desktop_all.min.js?v=22.1.0:29:3720)
    at Object.javascriptFunction (action-type-list?session=22754299951844:497:339)
    at da.doAction (desktop_all.min.js?v=22.1.0:22:5467)
    at da.doActions (desktop_all.min.js?v=22.1.0:22:3909)
    at HTMLButtonElement. (desktop_all.min.js?v=22.1.0:22:2575)
    at Function.each (desktop_all.min.js?v=22.1.0:2:3003)

    I like your approach of clearing just the un-saved settings of the report as expected (saved settings such as highlighting, filtering, pagination, etc will not get affected just as Action -> Reset does) but my code is not working. I’ve checked your demo page, its JS and button call and it works fine. So this is just something in the IDE I’m setting incorrectly.

    When = Click > Button > RESET
    Event Scope = static
    Event = Reset.
    Fire on Initialization is set to OFF.
    Selection Type = Region
    Region = Action
    Client-side and Server-side conditions are not selected.

    Please list out the settings you used for the Reset button, its DA, etc.

    I don’t understand why APEX team doesn’t expose such useful functions for use by others.

    I’m stuck! Please help as this will get used on literally dozens of IR pages in my app…

    Thanks!

    Reply

    • Hi Richard, did you include this snippet?

      if (typeof $.apex.interactiveReport === "function") {
      // only extend when the IR code is present
      $.apex.interactiveReport.prototype.reset = function() {this._reset();};
      }

      The call to .interactiveReport(“reset”); doesn’t exist until the previous snippet executes.

      Reply

      • Hi Jorge,

        Yes, I included it exactly in the JS file and added the provided path (#WORKSPACE_FILES#action#MIN#.js) to Shared Components > User Interface > JavaScript > File URLs and it didn’t work.

        Then I tried adding it to Global Functions & Variables on the page itself and it still gives the same error.

        Could you please export your page and any other settings and email it to me (or paste it here) so I can compare the deltas?

        Cheers!

        Reply

        • Ah, having that snipped (the if statement) on a file does not execute it. You need to call it. So place it inside a function in your file. For example

          function init() {
  if (typeof $.apex.interactiveReport === "function") {
    // only extend when the IR code is present
    $.apex.interactiveReport.prototype.reset = function() {this._reset();};
  }
}

          Then call it from “Execute when Page Loads” or on a Page Load DA.

          init();
          Reply

      • Thank you, Jorge!

        It works now just like Action > Report > Reset with a partial page refresh and without affecting saved formatting as opposed to clearing CIR,RIR approach that deletes all the formatting and does a full page refresh.

        APEX Team could have just placed a Reset button on IR just like IG (or exposed the _reset() method – it doesn’t make sense to declare it private) that could have been consistent with IG.

        2) Anyway to expand the nav menu parent nodes on click without doing a full page refresh? If we click the down arrow, the menu expands instantly without doing a full page refresh. It should work the same way if we click the parent node menu item name (that has a down arrow) without doing a full page refresh. Not sure why APEX Team did a half baked job here as currently, nothing happens on clicking on parent menu items.

        Cheers!

        Reply

  9. Jorge,

    This also works –

    apex.jQuery(“#XXX_actions_menu”).menu(“find”, “irReset”).action()

    (replace XXX with the name of IR)

    Reply

  10. Hi.

    I have the following defined on the “Execute When Page Loads” on my page.

    if (typeof $.apex.interactiveReport === “function”) {
    // only extend when the IR code is present
    $.apex.interactiveReport.prototype.reset = function() {this._reset();};
    }

    I have the following “Dynamic Action -> Execute Javascript Code on Page Load”

    init();

    I have the following “Execute JavaScript Code on button click”

    apex.jQuery(‘#ACTION_ir’).interactiveReport(“reset”);

    My Interactive report is “interactiveReport,” and the static ID is listed as ACTION.

    None of the above has worked, and I’m not sure if I’m placing things where they should be. Any help would be appreciated. Thanks.

    Reply

I love comments, write me a line