Easy Accordion – APEX Region Template

Although it’s tempting to create a plugin for every new widget you want to introduce into APEX, sometimes it’s just as easy to create a new template and add the functionality within it. Patrick Wolf provided a simple way of creating a jQuery UI accordion using a region template in the following forum thread

The same technique can be applied for the jQuery Easy Accordion written by Andrea Cima Serniotti

Please note: the following is copied pretty much verbatim from Patricks procedure which was pretty clear and concise, all that I’ve changed is the template code.

  1. Download easyaccordion.zip and unzip under #IMAGE_PREFIX#libraries
  2. (Optional) Modify easyaccordion.css easy-accordion-style1,easy-accordion-style2,easy-accordion-style3 CSS to meet your own requirements
  3. Create a new template of type “Region” (Shared Components\Templates)
    1. create one from scratch
    2. Name: jQuery Easy Accordion
    3. Template Class: e.g. Custom 3
    4. Template:
    5. Sub Regions – Template:
  4. On the page where you want to have an Accordion, add a new “HTML” region which acts as the container for the “accordion”. Set the region template to your new “jQuery Easy Accordion” template and make sure you set in the “Region Attributes” the correct class setting for your accordion style e.g. class=”easy-accordion-style1″
  5. Create as many sub regions (that are the actual accordion slices). It’s just important that you set the “Parent Region” to your container region you just created before. As region template I would pick “No Template” or any other template you want to have.

Now the above works just fine, but if you need to customize the parameters for several different pages in your application then you are going to have a problem. To workaround this here are two potential options for changing the template:

  1. We use an existing page/application item and use the substitution syntax e.g.

    and we would set session state for the item on page load using a PLSQL page process before/after header e.g.

    :P1_ITEM := '{
       autoStart: true,
       slideInterval: 5000,
       slideNum: false
  2. Or we use one of the available template substitution strings e.g. #REGION_ATTRIBUTES#

    Note: I have defined the class setting using the region title. So in your parent container region title you would specify the appropriate CSS class e.g. easy-accordion-style1. Then within the region attributes for your parent container region you would specify the JSON object e.g. { autoStart: true, slideInterval: 5000, slideNum: false }

Here’s a demo of the accordion in action.


Ext.tree.TreePanel – Server Side Search **NEW**

One of the great things about the APEX plugin – Ext.tree.TreePanel – is that you can either load the tree in one AJAX call on page load or in multiple calls when each node is expanded the direct children are returned. In addition to the expand of each node via AJAX, you can also control the number of levels to fetch, whether its 1 (the direct children), 2, 3, 4 or more you have the flexibility to choose. The other great feature is the ability to search the tree and still retain the parent level hierarchy for child nodes which match the search criteria e.g.

However when using both these features in combination, there was a performance problem in the initial plugin release. This was due to the search being performed on the client side. The entire tree would be expanded in order to locate the search results. In cases of large tree’s this could cause significant number of AJAX processes to be fired and place an overhead on the database. In order to combat this problem I have introduced a new server side search feature which will perform the search on the database and return the results in a single AJAX call. The results mimic the client side search by returning the parent level hierarchy for child nodes which match the search criteria.

This serverside search results in optimal performance and means that large tree structures of 10000+ records are now easily searchable without having to load the entire tree structure on the client, which most other Ext implementations are prone to. This new feature is automatically enabled when expanding each node via AJAX is enabled.

Now here’s the really good news… Until the end of May I’m offering a “FREE plugin license” for the Ext tree or Multifile upload plugin when 2+ development services/support are purchased. These 2+ days can be used from anything from training/mentoring on APEX/PLSQL/Javascript/CSS, design advice, troubleshooting, environment setup, security reviews, plugin development, prototype builds, theme design, etc.

The great news is that the days do not have to be used in full, you can decide to schedule it in sessions as little as 30 mins depending upon your requirement. But remember this offer is limited and only until the end of May, so don’t delay.