HowTo: Use Radio Buttons in User Application (Turn on your CB Radio)

wschreiber

By: wschreiber

April 8, 2011 10:36 am

Reads: 280

Comments:1

Rating:0

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 first approach of enhancing MVCheckboxes, while a subsequent article will cover the HTML approach.

By adding some ECMAscript logic you can make a regular MVCheckbox control to behave like a radio button control where only one option is selectable.

Here’s some ECMAscript that does the magic for you, together with the instructions to add the logic to your MVCheckboxes

For the demo we’ll create a simple UserApp request form with two MVCheckbox controls.

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

cool_solutions_-_radio_ga_ga_1_-_img_01.jpg

* Insert the following code:



var globalData				= new Object();
globalData.fields			= new Object();

var FIELDTYPE_CBRADIO	= "CBRADIO";

// store input fields
function registerInput( field, fieldType )
{
	debugger;
	if ( !globalData.fields[ field.getName() ] )
	{	// initialize field storage
		globalData.fields[ field.getName() ]			= new Object();
		globalData.fields[ field.getName() ].field		= field;
		globalData.fields[ field.getName() ].fieldType	= fieldType;
		globalData.fields[ field.getName() ].values	= new Array();
	}
	if ( fieldType == FIELDTYPE_CBRADIO )
	{
		emulate_radio( field );
	}
	// remember current value
	globalData.fields[ field.getName() ].values = field.getValues();
}

/**
 * emulate radio button behavior with mv checkboxes
 */
function emulate_radio( field )
{
	try
	{	// get handle to saved field data
		var storedVariable	= globalData.fields[ field.getName() ];
		if ( !storedVariable ) return;

		var oldValues			= storedVariable.values;
		if ( !oldValues )		oldValues = new Array();

		var newValues		= field.getValues();
		if ( !newValues )		newValues = new Array();

		// nothing changed?
		if ( oldValues.join( "#" ) ==  newValues.join( "#" ) ) return;

		// re-calc new value from comparing old & new values
		var modValues			= [];
		switch ( newValues.length )
		{
			case 0: // invalid: deselect - keep old
				modValues	= oldValues;
				break;
			case 1: // valid: keep new
				modValues	= newValues;
				break;
			default:	// new CB was selected, unselect old values
				for ( var i=0; i < newValues.length; i++ )
				{
					if ( !arrayContains( oldValues, newValues[i] ))
					{	// keep changed value
						modValues.push( newValues[i] );
						break;
					}
				}
		}
		// save new selection
		storedVariable.values	=	modValues;
		// reselect cb values
		storedVariable.field.select( modValues );
	}
	catch ( e )
	{
		alert( e )
	}
}

// test if the string array contains the test variable
function arrayContains( varArray, varTest )
{
	for ( var i=0; i < varArray.length; i++ )
	{
		if ( varArray[i] == varTest )
		{
			return ( true );
		}
	}
	return ( false );
}

* add two MVCheckbox controls to your form

cool_solutions_-_radio_ga_ga_1_-_img_02.jpg

* define your MVCheckbox list items

cool_solutions_-_radio_ga_ga_1_-_img_05.jpg

cool_solutions_-_radio_ga_ga_1_-_img_06.jpg

* create an onload event where you set the initial MVCheckbox value – the first checkbox should default to “key”

cool_solutions_-_radio_ga_ga_1_-_img_03.jpg

* create an onchange event where call the logic to emulate a radio control – the second checkbox defaults to “key1″ (or whatever you prefer)

cool_solutions_-_radio_ga_ga_1_-_img_04.jpg

* save and deploy your project and run your tests

cool_solutions_-_radio_ga_ga_1_-_img_07.jpg

The logic is kept so generic that you should be able to easily add radio emulation to any of your MVCheckbox controls by simply adding the onchange event.

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

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

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.

1 Comment

  1. By:geoffc

    How many of the kids these days would even know what CB radio is?

    Breaker breaker old buddy, theres a smokey on my tail…

    (At our cottage north of Toronto, we had a CB Radio cup, that had all sorts of CB talk lingo on it… Fun to travel with CB’s).

Comment