Get A Birdseye View of an APEX App

Over the years, one of the age old problems when speaking to users of applications, is that they can’t get to information they need quickly. There could be a range of reasons for this, badly designed flow, missing information or just simply too much scrolling on the screen - the latter being the reason for this post.

The enhancements in APEX 5 and 5.1 have made a massive difference to how we build APEX apps, also the likes of Regional Display Selectors, and collapsable regions are great features. These allow regions to be displayed in a different way based on user action. Even though, we still get queries like “I still want to see everything though!" - this is obviously subject to performance etc.

So looking about for potential solutions, I came across Birdview.js.

Birdview.js is a simple Javascript plugin, that at the press of a button will show a high level (birdseye) view of your application. Take a look at the demo on the site, and just press the “Z" button on your keyboard.

This library is pretty new, less than a couple of weeks old, but took the opportunity of seeing how easily it could be embedded into APEX. Answer: very easy.

Demo

Check out the demo here (username = demo password = demo):

https://apex.oracle.com/pls/apex/f?p=134575:5

The test case is pretty simple, this is the standard Sample Database Application, and page 5 has been updated to include all the charts on a single page. As with the plugin site, press the “Z" button. This will show the overview, you are then able to click anywhere on the overview and the screen will scroll to that section. Pretty neat.

Installation

To install, follow the instructions below:

1. Download the css and js files from here: http://achrafkassioui.com/birdview/js/birdview.js and http://achrafkassioui.com/birdview/css/birdview.css

2. In your APEX application, load as Static Files (or wherever you store your reference files)

1. Reference Files in User Interface Defaults:

1. On Page 0, create a "Page Load" Dynamic Action with the following settings:

   • True Action:

     • Action: “Execute Javascript"

     • Code:

     • birdview.init();

That should be all you need to do, every page that needs to scroll with have the option by pressing the “Z" on the keyboard

You can also pass in the button parameter into the init command, which will hide the icon at the top right of the screen, for example:

birdview.init({

button: false

});

Caveats

This has been tested in Apex 5.1 at this stage, but will look at 5.0 and look under the hood a bit more in the near future to see if there is anything else of interest and post back here.

This has been tested on Safari and Chrome on Mac and IE11 on Windows 7. Also tested on iPhone, the pinch / zoom works well.

Any questions or ideas, please get in touch via my twitter