HowTo: Pimp My Form with jQuery - Collapse Field Groups

over 9 years ago
Forms in User Application may contain more fields than you would like to present to your users at the same time.

This Cool Solution shows a simple approach how to assign form fields to groups and let the user expand or collapse these field groups as needed.

This is, what the result looks like on a sample form:

All headers collapsed:


Two headers expanded:


Note: For your convenience, a copy of the form and of the script is attached to this Cool Solution.

Workflow forms provide a great way to interact with the directory vault, but have some GUI limitations when you restrict yourself to creating the forms with IDM Designer.

There are various ways to enhance the functionality and GUI of workflow forms - one of those is the addition of jQuery scripting. A couple of integration samples have been published here on Cool Solutions.

You will find plenty of information about jQuery and lots of code samples here:


Add the jQuery library to your form

You need to add the jQuery script library as an external script to the list of your form scripts. Note that with User Application 3.6x, 3.7x, and 4.0x the jQuery libraries are already contained in your IDM WAR file. So all you need to do is to add a reference to that script.

Note: if Novell decides to update the jQuery version in your IDM WAR, say from 1.4 to some more current version, you need to update the script link, too.

Alternatively, download the current library from the jQuery site and copy the script to a location on your UserApp server where the form can access it.

You may also create a simple WAR file containing the scripts, which may make it easier to access, deploy, and maintain. Future changes in jQuery versions that come with IDM would not interfere with your form logic, and you could use the jQuery version that does what you need.


About using relative script paths

Note that you may use relative paths when specifying the script location; ignore the error that IDM Designer throws because it cannot find the specified path. Using relative paths has the advantage that you do not have to modify the form script paths when deploying the form on other servers.


The sample request form

For your convenience I have attached my test request form, which you can import into

To add collapsible field groups to your own form, these are the steps that you need to follow:

  • Add jQuery and the custom script to your form

  • Add onload events to your fields

Add jQuery and the custom script to your form


Add the jQuery library to your form (see above).

Create another inline script (the more experienced user may want to use external scripts)

Copy the following script into your custom inline script:

// save to inline or external script
var coolSol = new Object()
coolSol.IDs = new Object();
coolSol.headers = new Array();
coolSol.fields = new Array();

var symbolExp = "<b>&dArr;</b>"; // &or;
var symbolCol = "<b>&uArr;</b>"; // &and;
var spacer = "&nbsp;";

/** get the jQuery handle to a form field
function jqGetField( fldName )
var f = $( '#_' fldName ); // default
if ( f.length == 0 ) f = $( '#' fldName "_packedValues"); // mv checkbox
if ( f.length == 0 ) f = $( '#' fldName "_lbl"); // fallback
return ( f );

/** declare this field as header of an expandable group
* call at onload event of the respective header (typically a title field)
* doShow true/false - initial view expanded (vs. collapsed)
* e.g., onload_expandableHeader( field, true )
function onload_expandableHeader( field, doShow )
var fldName = field.getName();
var h = new Object(); = coolSol.headers.length;
h.fldName = fldName;
h.doShow = ( doShow != false );

h.fields = new Array();
h.jq = new Object();
var f = jqGetField( fldName ); // $( '#_' fldName ); // default = f.parent(); = f.parentsUntil( "TR" ).parent(); "nv-backgroundColor9 nv-borderColor9" ); // change row style "colspan", 10 ); // span
coolSol.headers.push( h );
coolSol.IDs[ fldName ] =;
h.jq.clickMe = $( "<a title='"
( doShow ? "collapse" : "expand" )
"' href='#' onclick='onclick_expandable( " " );' >"
( doShow ? symbolCol : symbolExp )
"</a>&nbsp;" ); h.jq.clickMe, spacer );

/** declare this field as item of the specified expandable group
* call at onload event of the respective fields
function onload_expandableItem( field, fldNameHeader )
var fldName = field.getName();
// locate the form field and the table row
var f = jqGetField( fldName ); // default
var jq = new Object();
jq.fldName = fldName; = f.parentsUntil( "TR" ).parent();
var headerId = coolSol.IDs[ fldNameHeader ]; // get header by name
var h = coolSol.headers[ headerId ];
jqShow(, h.doShow );
h.fields.push( jq ); // add to header's field list
catch( e )
alert( e );

/** internal function to show/hide a jQuery field
function jqShow( jqElement, doShow )
if ( doShow );

/** internal function to expand/collapse a field group
function onclick_expandable( headerId )
var h = coolSol.headers[ headerId ];
h.doShow = !h.doShow;
var doShow = h.doShow;
for ( var i=0; i<h.fields.length; i )
jqShow( h.fields[i].tr, doShow ); // show fields belonging to this group
h.jq.clickMe.html( doShow ? symbolCol : symbolExp ); // swap the click symbol
h.jq.clickMe.attr( "title", ( doShow ? "collapse" : "expand" )); // swap the title
catch( e )
alert( e );

Add onload events to your fields

The fields that you want to use as headers typically will be "title" control types.


Add an "onload" event to all these header fields and call the function "onload_expandableHeader( field, true)" or "onload_expandableHeader( field, false)".

The 2nd parameter determines if the initial state of the field group will be expanded (true) or collapsed (false).


The fields that comprise each group's elements can be of any control type.


Each of these fields will also need it's own "onload" event, which defines what header it belongs to. Add an "onload" event to all these fields and call the function "onload_expandableItem( field, [fldNameHeader] )", replacing "[fldNameHeader]" with the field name of their respective header field, e.g. "myHeader".


You're done.

Deploy the form and test.


* you can modify the style of the header by modifying the script line "nv-backgroundColor9 nv-borderColor9" );

* you can modify the clickable symbol of the header line by modifying the script lines
var	symbolExp			= "<b>&dArr;</b>";
var symbolCol = "<b>&uArr;</b>";


How To-Best Practice
Comment List
Related Discussions