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



* 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



* define your MVCheckbox list items





* create an onload event where you set the initial MVCheckbox value - the first checkbox should default to "key"



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



* save and deploy your project and run your tests



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