×

IDMWORKS Blog

Dynamically Update Radio Button(s) and Display Them Vertically


Two common requests we get are to generate Radio Button values on the fly as data is being inputted into a workflow form, and to also display the Radio Buttons in a vertical format.

We’ll start with dynamically creating values for the Radio Buttons after a workflow has been manipulated.

For this project you will need to create at least two fields. The first field will be manipulating the values on the second field which is the Radio Button field.

After generating the Radio Buttons field you will need to go to the Properties tab and select List Item. Under List Item add a Key and Label value of ‘’ (two single quotes).

The two single quotes are added to the Key and Label because you must have a value set when the form is loaded. If a value is not set when the form loads an error message will appear.

To set the fields you will use both pieces of code below.  You will need to place the code within an if statement because the first line will only be used once (this code is placed on another field that will be setting the values to the Radio Button field).

The above line will be used when you add the first “new” value for the Radio Button. The false at the end of the line is associated with “Keep old Values”.  By either entering false, any preexisting values that have been entered into the field will be deleted. Remember we set an initial value of ‘’ (two single quotes) under List Item and now that we have a value we want, we need to remove that placeholder value.

When adding any other values ensure that “Keep old Values” is set to true so that none of the values that have been generated will be lost.

Example Code:

 

On the Radio Buttons field you will need to create an onChange event and place the following code:

 

In the example I built this off of, the Form Field Name of the Radio Button was named “selection”. Notice in the code above I have ‘_selection’, this piece will need to be updated to whatever your field is named. You can double check that you are using the correct value by opening the developer tab of your browser (f12) and looking at the console for your fields. Please note: as in the image below, it appears that there are two underscores (__) but there is really only one.

The code is placed in an onChange event rather then an onload event because everytime the Radio Button field is updated, the browser is updated and the vertical structure will be lost.

When you test your code you should see your radio buttons in the order shown in the below image:

Questions, comments or concerns? Feel free to reach out to us below, or email us at IDMWORKS to learn more about how you can protect your organization and customers.

Leave a Reply

Your email address will not be published. Required fields are marked *