Switch panes in APEX 5.0 Page Designer – Part 1

This is the first in my hack-a-tronik series. Lately I’ve been playing around with the APEX 5.0 Page Designer. In particular I was interested in seeing how some of its internals worked.

I love the new page designer, but something that was kinda bothering me is that you have to do quite some “mouse-kilometres” while working on an apex application.
What I mean by that is that you move the mouse between the left pane (navigation tree for rendering/dynamic actions, …) and right pane (properties editor) a lot.

So it would be great, if I could swap panes to make it look more like:

Page Designer with panes swapped.

In other words, we’re going from this:


.. and change it to ..


Now as most of you probably know, the Page Designer is built on jQuery and jQuery UI widgets. John Snyders of the APEX team has some very interesting posts about the widgets available APEX on his blog.

For learning new stuff, I always like to take a peek underneath the hood. In this particular case, the widget that interests us, is the splitter widget. You can find the javascript source code of this widget in the apex installation directory: /images/libraries/apex/widget.splitter.js

Now, you have to know that it’s not enough to just swap the pane DIV’s in the DOM-tree. The widgets keep track of positions and resizing the panes would reinforce the original pane-order.

Basically I’m doing the following steps:
1. Check if we’re in Page Designer, if not exit early.
2. Swap the pane DIV’s in the DOM-tree
3. Destroy the existing splitter-widget and re-create using saved options.

The APEX splitter widget is a custom jQuery UI widget. So it helps a lot to take a look on how jQuery UI widgets are built. Google is your friend there.

Anyway, before we continue here’s a word of warning. The javascript code I show below is not intended for production use. Don’t fool around with APEX production code. You have been warned. I’m just showing you how things can be done.

I’m also confident, that a future version of the Page Designer will have the possibility to swap panes out-of-the-box.

Pretty much the Page Designer can be seen as a single-page app. Once loaded from the server, all remaining communication is done via AJAX calls. That also means that if we inject the below code after the page designer has loaded, the code stays resident until we leave the page designer page.

Anyway, without further due, below is the javascript code. After the Page Designer has loaded, open your browsers’ javascript console, copy and paste the below script code and type pd_fix() to run.

In the next hack-a-tronik I’ll try to show how to include the functionality as a plugin for Chrome, Firefox (or similar).

Not sure how I’m gonna tackle it.  Because of good security reasons, the browser plugin infrastructure does not really allow you to access existing javascript objects on a page (well at least that’s the case for Chrome, but I expect it will probably be the same for Firefox).

Bye for now.


3 thoughts on “Switch panes in APEX 5.0 Page Designer – Part 1”

Leave a Reply

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