Switching Interactive Report to Icon or Detail View in APEX 5 using Javascript

At yesterdays APEX Meetup in Vienna someone asked if there is a way to switch an Interactive Report programmatically (using Javascript) to Icon / List / Report – View in APEX 5, since gReport doesn’t exist anymore (which could do the job before APEX 5).

Application_BuilderAbove you see an example of an Interactive Report everyone should know: this is the Application Builder listing all pages of an application.

The task at hand is to call a Javascript function to switch between Icon and List view. Looking at the APEX API Documentation doesn’t help in that case, there is no API mentioned that we could use.

Instead I chose to do a quick code review of the Interactive Report Javascript code and see what can be found there. A quick read reveals a method called _reportView which is meant to be private (judging by the name starting with an underscore) but is luckily exposed.

All we need to do now is grab the IR Javascript object and call that method, right? So let’s take a look at the IR definition and grab the static ID:

Page_DesignerNote: if your IR doesn’t have a static ID, then you should set one. Otherwise you’ll have to use the internal ID R489484894soandso.

Now let’s try it:

Application_BuilderTada!

jQuery('#<report-id>_ir').data("apex-interactiveReport")._reportView("ICON");

does the trick and switches to ICON view. REPORT would be the keyword for the standard listview, and DETAIL to show (if it is configured) the detail view of an interactive report.

Important Note: this isn’t documented and therefor not supported in any way. Most likely it will break in the future.

2 thoughts on “Switching Interactive Report to Icon or Detail View in APEX 5 using Javascript

  1. Nice!
    For those copy pasting the code, you may need to switch the first quote and commas, they are all flipped (like MS Word does).

Leave a Reply

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