Calling a function in a UI Action from a UI Page client script

[Hans Peter]

Hi,

I'm trying to show a UI page when clicking on a UI action on the Case form and then automatically update the Case once the submit button on the UI page is clicked.

As a reference, I used the "change_confirm_cancel" UI Page and the corresponding "Cancel Change" UI Action, and created my own UI Page and UI Action, roughly resembling those.

Now, in the UI Page client script section, the function "moveToCancel" is called - but that function actually seems to be defined in the UI Action. When I'm trying the same on my UI Page and UI Action, I get an error in the javascript console because the function I'm trying to call is, apparently, not defined.

The UI Page client script I used as reference:

function cancelChangeRequest() {
  var textArea = $("change_confirm_reason_text");
  if (textArea)
    moveToCancel(textArea.value.trim());
}

(function() {
  $("change_confirm_reason_text").focus();
})();

The UI Action script I used as reference (excerpt):

function loadConfirmDialog() {
	var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
	changeConfirmCancelDialog = new dialogClass("change_confirm_cancel", false, 648, 250);
	changeConfirmCancelDialog.setTitle(new GwtMessage().getMessage("Cancel Change Request"));
	changeConfirmCancelDialog.render();
}

function moveToCancel(notes) {
	g_form.setValue("state", "4");
	g_form.setValue("work_notes", notes);
	changeConfirmCancelDialog.destroy();
	gsftSubmit(null, g_form.getFormElement(), "state_model_move_to_canceled");
}

Is there some kind of trick to make this work, or does it not work in scoped applications or something?

Thanks for your help,

Hans

[Ankur Bawiskar]

@Hans Peter 

Something similar I shared earlier; enhance it for your requirement

Showing UI page from UI action and updating the current record

How to get pop up in ITSM Application

Regards
Ankur

[Hans Peter]

Hi Ankur,

Thanks for pointing me in the right direction. I ended up implementing it differently than you shared, by scouring through the available UI Pages and UI Actions, I found a construct that is frequently used, which is passing a function in the UI Action to the UI Page via dialog.setPreference().

UI Action

var popupwindow;

function loadpopup() {
	var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
	popupwindow = new dialogClass("sn_customerservice_test_ui_page", false, 648, 250);
	popupwindow.setTitle(new GwtMessage().getMessage("Test Popup"));
	popupwindow.setPreference('setFields',  setFields.bind(this, popupwindow));
	popupwindow.render();

function setFields(setFields, parm1, parm2) {
    g_form.setValue('field1', parm1);
    g_form.setValue('field2', parm2);
	popupwindow.destroy();
	gsftSubmit(null, g_form.getFormElement(), "test_ui_action");
}

UI Page client script:

function onSubmit() {
	var p1 = gel('parm1').value;
	var p2 = gel('parm2').value;

	var gdw = GlideDialogWindow.get();
	var f = gdw.getPreference('setFields');
	if (typeof(f) == 'function') {
		f(p1,p2);
		return;
	}
}

This works for me, I'm not sure if it's the most elegant way, but it works.

[Ankur Bawiskar]

Can you please share quick demo of this via screenshot so that this comes handy to members later on?