How to use radio buttons to get a user choice in a Server Behaviour Interface.

This tutorial details the steps I took when trying to add Radio Buttons to my SB user interface and have them behave the way I wanted them to.

How to use radio buttons to get a user choice in a Server Behaviour Interface.

This document came about through my own attempts at achieving this objective and Waldo Smeets' final resolution to the problem.

I wanted to build a server behaviour that incorporated six radio buttons in a group that would get the users choice and use it in my Server Behaviour (SB) generated code.
Not only that, but I also wanted the right radio button to remain selected if the user brought the interface back up to modify their selections.

The first thing I do whenever I create an SB is to create the working code.
That done, I can get on with generating an interface that is user-friendly and, more importantly, that will produce the same working code. So I created my new SB, copied the code into a code block and added in my parameters that should be replace by the user selections. First there was the recordset, then the recordset field, then the colour and finally the image path.

For each of these, I used a Recordset Menu, a Recordset Field menu, a Text field and a Relative Folder Field (An extra Server Behaviour Builder (SBB) field type from UDzone) respectively.

However, I didn't want to have the user type in the colour, I wanted them to click a radio button. This would be far easier for the user and there would be no chance of generating the wrong code.

So I went into the generated html file for my new SB and started modifying it.

First, I added a table that would hold my radio buttons. This table would also hold a hidden field that would store the radio button value. This hidden field was given the exact same name as the normal text field that had been inserted by the SBB and the normal textfield was then deleted.

Each of the radio buttons had a value assigned to it and was set to call a function onClick. This particular one was the first in the group and so I had set it to selected by default. The hidden element was set to black by default too, that way, if a user left the default settings as they were without clicking anything, the code generated would still be right.

<input type="radio" name="rbColour" value="black" onClick="theColour(this.value)" checked>

The function would take the value passed by the radio button and stuff it into the hidden element called RobGT_Colour for the SB to generate my code with.

function theColour(myColour) {
findObject("RobGT_Colour").value = myColour;
}

With that done, I thought I had finished, except that after I had applied my SB the first time, I then went to edit the settings to pick another colour and noticed that the radio button choice had reverted back to black, my default setting, instead of staying at red, which I had chosen when I first applied the SB.

If I left the interface unchanged, the code remained unchanged too but I wasn't happy about the radio buttons not doing what I wanted them to.

After a day and a half of seeking the answer, I finally got it handed to me by our good friend Waldo.

I had to add the following code onto the end of the inspectServerBehaviour function of the interface.

var theValue = sbObj.parameters['RobGT_Colour'];
theEl = findObject("rbColour");
for (i = 0; i < theEl.length; i++){
if (theEl[i].value == theValue) theEl[i].checked = true;
}

This grabs the value of the hidden element and sets the right radio button as selected.
Now I have an SB that does what I want and behaves how I want it to.

By Rob Turnbull
www.robgt.com/

Comments

Be the first to write a comment

You must me logged in to write a comment.