Article

wschreiber's picture
article
Reads:

3437

Score:
3
3
3
 
Comments:

0

HowTo: Use Radio Buttons in User Application (HTML Radio)

(View Disclaimer)

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


Disclaimer: As with everything else at Cool Solutions, this content is definitely not supported by Novell (so don't even think of calling Support if you try something and it blows up).

It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test, test, test before you do anything drastic with it.




User Comments

© 2013 Novell