We're reclaiming inactive PDIs to keep them available for active builders. Learn what's changing, who's affected, and how to protect your work. Read More

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