• Custom Styling for Radio Buttons
• Dynamically Re-populate Choices in a Radiobutton Control
• Render Radio Buttons as a Button List

Dynamically Re-populate Choices in a Radiobutton Control

Description

In some cases it is necessary to re-populate the choices in a radiobutton control after the component has been rendered. This can be done dynamically using an ajax callback.

For a visual explanation on how to do this watch this video or follow the guide below.

Define a Radiobutton, Textbox, and Button Control.

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [RadioButton] option to add a radio button control to the component. Give the control the name 'rb1'. Leave the label blank.

   

2. Highlight the radio button control in the controls tree. In the properties list section click the [...] button next to the 'Choices' control in the RadioButton Properties.

   

3. In the 'Define Choices' dialog select the 'Static' option in the 'Choices are' menu. In the 'Static Choices' section add the following options. Click OK.

   alpha
   beta
   gamma

   

4. In the 'Data Controls' menu click on the [TextBox] option to add a textbox control to the component. Give the textbox control the name 'newchoices'.

   

5. Highlight the textbox control in the controls tree. Open the 'Other Controls' menu and click on the [Button] option to add a button control to the component.

   

6. Highlight the button control in the controls tree. In the properties list set the 'Button text' property to read 'Reset Radiobuttons'.

   

7. Scroll down to the 'Javascript' section and click on the [...] button next to the 'onClick' property.

   

8. In the 'Edit onClick Event' dialog select the 'Action Javascript' radio button. Click the 'Add New Action' button.

   

9. Type 'ajax' into the filter list. Select the 'Ajax Callback' action and click OK.

   

10. In the action's property settings set the 'Callback type' tp be 'InternalXbasicFunction'

    

11. Set the 'Function name' property to be 'resetCB'. This function will be defined in the next section. Click OK and Save to return to the UX Controls page.

    

Create the Xbasic Function that Dynamically Updates the Radiobutton Control

1. In the main menu expand the 'Code' menu and click to open the 'Xbasic functions' page.

   

2. Add the following code to define the resetCB() function.

   function resetCB as c (e as p)
   dim choices as c 
   choices = e.datasubmitted.newchoices
   choices = comma_to_crlf(choices)
   if choices = "" then 
   	resetCB = "alert('You did not specify any choices for the checkbox');"
   	exit function 
   end if 
   
   dim html as c 
   html = a5w_radiobuttons(choices,"V.R1.RB1","","","","","{dialog.componentname}.V.R1.RB1")
   dim id as c 
   id = "{dialog.componentname}.V.R1.RB1"
   dim js as c 
   js = "$('" + id + "').innerHTML = '"+js_escape(html)+"';"
   resetCB = js 
   end function

   

The resetCB() function runs after the Ajax callback, that is tied to the 'Reset Radiobuttons' button, fires. The pointer 'e' is passed into the function as an argument. This is used to create a pointer to the 'newchoices' textbox, which contains the submitted choices for the radio buttons that will replace the existing ones.

dim choices as c 
choices = e.datasubmitted.newchoices

When the list of choices is submitted, each choice in the list is separated by a comma, except the last entry. the comma_to_crlf() function is called to convert this comma delimited list into a crlf delimited list. If the submitted list of choices does not contain anything, then an alert is sent stating that no choices were specified.

choices = comma_to_crlf(choices)
if choices = "" then 
	resetCB = "alert('You did not specify any choices for the checkbox');"
	exit function 
end if

If the list is not blank then the function a5w_radiobuttons() is called. This is used on the server to compute HTML for the radiobutton control. If this was a checkbox control the a5w_checkboxes() function would be used here. In this example the "V.R1.RB1" is the name of the variable and "{dialog.componentname}.V.R1.RB1" represents the Id.

dim html as c 
html = a5w_radiobuttons(choices,"V.R1.RB1","","","","","{dialog.componentname}.V.R1.RB1")

An id variable is created towards the end of the resetCB() function. The value of the id variable is set to the container to be repopulated, in this case {dialog.componentname}.V.R1.RB1. The Javascript to repopulate the html for the specified radio button container is then reset.

Run the Component

1. Run the component in Live Preview. Type a series of choices into the textbox control and click the 'Reset Radiobuttons' button. Separate each choice with a comma.

   

2. The new choices should be displayed as choices in the radio button control.

   

See Also

• RadioButton Properties