Query in UI builder

[servicenow lath]

<?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_isNextPg" expression="RP.getParameterValue('sysparm_next_pg')"/>
	<j:if test="${jvar_isNextPg == 'true'}">
		<style>
			.no_next {

[AnveshKumar M · Accepted solution]

Hi @servicenow lath ,

Please follow this to achieve this.

1. Client Callable Script Include:

var ReAssignIncUtils = Class.create();
ReAssignIncUtils.prototype = Object.extendsObject(AbstractAjaxProcessor, {
	
	getGroups: function(){
		var grpGr = new GlideRecord('sys_user_group');
		grpGr.addActiveQuery();
		grpGr.query();
		var sys_ids = [];
		var names = [];
		
		while(grpGr.next()){
			sys_ids.push(grpGr.sys_id + '');
			names.push(grpGr.name + '');
		}
		
		var data = {
			'sys_ids' : sys_ids,
			'names' : names,
		};
		
		return JSON.stringify(data);
	},
	
	getUsers: function(){
		var group = this.getParameter('sysparm_group');
		var usrGr = '';
		if(!gs.nil(group)){
			usrGr = new GlideRecord('sys_user_grmember');
			usrGr.addQuery('group', group);
		}else{
			usrGr = new GlideRecord('sys_user');
		}
		usrGr.query();
		var sys_ids = [];
		var names = [];
		
		while(usrGr.next()){
			sys_ids.push(usrGr.user + '');
			names.push(usrGr.user.name + '');
		}
		
		var data = {
			'sys_ids' : sys_ids,
			'names' : names,
		};
		
		return JSON.stringify(data);
	},

    type: 'ReAssignIncUtils'
});

2. UI Page HTML:

<?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_isNextPg" expression="RP.getParameterValue('sysparm_next_pg')"/>
	<j:if test="${jvar_isNextPg == 'true'}">
		<style>
			.no_next {
				display: none !important;
			}
		</style>
	</j:if>
	<style>
		body {
			overflow-x: hidden;
		}
		#incident-reassign-form {
			overflow: hidden;
		}
		.form-horizontal {
			margin-top: 5px;
			margin-bottom: 20px;
		}
		.reassign-modal-textarea {
			resize: vertical;
			min-height: 120px
		}
		#work-notes-wrapper .required-marker{
			display: inline-block;
		}
		#dialog_buttons .btn{
			margin-left: 10px;
			padding-left: 15px;
			padding-right: 15px;
			text-align: right;
		}
	
		#page_timing_div {
			display:none !important;
		}
	</style>
	<script>
		var config = {
			workspace: '${JS_STRING:RP.getParameterValue('sysparm_workspace')}' == 'true',
			prev_group: '${JS_STRING:RP.getParameterValue('sysparm_group')}',
			prev_user: '${JS_STRING:RP.getParameterValue('sysparm_user')}'
		};
		var iframeMsgHelper = (function () {
			function createPayload(action, modalId, data) {
					return {
						messageType: 'IFRAME_MODAL_MESSAGE_TYPE',
						modalAction: action,
						modalId: modalId,
						data: (data ? data : {})
					};
				}

				function pm(window, payload) {
					if (window.parent === window) {
						console.warn('Parent is missing. Is this called inside an iFrame?');
						return;
					}
					window.parent.postMessage(payload, location.origin);
				}

				function IFrameMessagingHelper(window) {
					this.window = window;
					this.src=location.href;
					this.messageHandler = this.messageHandler.bind(this);
					this.window.addEventListener('message', this.messageHandler);
				}

				IFrameMessagingHelper.prototype.messageHandler = function (e) {
					if (e.data.messageType !== 'IFRAME_MODAL_MESSAGE_TYPE' || e.data.modalAction !== 'IFRAME_MODAL_ACTION_INIT') {
						return;
					}
					this.modalId = e.data.modalId;
				};

				IFrameMessagingHelper.prototype.confirm = function (data) {
					var payload = createPayload('IFRAME_MODAL_ACTION_CONFIRMED', this.modalId, data);
					pm(this.window, payload);
				};

				IFrameMessagingHelper.prototype.cancel = function (data) {
					var payload = createPayload('IFRAME_MODAL_ACTION_CANCELED', this.modalId, data);
					pm(this.window, payload);
				};

				return new IFrameMessagingHelper(window);
			}());

	</script>
 
	<g:evaluate var="sysparm_user">
		var user_id = RP.getParameterValue("sysparm_user");
		user_id;
	</g:evaluate>
	<g:evaluate var="sysparm_group">
		var group_id = RP.getParameterValue("sysparm_group");
		group_id;
	</g:evaluate>
	
  <g:evaluate var="jvar_user_Rec" object="true" jelly="true">
	var userRec = new GlideRecord('sys_user');
    userRec.addQuery('sys_id',jelly.sysparm_user);
    userRec.query();
	userRec;
	  
  </g:evaluate>

	<j:if test="${!jvar_user_Rec.hasNext()}">
		<j:set var="jvar_user_disp" value=""/>
	</j:if>
	<j:if test="${jvar_user_Rec.next()}">
		<j:set var="jvar_user_disp" value="${jvar_user_Rec.getValue('name')}"/>
	</j:if>	
	
	
	<g:evaluate var="jvar_grp_Rec" object="true"  jelly="true">
	var grpRec = new GlideRecord('sys_user_group');
    grpRec.addQuery('sys_id',jelly.sysparm_group);
    grpRec.query();
	grpRec;
  </g:evaluate>
	
	<j:if test="${!jvar_grp_Rec.hasNext()}">
		<j:set var="jvar_group_disp" value=""/>
	</j:if>
	<j:if test="${jvar_grp_Rec.next()}">
		<j:set var="jvar_group_disp" value="${jvar_grp_Rec.getValue('name')}"/>
	</j:if>
	
 
