Popup using catalog client script with user interaction

Community Alums · 3 weeks ago

Hi,

I need to create an onLoad catalog client script on my catalog item that will pop up a message:

"do you want to continue?"

and under will be two buttons:

"Yes" and "No"

If the user will click on 'Yes' the pop up will be closed and he will stay at the same page.

If he will click 'No' then he needs to redirect to Service Portal homepage

M Iftikhar · 3 weeks ago

Hi @Community Alums,

To achieve this, follow these steps:

Create a Catalog Client Script on your catalog item.
Set the Type to onLoad.
In the script field, enter:

function onLoad() {
    // Use SPModal in Service Portal
    if (typeof spModal !== 'undefined') {
        spModal.open({
            title: "Confirmation",
            message: "Do you want to continue?",
            buttons: [
                { label: 'Yes', value: true, primary: true },
                { label: 'No', value: false }
            ]
        }).then(function(response) {
            if (response.value === false) {
                // Redirect to Service Portal home
                top.window.location = '/sp';
            }
        });
    } else {
        // Fallback for classic UI (not SP)
        var answer = confirm("Do you want to continue?");
        if (!answer) {
            top.window.location = "home.do";
        }
    }
}

On loading the Catalog Item on Service Portal:

When click No it redirect to Service Portal homepage:

Similarly, on loading the Catalog Item on Classic UI:

When click No it redirect to ServiceNow Platform homepage:

If my response helped, please mark it as the accepted solution so others can benefit as well.

Thanks & Regards,
Muhammad Iftikhar

If my response helped, please mark it as the accepted solution so others can benefit as well.

View solution in original post

adityahubli · 3 weeks ago

Hello @Community Alums ,

If you are testing this requirement in the native UI, it works with the following code (don’t forget to disable “Isolate Script”). However, if you want this requirement to work in the Service Portal as well, you must add the same code in the client script of the page’s widget; otherwise, it will not work.

function onLoad() {

var d = confirm("Do you want to continue?");

if (d == false) {

// User clicked NO → redirect

top.window.location.href = top.window.location.origin + "/sp";

}

If this helps you then mark it as helpful and accept solution so it will also help to future queries

Regards,

Aditya

adityahubli · 3 weeks ago

If this solution helps you then mark it as helpful and accept as solution for future preference.

Regards,

Aditya