APEX 4.1 & jQuery Validation Plugin

Recently I’d started work on a new project in APEX 4.1 and a target browser of IE6. As part of the initial project setup I used the APEX Form Validation plugin provided by Guido Zeelen which is based on the jQuery validation plugin developed by Jörn Zaefferer from bassistance.de. Whilst I had no issue with the plugin in 4.0.x and IE6, I ran into a problem in APEX 4.1 which meant that on page submit all forms were passing as valid in IE6,7,8 even when they were invalid. However on Firefox, Chrome it was working perfectly… go figure!

There were a couple of red herrings that came up when I was looking for a solution, but in the end it was due to APEX running jQuery 1.6.2 and using v1.7 of the jQuery validation plugin which wasn’t a supported combination. The simple fix was to upgrade to v1.9.0 and I’m happy to say that it’s now working again on IE6,7,8…. well not entirely happy after losing a number of hours debugging, but hopefully you won’t if you run into the same problem :)


APEX Plugin – Interactive Report Dynamic Action Package

A couple of months ago I had a request to create a “Freeze Columns” dynamic action plugin for an interactive report which behaved like the following demo. Whilst I wasn’t sure whether it would be possible I knew that in APEX 4.0 we had some event hooks such as “After Refresh” which we could bind a dynamic action to. We could use this event to manipulate the Interactive Report HTML after every refresh to produce the required layout. Whilst the initial prototype was quick to implement, mainly thanks to jQuery, there were a number of challenges which I faced:

  1. Cross browser and version support since different flavours of IE handled the positioning of scrollbars differently. Achieving equal row heights when splitting the report into two HTML tables was tricky, each browser seemed to behave a little different.
  2. The header drop down menu’s would be placed incorrectly when horizontal scrolling occurred on the unfrozen set of columns, which unfortunately wasn’t as simple as the usual workaround for relative positioning.
  3. After resolving the above and the addition of several enhancement requests i.e. adding in additional vertical scrolling whilst freezing the header (see this demo) and making it work with Clarifit’s existing column grouping plugin (demo), I’m proud to announce the release of publicly available commercial package to perform all 3 cosmetic changes in combination or independently of each other. Here’s a screenshot to give you a visual of the plugins in action:

    Oracle APEX - Interactive Report Dynamic Actions

    Here’s a YouTube video which walks you through how to combine all 3 dynamic actions on the same interactive report.

    Lastly here’s the demo application to see them in action, and download page. The added extra is that, thanks to the release of APEX 4.1 on apex.oracle.com last Friday, I have been able to certify the package against this new release of APEX :)


APEX Plugin – jQuery Menu

I’m releasing my first publicly available region plugin. It’s based on the jQuery Menu produced by the Filament Group. You can create a menu based on existing APEX lists, attach a menu to a breadcrumb or your page tabs, or create a menu based on the contents of a custom table.

It comes with 10 configurable options and requires the definition of a single SQL query for the menu contents in the form of:

,      pid
,      text
,      url
,      display_seq

Here’s an example based on an existing APEX list (my recommendation) with authorisation and condition support.

SELECT list_entry_id         id
,      list_entry_parent_id  pid
,      entry_text            text
,      entry_target          url
,      display_sequence      display_seq
FROM   apex_application_list_entries
WHERE  application_id       = :APP_ID
AND    list_name IN ('[List Name(s)]')
AND    auth_condition_check
       ( p_condition_type        => condition_type
       , p_condition_expression1 => condition_expression1
       , p_condition_expression2 => condition_expression2
       , p_authorization_scheme  => authorization_scheme
       ) = 0

Here’s the link to the demo, documentation, and download.

And here’s a YouTube demo of it in action….