How Can I use multi select drop down choice list in UI page?

[Reddy4811]

Dear all, @Ankur Bawiskar 

Please give me any suggestions for below requirement. 

My requirement is, I need to select the multiple options from multi select dropdown list. I can select the multiple options in dropdown but those selected multiple options are not showing in the field.

example code:-

****************************************

<section>
<g:evaluate jelly="true" object="true" var="jvar_arr">
var arr = gs.getProperty(instances').split(','); // give the property name here
arr;
</g:evaluate>
<div class="input-block input-col">
<div class="field-label1"> <span class="asterisk">*</span> <span> instances </span> </div>
<div class="field-input multiselect-item">
<input type="text" id="Instances" placeholder="Start typing here to see results.." readonly="true" required="true" onclick="openSelectableDropdown('#Instances_drop_down', '#Instances_drop_down_arrow')"
selectedValue="" />
<i id="Instances_drop_down_arrow" class="fas fa-angle-down dropdown-arrow" onclick="toggleSelectableDropdown('#Instances_drop_down', '#Instances_drop_down_arrow')"></i>
<div id="Instances_drop_down" class="autocomplete-dropdown selectable-dropdown">
<div class="dropdown-wrapper">
<j:forEach items="${jvar_arr}" var="jvar_element">
<div class="dropdown-item" onclick="selectMulti(this, '#Instances',
'#Instances_drop_down');" value="${jvar_element}">${jvar_element} <i class="fas fa-check"></i></div>

</j:forEach>

</div>
</div>
</div>
</div>
</section>
*************************************************************************************
Ui page Client script
function selectMulti(item) {
// Display the item in the multiselect input field
$j("#" + $j(item).attr("value")).toggleClass("selected-item");
// Add the active-item class on the currently clicked item
$j(item).toggleClass("active-item");
// Show the check icon on the currently clicked item
$j(item).find(".fa-check").toggleClass("active-item-icon");
setValueOfHiddenPurposeField();
}​

please find the attached screen shot

Thanks & kind regards,

Reddy481.

[Community Alums]

Hi Reddy,

You have to store them in array and then using for loop you will set it.. 

 here is the sample code which i tried on my instance. just make the changes based on your need. 

<?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:evaluate var="jvar_ur" object="true">

		var gr = new GlideRecord('incident');
		gr.addQuery('sys_id','d41f0e10db29b300e4d95740cf9619fa'); //sys_id of an user
		gr.query();
		var userList =[];
		if(gr.next()){
		var gr2 = new GlideRecord('sys_user');
		gr2.addQuery('sys_id',gr.caller_id);
		//gr2.addQuery('u_site',gr.u_site);
		gr2.query();
		while(gr2.next()){

		userList.push(gr2.department.id);
		}

		}
		userList;

	</g:evaluate>
	
	
	
	<select id="ur">


		<option value="">-- None --</option>


		<j:forEach items="${jvar_ur}" var="jvar_array_item">   


			<option value="${jvar_array_item}">${jvar_array_item}</option>


		</j:forEach> 


	</select>

	


</j:jelly>

Else, you can also refer to this link : https://community.servicenow.com/community?id=community_question&sys_id=28b8909bdb2d9300c310fb651f9619e9

Please mark my answer as Correct & Helpful, if applicable.

Thanks

Sandeep

[Reddy4811]

Hi @Sandeep Dutta 

Thanks for giving reply.

I have tried as you suggested but it's not working for me.

Can you please adjust my code as you suggested? I might be missing something here.

Thanks,

Reddy481.

[Prerna Patra1]

If the options are coming from a table. You can make use of sn-record-picker and add an attribute multiple="true" for multi select

<sn-record-picker field="user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

[Ankur Bawiskar]

Hi,

Sorry can you explain what is required?

If you want multiple values to be selected then why not use checkbox

Regards
Ankur