3

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 ComponentsTemplates)
    1. create one from scratch
    2. Name: jQuery Easy Accordion
    3. Template Class: e.g. Custom 3
    4. Template:
      <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
      
      #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
      </div>
    5. Sub Regions – Template:
      #SUB_REGION_TITLE#
      #SUB_REGION#
  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.
    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
    </div>

    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#
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#

    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.

  1. Harjeet says:

    Hi

    I’m new to Apex and JQuery working together and I’m trying to get the slider menu plugin to work with my application. I don’t have direct access to #IMAGE_PREFIX#libraries but have uploaded all the files via the workspace (images, css and js). I’ve updated the path in the template code to go to ‘ #WORKSPACE_IMAGES# ‘ instead of ‘ #IMAGE_PREFIX#libraries/easyaccordion/css/ ‘ for the js and css files.

    However I can’t get my slider menu to work the same way. The sub regions aren’t sliding or covering each other, they are static. Do I have to make the same path change in the css and js files as well?

    Thank you for any help that you’re able to give. If you need more information or an image of my problem, let me know.
    Harjeet

    • ND says:

      same problem for me . the sliders are not working . it’s just coming static, any work around or is it a browser specific ?

      Thanks in advance.

      • mnolan says:

        You will need to use a tool like firebug to see if the scripts and files are loaded on the page i.e. no 404 errors in the net tab for them.

        If you are uploading the images into APEX as static files you will have problems with the image references. You should upload under the #IMAGE_PREFIX# directory.

        Cheers
        Matt