How to use UI Page in OnSubmit client script

[Supriya25]

Hi All,

Please help me on below issue

How to validate  UI Page value in Onsubmit

OnSubmit:

function onSubmit() {

if (g_form.getActionName() == "resolve_incident") {
var gm = new GlideModal('confirm_changes');
gm.setTitle('Confirm');
gm.setWidth(400);
gm.render();

 

if(user clicked on 'Do Change' button )
{
g_form.setReadonly('field 1',false);
g_form.setReadonly('field 2',false);

g_form.addErrorMessage("Change values on fields");

return false;
}

if(user clicked on 'Confirmed' button)

{

validateDates();

return true;

}

function checkManagers()

{

if(........)

{

return false;

}else{

return true;

}

}return true;
}
}

}

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

<p>Are you sure about your changes ?</p>

<br/>

<div style="float: right">

<g:dialog_buttons_ok_cancel ok="return sendvalue()" ok_type="button" ok_text="Confirmed" ok_style_class="btn btn-primary" cancel="return destroyWindow()" cancel_type="button" cancel_text="Do Change" cancel_style_class="btn btn-default" />

</div>

</j:jelly>

Client script :

function sendvalue {

    destroyWindow();

    return true;

}

function destroyWindow() {

    GlideDialogWindow.get().destroy();

    return false;

}

[Omkar Kumbhar]

@Supriya25 ,

Please refer to the below link

https://servicenowguru.com/system-ui/glidedialogwindow-advanced-popups-ui-pages/

[Supriya25]

I got Solution from sources.

g:ui_form>
	<div id = "u_fpc_message_area123"  style="min-height: 100px; overflow: hidden;" />

	<!-- action buttons -->
	<div class="modal-footer">
		<span class="pull-right">
			<g:dialog_buttons_ok_cancel ok="uFpcCloseWindow('ok')"  cancel="uFpcCloseWindow('cancel')" cancel_text="change"/>
		</span>
	</div>

</g:ui_form>


Client script :
(function() {
    //script that runs onload of the page
    try {
        //remove focus from the "X" button
        document.activeElement.blur();

        //set focus to the Cancel button so the ESC key can be used to close the window
        gel("cancel_button").focus();

        //add event listener to the "X" button so we can tell if it was clicked
        var el = document.getElementById("u_fpc_modal_simple_confirm_closemodal");
        el.addEventListener("click", uFpcCloseX);

        //drop the message into the designated area
        var messageArea = gel("u_fpc_message_area123");
        messageArea.innerHTML = decodeURIComponent("${sysparm_message}");

    } catch (err) {}
})();


function uFpcCloseWindow(button) {
    var gdw = GlideDialogWindow.get();
    var f = ""; //function that will be called on close of the window, if any

    switch (button) {
        case "ok":
            f = gdw.getPreference("uFpcOnCloseOk");
            break;
        case "cancel":
            f = gdw.getPreference("uFpcOnCloseCancel");
            break;
        case "x":
            f = gdw.getPreference("uFpcOnCloseX");
            break;
    }

    //is there something to run?
    if (typeof(f) == 'function') {
        try {
            f.call(gdw);
        } catch (e) {}
    }
    gdw.destroy();
    return false;
}
//function called when the "X" button is clicked
function uFpcCloseX() {
    uFpcCloseWindow("x");
}

OnSubmit:

function onSubmit() {
    if (g_form.getActionName() == "resolve_incident") {

        var message = "Your Contact type :" + g_form.getValue('contact_type');
        var modalWindow = new GlideModal("u_fpc_modal_simple_confirm");
        try {
            modalWindow.setBackdropStatic(true);
        } catch (err) {}
        modalWindow.setWidth(600);
        modalWindow.setTitle("Simple Modal Confirm Test");
        modalWindow.setPreference("sysparm_message", encodeURIComponent(message));

        //set the functions we want to run after the OK button is clicked
        modalWindow.setPreference('uFpcOnCloseOk', ClickOnOk.bind(this));
        modalWindow.setPreference('uFpcOnCloseCancel', ClickOnClose.bind(this));
        modalWindow.setPreference('uFpcOnCloseX', uFpcOnCloseX.bind(this));

        modalWindow.render();

        return false;
    }

    function ClickOnOk() {
        g_form.addWarningMessage("The 'OK' button was clicked (" + Date.now() + ")");
        // gsftSubmit(null, g_form.getFormElement(), "u_fpc_learning_simple_modal_confirm"); //MUST call the 'Action name' set in this UI Action
        
            if (g_form.getValue('contact_type') == 'email') {
                g_form.addErrorMessage('Contact type should not be "Email"');
                return false;
            }
            if (g_form.getValue('category') == 'hardware') {
                g_form.addErrorMessage('Category should not be "Hardware"');
                return false;
            }      
            return true;
        }

    function ClickOnClose() {
        alert("The confirm dialog was cancelled (" + Date.now() + ")");
        g_form.addWarningMessage("The confirm dialog was cancelled (" + Date.now() + ")");
        return false;
    }
    function uFpcOnCloseX() {
        g_form.addWarningMessage("'X' was clicked to close the confirm window (" + Date.now() + ")");
    }
}

1. after clicking on Ok button button do validation remaining script.

if every thing is fine then auto-execute/save 

function : ClickOnOk()

Could you please help me on that?

[Omkar Kumbhar]

Hello @Supriya25 ,

The above script which you shared is working prefectly fine. 

You can add your validation in the 

function ClickOnOk() {
        g_form.addWarningMessage("The 'OK' button was clicked (" + Date.now() + ")");
        // gsftSubmit(null, g_form.getFormElement(), "u_fpc_learning_simple_modal_confirm"); //MUST call the 'Action name' set in this UI Action
        
            if (g_form.getValue('contact_type') == 'email') {
                g_form.addErrorMessage('Contact type should not be "Email"');
                return false;
            }
            if (g_form.getValue('category') == 'hardware') {
                g_form.addErrorMessage('Category should not be "Hardware"');
                return false;
            }      
            return true;
        }

Here I have added 

if (g_form.getValue('category') == 'software') {
g_form.addErrorMessage('Contact type should not be "software"');
return false;
}
if (g_form.getValue('subcategory') == 'email') {
g_form.addErrorMessage('Category should not be "email"');
return false;
}

Please let me know what validations are you going to perform

Thanks,

Omkar

[Supriya25]

if (g_form.getValue('category') == 'software') {
g_form.addErrorMessage('Contact type should not be "software"');
return false;

""" Reload the Form"""""
}
if (g_form.getValue('subcategory') == 'email') {
g_form.addErrorMessage('Category should not be "email"');
return false;

""" Reload the Form"""""
}

if everything is fine then Save the record.