Radio ga ga … Radio, someone still loves you!

User Application does allow for Radio Buttons, but only in the flavor of TrueFalseRadioButtons – often some more flexible radio buttons are desired.

There are some ways to implement such more flexible radio type fields.
One of these options could be to add radio functionality to the MVCheckbox control; another option could be to add an HTML radio control.

This article describes the approach of adding radio boxes using custom HTML fields.

The main limitation of an added radio HTML field is that you cannot easily pass information from the radio input into flowdata for further processing.

This article uses an HTML radio input field, takes the user input and stores it to a hidden text field, which subsequently can be passed to flowdata.

Here’s some simple ECMAscript that does the magic for you, it creates a radio input field and handles transport to the hidden text field.

For the demo we’ll create a simple UserApp request form with two radio controls to illustrate the approach.
To keep things simple, we require that each HTML radio field has a corresponding (hidden or visible) text field with the same field name, but with the suffix “_data”.

The key element is the script: Create an inline form script

cool_solutions_-_radio_ga_ga_2_-_img_01.jpg

* Insert the following code:



/** HTML Radio helpers **/
var globalData = new Object();

/** create the html tags for radio fields **/
function createRadio( form, fldName, fldValues, fldDisplay, defaultValue )
{
	globalData.form = form;	// save the form handle to a global variable 
	var btn_html	= "";
	for ( var i=0; i < fldValues.length; i++ )
	{
		btn_html	+= "<input " 								+ 
						" type=\"radio\" "						+ 
						( ( defaultValue == fldValues[i] ) ? " checked " : "" )	+
						" onclick=\"onchange_radio( this.name, this.value ); \" " 		+
						" name=\"" 	+ fldName 		+ "\" " 	+
						" value=\"" 	+ fldValues[i] 	+  "\">" 	+ 
						fldDisplay[i] 		+  "&nbsp;";
	}
	// initialize hidden field
	onchange_radio( fldName, defaultValue );
	return ( btn_html );
} ;

/** react on radio change and copy the radio value to another field **/
function onchange_radio( fldName, fldValue )
{
	// here we assume it has the same name as the HTML field,
	// but with the suffix "_data"
	globalData.form.setValues( fldName + "_data", fldValue );
}


* add two HTML controls and two text controls to your form. For testing you may want to keep the text controls visible, while in production you may want to set them to ‘visible: false’.
The HTML radio fields can have any name, but our script requires that the corresponding text fields have the same name as their radion field, just with the appended suffix “_data”

cool_solutions_-_radio_ga_ga_2_-_img_02.jpg

* in both of the HTML content fields, define your radio items: specify the keys, the values, and the default/preselected value

cool_solutions_-_radio_ga_ga_2_-_img_03.jpg

* define radio group #1

cool_solutions_-_radio_ga_ga_2_-_img_04.jpg

* define radio group #2

cool_solutions_-_radio_ga_ga_2_-_img_05.jpg

* save and deploy your project and run your tests

cool_solutions_-_radio_ga_ga_2_-_img_06.jpg

The logic is kept so generic that you should be able to easily add other radio boxes to your form.

The approach has been tested in IDM 3.6, RBPM 3.7, and IDM 4.0, with IE 8 and FF 3.6

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.
Loading...Loading...
Categories: Uncategorized

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

No Comments
wschreiber
Apr 11, 2011
9:50 am
Reads:
1,825
Score:
Unrated