Wednesday, March 19, 2014

Join me at KScope 14 in Seattle


My first ODTUG Kaleidoscope conference was Monterey in 2009. I was very impressed with the speaker lineup and managed to convince my manager to fund trip and conference. The conference was great in every aspect: Lots of good quality sessions, perfect food and lots of people to talk too. What I like most about KScope: it’s all focused on us developers; making us feel comfortable and creating an atmosphere, almost like you are a part of one big family. Speakers, fellow developers, Oracle development teams, everybody comes for the same reason: share knowledge. I was so impressed with the conference format and got to meet so many people, I decided to come back again. Another thing I learned: Being an Oracle developer for many years, I too have knowledge, people are interested in hearing and learning from. When the Call-for-Papers for KScope 10 was opened a few months later, I submitted 2 abstract. Unfortunately these didn’t get accepted and being busy starting up my own business in 2010, I had to miss that year’s conference. KScope 11 (Longbeach, CA), 12 (San Antonio, TX) and 13 (New Orleans, LA) I managed to participate again, this time as a presenter myself. Again, the events were perfectly organized and I went home with my luggage full of inspiration and ideas.

I’m already looking forward to present at KScope 14 in Seattle this year. It feels like a family reunion. I still think: this is one of the best conferences to learn, meet, expand your network and have fun at the same time, worth the money and 12 hour flight. It pays off for me, definitely.

Don’t forget: ODTUG is organizing an APEX Theming Competition his year. Winners will be announced during the conference. I was asked to take a seat in the committee to judge the submitted themes, alongside with Jorge Rimblas and Shakeeb Rahman. BTW: you don’t have to be in Seattle to qualify for submitting your work.

Visit the KScope site for information about the event.




Friday, March 7, 2014

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();

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



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.