Client Script

servicenow lath · ‎04-03-2023

HTML script :

HTML Script:

<?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>

<table>

<tr>

<g:form_label>

Assignment Group:

</g:form_label>

</td>

<g:ui_reference name="grp_ref" id="grp_ref" table="sys_user_group" />

</td>

</tr>

<tr>

<g:form_label>

Assigned to:

</g:form_label>

</td>

<g:ui_reference name="user_ref" id="user_ref" table="sys_user" />

</td>

</tr>

<tr>

<g:form_label>

Work Notes:

</g:form_label>

</td>

</td>

</tr>

<tr>

<td>

<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>

</td>

</tr>

</table>

</g:ui_form>

</j:jelly>

In Processing script what should i Write . some one help me with the script .

AnveshKumar M · ‎04-06-2023

Hi @servicenow lath ,

It seems I missed UI Action Script last time, I attached this time 🙂 . And, I have updated the code to reflect the changes you asked.

Try using the following script.

UI Action - Script:

if(typeof window == 'undefined')
	reAssignOnConfirmation();

//Server-side code
function reAssignOnConfirmation() {
	current.update();
	gs.addInfoMessage(gs.getMessage('{0} has been re assigned', current.getDisplayValue()));
	action.setRedirectURL(current);
}

UI Action - Workspace Client Script:

function onClick(g_form) {
	
	function proposeMIC(data) {
		var workNotes = data.msg + "\n" + data.workNotes;
		var notes = g_form.getValue('work_notes') + ' ' + workNotes;
		var user = data.assignedTo;
		var group = data.assignmentGroup;
		g_form.setValue('work_notes', notes.trim());
		g_form.setValue('assigned_to', user);
		g_form.setValue('assignment_group', group);
		g_form.submit('reassign_inc_ws');
	}
	
	var current_assignee = g_form.getValue('assigned_to');
	var current_group = g_form.getValue('assignment_group');
    var url = "/re_assign_custom.do?sysparm_stack=no&sysparm_user=" + current_assignee + "&sysparm_group=" + current_group + "&sysparm_workspace=" + true;
    g_modal.showFrame({
        title: getMessage("Re-Assign Incident"),
        url: url,
        size: 'xl',
		height: '500px',
        autoCloseOn: 'URL_CHANGED',
        callback: function(ret, data) {
            if (ret)
                proposeMIC(data);
        }
    });
}

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'
		};
		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%">
				<g:ui_reference name="grp_ref" id="grp_ref"  table="sys_user_group" value = "${sysparm_group}" displayvalue="${jvar_group_disp}"  />
			</td>
		 </tr>
		 <tr></tr>
		 <tr>
			 <td style="width:25%">
				 <g:form_label>
					 Assigned to: 
				 </g:form_label>
			 </td>
			 <td style="width:60%">
				 <g:ui_reference name="user_ref" id="user_ref"  table="sys_user" value = "${sysparm_user}" displayvalue="${jvar_user_disp}" />
			 </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>

UI Page - Client Script:

addLoadEvent(function() {
	(function(global) {
		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 = gel('user_ref').value;
				var group = gel('grp_ref').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 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,
		};
	})(window);
});

Try this and let me know!

Thanks,

Anvesh

Thanks,
Anvesh

View solution in original post

AnveshKumar M · ‎04-04-2023

Hi @servicenow lath ,

Use the following script in 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'
		};
		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%">
				<g:ui_reference name="grp_ref" id="grp_ref"  table="sys_user_group" value = "${sysparm_group}" displayvalue="${jvar_group_disp}"  />
			</td>
		 </tr>
		 <tr></tr>
		 <tr>
			 <td style="width:25%">
				 <g:form_label>
					 Assigned to: 
				 </g:form_label>
			 </td>
			 <td style="width:60%">
				 <g:ui_reference name="user_ref" id="user_ref"  table="sys_user" value = "${sysparm_user}" displayvalue="${jvar_user_disp}" />
			 </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" oninput="reassignModal.workNotesOnChange()" onchange="reassignModal.workNotesOnChange()"></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 disabled" aria-disabled="true" id="inc-reassign-button" title="${gs.getMessage('Propose Major Incident')}" onclick="reassignModal.assign()">${gs.getMessage('Re Assign')}</button>
