UI action button should open the UI page .

[instance]

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>

                  <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"  />

                   </td>

                </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"  />

                    </td>

                </tr>

                <tr>

        <td style="width:25%">

            <g:form_label>

            Work Notes: 

            </g:form_label>

                 </td>

        <td style="width:60%"> 

                 <input type="text" aria-label="Print your name" name="my_name" id="my_name" maxlength="25"/>   

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

Client Script:

function continueOK() {

    alert("OK clicked");

    var gdw = GlideDialogWindow.get();

    var name =gel('my_name').value;

    var user = gel('user_ref').value;

    var cat = gel('grp_ref').value;

    g_form.save();

    GlideDialogWindow.get().destroy();

}

function continueCancel() {

    GlideDialogWindow.get().destroy();

}

In the UI action Button

On clicking the Button in the Service Operations Workspace the Button is not poping  out the ui page.

what error in the script ?

[instance]

@Anil Lande  When i click the UI action Button in the Workspace .

My UI page should get loaded .

so i dont know what script i need to write in UI action i need help in that .please share the scritp

[Anil Lande]

Please check the script provided by @AnveshKumar M 

Note: you can mark more than one correct answers.

[AnveshKumar M]

Hi @instance  ,

You can use the following script in Workspace Client Script instead of calling a UI Page, and make sure you have checked the "Client" option.

function onClick(g_form) {
    g_modal.showFields({
        title: "Enter your reason",
        fields: [
            {
                type: 'reference',
                name: 'assignment_group',
                label: getMessage('Assignment Group'),
                mandatory: true,
                reference: 'sys_user_group',
                referringTable: 'incident',
                referringRecordId: g_form.getUniqueValue(),
                value: g_form.getValue('assignment_group'),
                displayValue: g_form.getDisplayValue('assignment_group')
            },
            {
                type: 'reference',
                name: 'assigned_to',
                label: getMessage('Assigned to'),
                mandatory: true,
                reference: 'sys_user',
                referringTable: 'incident',
                referringRecordId: g_form.getUniqueValue(),
                value: g_form.getValue('assigned_to'),
                displayValue: g_form.getDisplayValue('assigned_to')
            },
			{
                type: 'textarea',
                name: 'work_notes',
                label: getMessage('Work notes'),
                mandatory: true
            }
        ],
        size: 'lg'
    }).then(function(fieldValues) {
        g_form.setValue('assignment_group', fieldValues.updatedFields[0].value);
		g_form.setValue('assigned_to', fieldValues.updatedFields[1].value);
		g_form.setValue('work_notes', fieldValues.updatedFields[2].value);
        g_form.save();
    });
}

Thanks,

Anvesh

[instance]

@Anil Lande @AnveshKumar M  i need to call it from the UI page only

[AnveshKumar M · Accepted solution]

Hi @instance  ,

Try using the following scripts as is.

UI Page:

Name: re_assign_custom

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>
<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"  />
			</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"  />
			 </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>

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;
              workNotesOnChange();
          }
          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 workNotesOnChange() {
			if (!workNotes.value.trim()) {
				reassignBtn.addClassName('disabled');
				reassignBtn.writeAttribute('aria-disabled', true);
			} else {
				reassignBtn.removeClassName('disabled');
				reassignBtn.writeAttribute('aria-disabled', false);
			}
		}

		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,
			workNotesOnChange: _debounce(workNotesOnChange, 200) // Only execute when left idle for 200 ms
		};
	})(window);
});

UI Action

Script:

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

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

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 url = "/re_assign_custom.do?sysparm_stack=no&sysparm_workspace=" + true;
    g_modal.showFrame({
        title: getMessage("Propose Major Incident"),
        url: url,
        size: 'lg',
        autoCloseOn: 'URL_CHANGED',
        callback: function(ret, data) {
            if (ret)
                proposeMIC(data);
        }
    });
}

Thanks,

Anvesh