Set selected pane in Accordion Container

Submitted by danielaldana on Tue, 09/06/2011 - 18:14

I want to use an Accordion container and depending on the process activity I want to expand a specific pane by default when opening that activity. Is there a way to do this?

RE: Set selected pane in Accordion Container

Hi danielaldana,

Yes this is possible, but you will need to use a bit of JavaScript to manage it.

To make things easier, I have tried to create a generic approach that you can reuse.

Firstly you will need to add the following script fragment to a page or application level script file defined on the Application Map screen.


dojo.addOnLoad(function() {
    dojo.query('input.accordionControl').forEach(function(item) {
        var accordionName = item.name.substring(0, item.name.length - '_control'.length);
        if ((typeof(dijit) != 'undefined') && (typeof(dijit.byId) == 'function'))
        {
            var acc = dijit.byId(accordionName);
            if (acc != null)
            {
                var pane = dijit.byId(item.value);
                if (pane != null)
                    acc.selectChild(pane);
            }        
        }
    });
})

Now use the Page Structure screen to add a hidden field to your page, and name the field the same as you accordion container group, but with a suffix of '_control'. (eg if you accordion container group is called myAccordion, then you would name the hidden field myAccordion_control)

Finally on the Field Details screen, select this new hidden field, and set the Control (class) styling to 'hide accordionControl'.

When the page loads the generic script will look for all the fields with the 'accordionControl' class applied, and take their values as the name of the accordion pane to select in the relevant accordion container.

Therefore you will just need to configure the page display binding for the control field (and any controller rules as required) so that its value is set to the name of the correct accordion pane to display first for each process activity.

I hope this helps.

Regards,
Gerard