Dynamically add Choice options from Client Script on Dialog Window/Modal Popup

[ayman_h]

Hi,

I have a ModalPopup that is displayed on the Change form triggered by a onChange Client script. The Modal Popup contains a UI Page that has a Choice input field.

Is it possible to dynamically add more options to the Choice field from the Client Script? I can only add the options if I hardcode an option and use the 'setPreference' method to set it. I would like to add the options dynamically without defining the options as it will be limited. 

UI Page:

<g:ui_form>
	<!-- Get values from dialog preferences passed in -->
	<g:evaluate var="jvar_label" expression="RP.getWindowProperties().get('label')" />
	<g:evaluate var="jvar_optionName" expression="RP.getWindowProperties().get('optionName')" />
	<!-- Set up form fields and labels -->
	<table width="100%">
		<tr>
			<td>
				<g:ui_choice_input_field name="TestChoice" id="chooseOption" label="${jvar_label}" mandatory="true">
					<option value="">${gs.getMessage('-- None --')}</option> 
					<option value="other">Other</option>
					<option value="${jvar_optionName}">${jvar_optionName}</option> 
				</g:ui_choice_input_field>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			</td>
		</tr>
		<tr id="dialog_buttons">
			<td colspan="2" align="right">
				<g:dialog_button_ok ok="return getChoices()" ok_type="button" />
			</td>
		</tr>
	</table>
</g:ui_form>

onChange Client Script on Change form

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }

   //Type appropriate comment here, and begin script below
	g_form.clearMessages();

	//Initialize and open the Dialog Window
	var dialog = new GlideDialogWindow('Test UI');

	dialog.setTitle(getMessage('Testing 123'));
	dialog.setPreference('label', 'Can you please choose an option?');
	dialog.setPreference('optionName','Test1');
	dialog.render();
   
}

[rahulpandey · Accepted solution]

Hi Ayman,

You can query the source of the choice value ( sys_choice) and create a dynamic list. However, if you want to do it via client script, below script would help you.

UI Page:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
	<!-- Get values from dialog preferences passed in -->
	<g2:evaluate var="jvar_label" expression="RP.getWindowProperties().get('label')" />
	<g2:evaluate var="jvar_optionName"  jelly="true" object="true" >

		var options =RP.getWindowProperties().get('optionName');
		options = options.split(",");
		var choiceArray = [];
			//<![CDATA[
		for(var i = 0; i<options.length; i++){
			choiceArray.push(options[i]);							 
		}
//]]>
	choiceArray;


	</g2:evaluate>
	<!-- Set up form fields and labels -->
	<table width="100%">
		<tr>
			<td>
				<g:ui_choice_input_field name="TestChoice" id="chooseOption" label="$[jvar_label]" mandatory="true">
					<option value="">${gs.getMessage('-- None --')}</option> 
					<option value="other">Other</option>
					<j2:forEach items="$[jvar_optionName]" var="jvar_choice">   
					<option value="$[jvar_choice]">$[jvar_choice]</option> 
					</j2:forEach>
				</g:ui_choice_input_field>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			</td>
		</tr>
		<tr id="dialog_buttons">
			<td colspan="2" align="right">
				<g:dialog_button_ok ok="return getChoices()" ok_type="button" />
			</td>
		</tr>
	</table>
</g:ui_form>
</j:jelly>

Client script

		var dialog = new GlideDialogWindow('Test UI');

	dialog.setTitle(getMessage('Testing 123'));
	dialog.setPreference('label', 'Can you please choose an option?');
	var choiceArray = [];
	for(var i=0;  i<5; i++){
		choiceArray.push("Test"+i); //build your dynamic choice list here
	}
	dialog.setPreference('optionName',choiceArray);
	dialog.render();

Result :

Please mark correct answer, if this helps you.

[ayman_h]

Thanks Rahul, that worked well and does what I was looking for!

[shubhangigo]

Hi @rahulpandey , I have a similar requirement and with the solution you suggested the pop-up window is showing with the options. However, when i click on Okay button, it doesnt redirect page. Can you help to resolve this issue