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

ayman_h · ‎11-01-2020

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 · ‎11-01-2020

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.

View solution in original post

Kieran Anson · ‎11-01-2020

Hi,

How are you wanting to dynamically set the options? Are you wanting to set these by pushing say a string array to the UI page or is there a static list that you want to choose from? If the latter, you can use the sys_choice table and filter the result before the UI page renders.

ayman_h · ‎11-01-2020

Hi Kieran,

Thanks for getting back. It will be a string value as the choices will come in from an API call.

Thanks,
Ayman

Kieran Anson · ‎11-01-2020

Thanks ayman,

You can leverage AngularJS to do this. There are number of OOB UI pages which leverage this functionality. Just do a search for "HTML contains ng-options" and you'll find an example to copy if you've not used AngularJS before. A good example is the HRTaskTemplate UI Page.

ayman_h · ‎11-01-2020

Thanks Kieran, I will activate HR for that UI Page and give that method a try!