Help with onLoad modal in catalog client script

Biddaum
Tera Guru

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.

1 ACCEPTED SOLUTION

@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

7 REPLIES 7

Ankur Bawiskar
Tera Patron

@Biddaum 

so your requirement is simply to show modal and 2 buttons

Proceed and Cancel

On click of Cancel take them to portal home?

On click of Proceed close the modal and let them submit form?

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

@Ankur Bawiskar yes that is correct

@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

@Ankur Bawiskar 

works perfectly thank you