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>";
0 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 5 (0 votes, average: 0.00 out of 5)
You need to be a registered member to rate this post.

Disclaimer: As with everything else at NetIQ Cool Solutions, this content is definitely not supported by NetIQ, so Customer Support will not be able to help you if it has any adverse effect on your environment.  It just worked for at least one person, and perhaps it will be useful for you too.  Be sure to test in a non-production environment.

Leave a Reply


  • dmgoklani says:

    Its not working for me giving error
    “TypeError: Unable to get property ‘doShow’ of undefined or null reference”

  • wschreiber wschreiber says:

    Make sure that the jQuery library that is loaded in the scripts tab (/IDMProv/javascript/jQuery/scripts/jquery-1.4.2.min.js) is available on your IDMProv system – version numbers may vary between IDM flavors.

    Also, make sure that your fields have the proper onload event asigned.

May 22, 2012
10:14 am