HowTo: Change the Frame Size for Request Forms in User Application in IDM 3.7.x

wschreiber

By: wschreiber

June 3, 2010 10:10 am

Reads: 378

Comments:2

Rating:0

The request form size in User Application on IDM 3.7 is limited by a statically sized frame in the center of the UserApp screen.

Example:

While the frame size of approximately 900px by 800px may be sufficient for many request forms, it may be too small for more complex forms.

Since the frame size is statically declared in IDM.WAR, you cannot change it’s height/width.

Modifying the calling pages in the WAR file would not be a proper option, since this would void your support through Novell Technical Services.

You may, however, use the dynamic HTML features to get a handle to the request frame and modify its size dynamically without changing the WAR file.

Such dynamic access to the frame would involve two main steps:

  • use ECMAScript to locate the frame
  • use ECMAScript to modify the frame style to match your needs

The advantage of this dynamic approach is, that you can resize the request frame dependent on the complexity of your form or dependent on user actions.

Attached to this Cool Solution, you will find an IDM Designer export (http://www.netiq.com/communities/media/iframeResize.zip“>iframeResize.zip) for a form that allows you to interactively move and resize the request frame.

To test this sample, import the sample file into your IDM Designer, and deploy it to your test environment.

You will find all necessary scripts in an inline form script, and in the onload/onchange events of the relevant fields.

To implement the resize/move functionality without deploying the sample form, you’d need to add some ECMAScript helper functions to your project:

  • get the handle to the request frame and its parent element

    /** get a handle to the iframe node
    *
    **/
    function getIframe()
    {
    	try
    	{
    		// locate the last iframe
    	 	var iframes = top.window.document.getElementsByTagName( "iframe" );
    	 	if ( iframes.length > 0 ) return( iframes[ iframes.length-1 ]);
    	}
    	catch (e)
    	{
    		alert ( e );
    	}
    	return( undefined );
    }
    

    /**	get a handle to the iframe's parent node
    *
    **/
    function getIframeParent( )
    {
    	try
    	{
    		var iframe = getIframe();
    		return( iframe.parentNode.parentNode );
    	}
    	catch (e)
    	{
    		alert ( e );
    	}
    	return( undefined );
    }	
    

  • change the size (width and height) of the request frame

    /** resize iframe with given parameters
    *
    **/
    function setFrameSize( width, height )
    {
    	try
    	{
    		if (( width  == undefined ) && ( height == undefined )) return;
    	 	var iframe			= getIframe();
    		var iframeParent 	= getIframeParent( );
    
    	 	if ( iframe 			== undefined ) 	return;
    	 	if ( iframeParent 		== undefined ) 	return;
    	 	if ( iframeParent.style == undefined ) 	return;
    		
    		if ( width  != undefined )	
    		{
    			iframeParent.style["width"] 	= width;
    			iframe.style["width"] 			= "100%";
    		}
    		if ( height != undefined )	
    		{
    			iframeParent.style["height"] 	= height;
    			iframe.style["height"] 			= "100%";
    		}
    	}
    	catch (e)
    	{
    		alert ( e );
    	}
    }
    

  • change the location (left and top) of the request frame

    /**  move iframe to selected window position
    *
    **/
    function setFramePos( left, top )
    {
    	try
    	{
    		if (( left  == undefined ) && ( top == undefined )) return;
    	 	var iframeParent	= getIframeParent();
    	 	if ( iframeParent == undefined ) 	return;
    	 	if ( left  	!= undefined )	iframeParent.style["left"] 	= left;
    	 	if ( top 	!= undefined )	iframeParent.style["top"] 	= top;
    		iframeParent.style["align"]	= "none";
    	 	// alert( "setFrameSize: left=" + left + " / top=" + top );
    	}
    	catch (e)
    	{
    		alert ( e );
    	}
    }
    

  • to maximize the request frame, you could call a function like this:

    /** maximize the iframe - you may want to fine-tune the percentage values
    *
    **/
    function frameMaximize()
    {
    	setFrameSize( "95%", "95%" );
    	var iframeParent 	= getIframeParent( );
    	iframeParent.style["align"]	= "center";
    }
    

The attached sample shows you how to interactively resize and move the request form.

Example: Reduced Width

Example: Moved Position (a)

Example: Moved Position (b)

Example: Maximized

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Tags:
Categories: Identity Manager, Technical Solutions

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.

2 Comments

  1. By:moldin

    Hi,

    This is great features and I really miss them in IDM4.0.
    In the Novell Forum Steven Williams wrote:

    I changed the definition of the iframe we show the Workflows
    in. I make it so the iframe could be re-sized and moved.
    Bug 608630 – Field Patch (370): ENH: Provide the ability to change the
    size of the iFrame used for ‘Make A Process Request’
    The approach I took does not use the cool solution. It is completely
    different. The change went into shipping 4.0

    Any chance that this very Cool Solution will be updated to support the new approach?

    • By:ccikara

      Over a year late… But try this:

      Put this code on the form onload event…

      var iframe_parent_div = window.frameElement ? window.frameElement.parentNode : null;
      iframe_parent_div.style.position = ‘absolute’;
      iframe_parent_div.style.left = ’0′;
      iframe_parent_div.style.top = ’0′;
      iframe_parent_div.style.height = ’100%’;
      iframe_parent_div.style.width = ’100%’;
      parent.document.getElementById(“prdiFrameContainer”).style.height= ’100%’;

      This will maximize the request form screen…

Comment