<div id="incident-reassign-form">
<div class="form-horizontal no_next">
	 <table>
        <tr>
			<td style="width:25%">
				<g:form_label>Assignment Group: </g:form_label>     
			</td>
			<td style="width:60%">
				 <select name ="usr_grp" class="form-control" id="usr_grp" onchange="reassignModal.usr_choices()" ></select>
			</td>
		 </tr>
		 <tr></tr>
		 <tr>
			 <td style="width:25%">
				 <g:form_label>
					 Assigned to: 
				 </g:form_label>
			 </td>
			 <td style="width:60%">
				 <select name ="usr_ref" class="form-control" id="usr_ref" ></select>
			 </td>
		 </tr>
		 <tr>
			 <td style="width:25%">
				 <g:form_label>
					 Work Notes: 
				 </g:form_label>
			 </td>
			 <td style="width:60%"> 
                 <textarea required="true" class="form-control reassign-modal-textarea" id="inc-reassign-work-notes" type="text"></textarea>
			 </td>
        </tr>
	</table>
</div>
<div id="dialog_buttons" class="clearfix pull-right no_next">
		<button type="button" class="btn btn-default" onclick="reassignModal.close()" title="${gs.getMessage('Close the dialog')}">${gs.getMessage('Cancel')}</button>
		<button type="button" class="btn btn-primary" aria-disabled="false" id="inc-reassign-button" title="${gs.getMessage('Re Assign Incident')}" onclick="reassignModal.assign()">${gs.getMessage('Re Assign')}</button>
</div>
</div>
</j:jelly>

3. UI Page Client Script:

