Help with onLoad modal in catalog client script

Biddaum · 3 weeks ago

I have a requirement to have a modal on load to present a message to the requester when they load a catalog item.

Most times they are likely going to select the positive option and want to proceed, however I need to cover the chance that they don't want to proceed. So I want to take them back to either their previous page or to a set url if they cancel.

We are on Zurich and this is on Employee Centre

Below is what I currently have in a catalog client script.

Applies to - A Catalog Item

Active is true

UI Type - ALL

Type - onLoad

Applies on Catalog Item view - True

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

    if (typeof spModal !== 'undefined') {

        if (g_scratchpad.isFormValid) {
            return true;
        }

        var actionName = g_form.getActionName();

        spModal.open({
            backdrop: 'static',
            keyboard: false,
            message: 'Please select cancel if you want to go back',
            title: 'This is a test',
            buttons: [{
                    label: 'Cancel',
                    cancel: true
                },
                {
                    label: 'Proceed',
                    primary: true
                }
            ]
        }).then(
            function onAgree(result) {
                g_scratchpad.isFormValid = true;
                g_form.submit(actionName);
                return true;
            },
            function onDisagree(reason) {
                setTimeout(function() {
                    window.location.href = 'https://www.testing.com';
                }, 0);
                return false;
            }
        );

        g_scratchpad.isFormValid = false;
        return false;

    } else {
        var gm = new GlideModal();
        gm.setTitle('Error');
        gm.renderWithContent('Something has gone wrong Prompt');
    }
}

Would love some help please.

Ankur Bawiskar · 3 weeks ago

@Biddaum

then try this and it will work in portal

function onLoad() {
    var modalInstance;

    spModal.open({
        title: 'This is a test',
        message: 'Please select cancel if you want to go back',
        buttons: [{
            label: 'Proceed',
            value: 'agree',
            primary: true // Makes this button visually prominent
        }, {
            label: 'Cancel',
            value: 'disagree'
        }]
    }).then(function(result) {
        // This function executes when a button is clicked
        if (!result.primary) {
            top.location.href = 'https://www.testing.com';
        } else {
            if (modalInstance) {
                modalInstance.dismiss(); // Dismisses the modal
            }
        }
    });
}

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

Regards,
Ankur
✨ Certified Technical Architect || ✨ 10x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

lauri457 · 3 weeks ago

You have to set isolate script to false, then you can access the window object from this.

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

    if (typeof spModal !== 'undefined') {

        if (g_scratchpad.isFormValid) {
            return true;
        }

        var actionName = g_form.getActionName();

        spModal.open({
            backdrop: 'static',
            keyboard: false,
            message: 'Please select cancel if you want to go back',
            title: 'This is a test',
            buttons: [{
                    label: 'Cancel',
                    cancel: true
                },
                {
                    label: 'Proceed',
                    primary: true
                }
            ]
        }).then(
            function onAgree(result) {
                g_scratchpad.isFormValid = true;
                g_form.submit();
                return true;
            },
            function onDisagree(reason) {
                setTimeout(function() {
                    this.location.href = 'https://www.testing.com';
                }, 0);
                return false;
            }
        );

        g_scratchpad.isFormValid = false;
        return false;

    } else {
        var gm = new GlideModal();
        gm.setTitle('Error');
        gm.renderWithContent('Something has gone wrong Prompt');
    }
}

To successfully submit with gform on the catalog item widget you also need to do something like this. Make sure you dont have two step checkout on the item

const $scope = angular.element("#sc_cat_item").scope()
$scope.data.sc_cat_item.item_action = "order";
g_form.submit()
//or maybe instead of submit use
$scope.triggerOnSubmit()

Biddaum · 3 weeks ago

@lauri457 thank you for your help, I appreciate your reply

I could not however isolate the script as that option was no available on an onload script.

We don't have two step checkout enabled at all

lauri457 · 3 weeks ago

Isolate script can be used for all client scripts, but I didn't realise that it actually doesn't stop accessing top as shown in Ankurs solution.

The two step checkout would have mattered only if you needed the g_form.submit() call but it doesn't seem like you actually wanted that