</div>
</div>
</j:jelly>

Use the following Script in UI Action Workspace Client Script:

function onClick(g_form) {
	
	function proposeMIC(data) {
		var workNotes = data.msg + "\n" + data.workNotes;
		var notes = g_form.getValue('work_notes') + ' ' + workNotes;
		var user = data.assignedTo;
		var group = data.assignmentGroup;
		g_form.setValue('work_notes', notes.trim());
		g_form.setValue('assigned_to', user);
		g_form.setValue('assignment_group', group);
		g_form.submit('reassign_inc_ws');
	}
	
	var current_assignee = g_form.getValue('assigned_to');
	var current_assignee_disp = 'beth'; //g_form.getDisplayBox('assigned_to').value;
	var current_group = g_form.getValue('assignment_group');
    var url = "/re_assign_custom.do?sysparm_stack=no&sysparm_user=" + current_assignee + "&sysparm_group=" + current_group + "&sysparm_workspace=" + true;
    g_modal.showFrame({
        title: getMessage("Propose Major Incident"),
        url: url,
        size: 'xl',
        height: '300px',
        autoCloseOn: 'URL_CHANGED',
        callback: function(ret, data) {
            if (ret)
                proposeMIC(data);
        }
    });
}

Thanks,

Anvesh

Thanks,
Anvesh

AnveshKumar M · ‎04-05-2023

Hi @servicenow lath ,

Hope my answer helped you to solve your issue, if it helped please accept the solution/up vote and close this thread.

Thanks,

Anvesh

Thanks,
Anvesh

servicenow lath · ‎04-06-2023

@AnveshKumar M

but according to your script reassign enabled only when we entered all the 3 values.

but i need the reassign button should be enabled always .

AnveshKumar M · ‎04-06-2023

Hi @servicenow lath ,

It seems I missed UI Action Script last time, I attached this time 🙂 . And, I have updated the code to reflect the changes you asked.

Try using the following script.

UI Action - Script:

if(typeof window == 'undefined')
	reAssignOnConfirmation();

//Server-side code
function reAssignOnConfirmation() {
	current.update();
	gs.addInfoMessage(gs.getMessage('{0} has been re assigned', current.getDisplayValue()));
	action.setRedirectURL(current);
}

UI Action - Workspace Client Script:

function onClick(g_form) {
	
	function proposeMIC(data) {
		var workNotes = data.msg + "\n" + data.workNotes;
		var notes = g_form.getValue('work_notes') + ' ' + workNotes;
		var user = data.assignedTo;
		var group = data.assignmentGroup;
		g_form.setValue('work_notes', notes.trim());
		g_form.setValue('assigned_to', user);
		g_form.setValue('assignment_group', group);
		g_form.submit('reassign_inc_ws');
	}
	
	var current_assignee = g_form.getValue('assigned_to');
	var current_group = g_form.getValue('assignment_group');
    var url = "/re_assign_custom.do?sysparm_stack=no&sysparm_user=" + current_assignee + "&sysparm_group=" + current_group + "&sysparm_workspace=" + true;
    g_modal.showFrame({
        title: getMessage("Re-Assign Incident"),
        url: url,
        size: 'xl',
		height: '500px',
        autoCloseOn: 'URL_CHANGED',
        callback: function(ret, data) {
            if (ret)
                proposeMIC(data);
        }
    });
}

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'
		};
		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%">
				<g:ui_reference name="grp_ref" id="grp_ref"  table="sys_user_group" value = "${sysparm_group}" displayvalue="${jvar_group_disp}"  />
			</td>
		 </tr>
		 <tr></tr>
		 <tr>
			 <td style="width:25%">
				 <g:form_label>
					 Assigned to: 
				 </g:form_label>
			 </td>
			 <td style="width:60%">
				 <g:ui_reference name="user_ref" id="user_ref"  table="sys_user" value = "${sysparm_user}" displayvalue="${jvar_user_disp}" />
			 </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>

UI Page - Client Script:

addLoadEvent(function() {
	(function(global) {
		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 = gel('user_ref').value;
				var group = gel('grp_ref').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 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,
		};
	})(window);
});

Try this and let me know!

Thanks,

Anvesh

Thanks,
Anvesh