addLoadEvent(function() {
    (function(global) {
		getGroupChoices();
		getUserChoices();
        var workNotes = $("inc-reassign-work-notes");
        var reassignBtn = $('inc-reassign-button');
        workNotes.focus();
        var dialog, resizeObserver;
        if (!config.workspace) {
            dialog = GlideModal.prototype.get("sn_major_inc_mgmt_mim_propose");

            var currentWorkNotes = dialog.getPreference('WORK_NOTES');
            if (currentWorkNotes) {
                workNotes.value = currentWorkNotes;
            }
            var currentBusinessImpact = dialog.getPreference('BUSINESS_IMPACT');
            if (currentBusinessImpact)
                businessImpact.value = currentBusinessImpact;
        } else {
            var modalTextAreas = document.querySelectorAll(".propose-modal-textarea");
            var iframeStyle = window.frameElement.style;
            var formContainer = $("mim-propose-form");
            resizeObserver = new ResizeObserver(function(entries) {
                iframeStyle.height = formContainer.offsetHeight + 5 + "px";
            });
            for (var i = 0; i < modalTextAreas.length; i++) {
                resizeObserver.observe(modalTextAreas[i]);
            }
        }

        function _debounce(func, wait, immediate) {
            var timeout;
            return function() {
                var context = this,
                    args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        }

        function assign() {
            if (!reassignBtn.hasClassName('disabled')) {
                var msg = getMessage("Re-Assigned incident");
                var notes = workNotes.value.trim();
                var user = document.getElementById('usr_ref').value;
                var group = document.getElementById('usr_grp').value;
                if (!config.workspace) {
                    g_form.getControl('work_notes').value = msg + "\n" + notes;
                    if (user)
                        g_form.setValue('assigned_to', user);
                    if (group)
                        g_form.setValue('assignment_group', group);
                    close();
                    gsftSubmit(null, g_form.getFormElement(), 'sysverb_inc_reassign');
                } else {
                    iframeMsgHelper.confirm({
                        msg: msg,
                        workNotes: notes,
                        assignedTo: user,
                        assignmentGroup: group
                    });
                }
            }
        }

        function getGroupChoices() {
            var upGa = new GlideAjax("global.ReAssignIncUtils");
            upGa.addParam("sysparm_name", "getGroups");
            upGa.getXMLAnswer(showGroupChoices);
        }

        function showGroupChoices(answer) {
            var data = JSON.parse(answer);
			var sys_ids = data.sys_ids;
			var names = data.names;
            if (sys_ids.length > 0) {
				var previous_grp = config.prev_group;
				var grpChoices = '<option value="">--None--</option>';
				for(var i=0; i < sys_ids.length; i++){
					if(sys_ids[i] == previous_grp){
						grpChoices = grpChoices + '<option value="' + sys_ids[i] + '" selected>' + names[i] + '</option>';
					}else{
						grpChoices = grpChoices + '<option value="' + sys_ids[i] + '">' + names[i] + '</option>';
					}
				}
                document.getElementById('usr_grp').innerHTML = grpChoices;
            }
        }
		
		function getUserChoices() {
			var previous_grp = config.prev_group;
			var previous_usr = config.prev_user;
			var current_group = document.getElementById('usr_grp').value;
            var upGa = new GlideAjax("global.ReAssignIncUtils");
            upGa.addParam("sysparm_name", "getUsers");
			if(current_group){
				upGa.addParam("sysparm_group", current_group);
			}else if(previous_grp){
				upGa.addParam("sysparm_group", previous_grp);
			}else{
				upGa.addParam("sysparm_group", '');
			}
            upGa.getXMLAnswer(showUserChoices);
        }

        function showUserChoices(answer) {
            var data = JSON.parse(answer);
			var sys_ids = data.sys_ids;
			var names = data.names;
			var previous_usr = config.prev_user;
            if (sys_ids.length > 0) {
				var usrChoices = '<option value="">--None--</option>';
				for(var i=0; i < sys_ids.length; i++){
					if(sys_ids[i] == previous_usr){
						usrChoices = usrChoices + '<option value="' + sys_ids[i] + '" selected>' + names[i] + '</option>';
					}else{
						usrChoices = usrChoices + '<option value="' + sys_ids[i] + '">' + names[i] + '</option>';
					}
				}
                document.getElementById('usr_ref').innerHTML = usrChoices;
            }
        }

        function close() {
            if (!config.workspace) {
                dialog.destroy();
            } else {
                resizeObserver.disconnect();
                window.location.href = window.location.href + '&sysparm_next_pg=true';
            }
        }
        global.reassignModal = {
            assign: assign,
            close: close,
			grp_choices: getGroupChoices,
			usr_choices: getUserChoices,
        };
    })(window);
});

4. UI Action: No changes required.

Try this! 

Please Mark Helpful /Accept Solution if it helped you to solve your issue.

Thanks,

Anvesh