spModal is not working in onSubmit Catalog Client Script on Native page!

[nirwan_ritik]

Hi all, I have written an onSubmit Catalog Client Script where for a particular variable choice I want to restrict the submission of the form. It's working fine on Portal but is not working on Native UI and giving below error. 

 Error:

Script:
function onSubmit() {

    //Type appropriate comment here, and begin script below

    var AD;

    var variable = g_form.getValue('varName');

    var message;

    if (variable == "Other") {

        AD = '<a target="_self" href= "https://abc.service-now.com/esc?id=sc_cat_item&table=sc_cat_item&sys_id=b235dbdb675010b4b46e59139619... "> XYZ Catalog Item Request </a>';

        message = "<h3>Please use the" + AD + "form </h3>";

        spMessage(message);

        return false;

    }

    function spMessage(message) {

        var obj = {

            title: 'Attention',

            message: message,

            buttons: [{

                label: "Close"

            }],

        };

        var spm = spModal.open(obj);

    }

}


Kindly help me resolving my issue 🙂

[Tushar]

Hi @nirwan_ritik 

The spModal object is specific to the Service Portal framework and it's not available in the Native UI, leading to the "ReferenceError: spModal is not defined" error.

This should resolve your issue -

function onSubmit() {
    var variable = g_form.getValue('varName');
    var message;

    if (variable == "Other") {
        var AD = '<a target="_self" href="https://abc.service-now.com/esc?id=sc_cat_item&table=sc_cat_item&sys_id=b235dbdb675010b4b46e59139619...">XYZ Catalog Item Request</a>';
        message = "<h3>Please use the" + AD + "form </h3>";

        // Check if in Service Portal context
        if (typeof spModal !== 'undefined') {
            spMessageSP(message);
        } else {
            // If not in Service Portal, provide an alternative behavior or message
            alert("Please use the Service Portal for this action.");
        }

        return false;
    }

    function spMessageSP(message) {
        var obj = {
            title: 'Attention',
            message: message,
            buttons: [{
                label: "Close"
            }],
        };
        var spm = spModal.open(obj);
    }
}

Thanks,

Tushar

[Iraj Shaikh · Accepted solution]

Hi @nirwan_ritik 

The error you're encountering is because `spModal` is specific to the Service Portal environment and is not available in the Native UI (standard platform interface). The `spModal` object is part of the Service Portal's AngularJS framework, which is not loaded in the Native UI.

To make your client script compatible with both the Service Portal and the Native UI, you'll need to use a different approach for displaying messages in the Native UI. You can use `g_form.addErrorMessage()` or `alert()` for the Native UI, and keep `spModal` for the Service Portal.

Here's an updated version of your script that checks the environment and uses the appropriate method to display the message:

function onSubmit() {
    //Type appropriate comment here, and begin script below
    var variable = g_form.getValue('varName');
    if (variable == "Other") {
        var message = "Please use the XYZ Catalog Item Request form.";

        // Check if we are in the Service Portal or Native UI
        if (typeof spModal !== 'undefined') {
            // We are in the Service Portal
            spMessage(message);
        } else {
            // We are in the Native UI
            g_form.addErrorMessage(message);
        }
        return false;
    }
}

function spMessage(message) {
    var obj = {
        title: 'Attention',
        message: "<h3>" + message + "</h3>",
        buttons: [{
            label: "Close"
        }],
    };
    spModal.open(obj);
}

In this script, we check if `spModal` is defined. If it is, we assume we're in the Service Portal and use `spModal` to display the message. If `spModal` is not defined, we use `g_form.addErrorMessage()` to display the message in the Native UI.

Please note that the `alert()` function could also be used for a simple pop-up message in the Native UI, but it's generally not recommended for a better user experience. The `g_form.addErrorMessage()` method is preferred as it integrates better with the form's UI and user experience.

Please mark this response as correct or helpful if it assisted you with your question.

[Salah2]

Hi @Iraj Shaikh @Tushar  

I am experiencing a similar issue, and I would like to know if you have a solution to fix the problem.

I am new to scripting and SP, so I greatly appreciate your help.

function onSubmit() {
    //Type appropriate comment here, and begin script below

    if (typeof spModal !== "undefined" && !g_form._hasConfirmed) {

        spModal.open({
            title: "Acknowledgment:",
            message: "Confirm",
            buttons: [{
                    label: "Cancel",
                    cancel: true
                },
                {
                    label: "Confirm",
                    primary: true
                }
            ]
        }).then(function(confirm) {
            if (confirm) {
                g_form._hasConfirmed = true;
                var actionName = g_form.getActionName();
                g_form.submit(actionName);
                return true;
            }
        });

        return false;
    }
}