Populating Dynamic Controls in Static HTML
Description
How to populate RadioButton, CheckBox, and Dropdown controls with dynamic data when using the Static HTML option.
Discussion
The standard method of populating RadioButton, CheckBox, and Dropdown controls using a variable defined in the onDialogInitialize event (e.g., `e.rtc.listName = ...`) does not work when the UX is rendered as Static HTML. This is because the static HTML is generated once and saved, bypassing the server-side variable population during runtime.
To populate these controls dynamically in a Static HTML environment, you must use the following approach:
- Configure Control Type
Change the control configuration from a standard control to a Javascript control in the control properties.
- Generate Javascript
In the onDialogInitialize event, instead of setting a variable, you must generate JavaScript code to populate the control on the client side.
- Return Javascript
The generated JavaScript should get a pointer to the control (e.g., `{dialog.object}.getControl('dd1')`), assign the JSON data to the control's data property, and call the `.populate()` method. This script is then returned using the `e.javascript` property.
Videos
Populating Controls in Static HTML
In this video, we show how to dynamically populate a Dropdown, RadioButton, or Checkbox control with data computed at runtime in the onDialogInitialize event. This specific technique is required when the UX component is rendered using the Static HTML option.
See Also