Declarative ReFlow Table Reports in Theme 25

A while ago, at KScope 14 in New Orleans, I presented on Responsive Web Design with APEX Theme 25. One of the topics of my presentation was the lack of responsiveness of standard reports in Oracle Application Express. Meanwhile there were several attempts/solutions to make Theme 25 reports more responsive.

One approach is to add custom CSS code for those columns to hide on specific device sizes, using @media queries:

Major disadvantage of this approach is, that the user is getting less information on smaller devices. Instead of just hiding the data, it would be much nicer to present the data in a different, appropriate way, like rearranging the data in a fashion it fit on the small screen and/or displaying it optionally (on user demand). One technique to realize this is called “Reflow Tables”.

A reflow table works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. One particular nice implementation of this technique is the FooTable jQuery plugin.

Recently Dimitri Gielis published a solution/demo based on this jQuery plugin. Using his approach, you will have to add a custom report template for each report you want to responsify. The problem with the FooTable plugin is: the definition of which column to “reflow” on a specific resolution has to be placed in the table header, which is not accessible in APEX by means of declarative parameterization (hu????). Plus, the plugin expects the report table to be a direct child element of a DIV element, which does not apply for standard APEX report templates, where the actual data table is enclosed by another table, that is used for positioning pagination elements and buttons. So I see the point in creating a separate report template, as Dimitri did, but you are losing a lot of the standard APEX functionality like this.

I tried a different approach: modify the FooTable JavaScript and CSS, so it will work with the standard APEX report template. My main goal was, to be able to declaratively configure any (Theme 25) classic report to be responsive, which means:

• add a possibility to use the Report Attributes > Layout and Pagination > Report Attribute Substitution to indicate/trigger that a table uses the reflow mechanism
• possibility to add classes to Report Attributes > Column Attributes > Column Formatting > CSS Class to hide/reflow columns depending on device/screen width (remember: the Theme 25 grid is basically a number of fixed width grid definitions)
• provide/initialize the FooTable plugin with the Theme 25 grid steps and define appropriate class names for these

Here is the result (live demo):

How it works

Warning: this solution does not work with Partial Page Refresh enabled (out-of-the-box). This could be done using an dynamic action to reinitialize the ApexFooTable each time a PPR occurs for the report region, calling the JavaScript function initFoo();

Installation:

• Download the zip containing all necessary resources here
• Unzip the content and place the apexfootable folder somewhere on your server
• add the following URL references to your page, or even better, your page template:

Configuration:

Create your classic report (or take any existing classic report) and configure the reflow functionality by adding “data-reflow” to the report’s Layout and Pagination property:



Add one of the defined “hide-” classes to every column you want to hide for a certain screen size (see reference table below):



Available ApexFooTable hide- classes are (derived from Theme 25 grid @media queries):

Class Name	breakpoints/screensize when column will be hidden
hide-all	column will always be hidden and information placed in reflow row
hide-desktop-l	< 1900 px
hide-desktop-m	< 1660 px
hide-desktop-s	< 1420 px
hide-desktop-xs	< 1260 px
hide-tablet, hide tablet-l	< 1025 px (iPad/tablet Landscape)
hide-tablet-p	< 960 px (tablet Portrait)
hide-phone, hide-phone-l	< 768 px (smartphone Landscape)
hide-phone-p	< 480 px (smartphone Portrait)

That’s it. Give it a try. If you encounter any problems, let me know.