Pass the values from client script to widget using spModal

[zee15]

Hi,
I’m currently working on a use case where I need to display a popup message after submitting a Service Catalog form. To achieve this, I created a custom widget and added an onSubmit Catalog Client Script to invoke the widget.
Below is the catalog client script I’m using:

function onSubmit() {
    // Delay needed so RITM gets created first
    setTimeout(function() {
		spModal.open({
                widget: 'ritm_onsubmit_alert',   // ✅ your widget ID
                size: 'lg',
                widgetInput: {
                    ritm: "RITM-Test-Num",  //data.ritm,
                    submitted: "19/05/2026" //data.submitted
                },
                buttons: [] // remove default buttons
            });
    }, 2500); // ✅ IMPORTANT delay
    return false;
}

 As shown above, the popup appears after clicking the Submit button.

Issue:
I want to dynamically pass values such as the RITM number and submission date to the widget. However, I’m facing issues while passing these values.

I’ve tried multiple approaches, but none of them worked.
I’m also sharing both the Server Script and Client Script of the widget for reference.

Server-Side Script from widget:

(function() {
    /* populate the 'data' object */
    /* e.g., data.table = $sp.getValue('table'); */

    if (input.userInput) {
		gs.addErrorMessage("Input is working...");
        data.ritm = input.ritm || "Loading...";
        data.submitted = input.submitted || new GlideDateTime().getDisplayValue();
    }else{
		gs.addErrorMessage("Input is not working...")
	}

})();

Client-Side Script from widget:

api.controller = function($scope, spModalInstance) {
    /* widget controller */
    var c = this;
    c.close = function() {
        spModalInstance.close();
    };
};

Could someone please help me resolve this issue? Any guidance would be greatly appreciated.
Thanks in advance!

[vaishali231]

Hey @zee15 

The issue is with this condition in your widget Server Script:

if (input.userInput)

In your spModal.open() call, you are passing values inside widgetInput, but you are not passing any property called userInput. In a Service Portal widget, the values passed through widgetInput are available in the widget Server Script as input.

So you should directly read:

input.ritm

input.submitted

Updated code:

Catalog Client Script:

function onSubmit() {
    setTimeout(function() {
        spModal.open({
            widget: 'ritm_onsubmit_alert',
            size: 'lg',
            widgetInput: {
                ritm: "RITM-Test-Num",
                submitted: "19/05/2026"
            },
            buttons: []
        });
    }, 2500);
    return true;
}

Widget Server Script:

(function() {
    data.ritm = "Loading...";
    data.submitted = new GlideDateTime().getDisplayValue();
    if (input) {
        data.ritm = input.ritm || data.ritm;
        data.submitted = input.submitted || data.submitted;
    }
})();

Widget Client Script:

api.controller = function($scope, spModalInstance) {
    var c = this;
    c.close = function() {
        spModalInstance.close();
    };
};

Widget HTML:

<div class="modal-body text-center">
    <h3>Request Submitted Successfully</h3>
    <p>
        <strong>RITM Number:</strong> {{data.ritm}}
    </p>
    <p>
        <strong>Submitted Date:</strong> {{data.submitted}}
    </p>
    <button class="btn btn-primary" ng-click="c.close()">
        Close
    </button>
</div>

Important note:

If you want to show the actual generated RITM number, you cannot reliably get it in a normal onSubmit Catalog Client Script before the submission completes. At the time onSubmit runs, the RITM is not created yet.

The hardcoded value will work:

ritm: "RITM-Test-Num"

But the actual RITM number will only be available after the request is submitted and the record is created.

Recommended approach:

Instead of showing the popup directly from onSubmit, redirect the user after submission to a custom page or confirmation page, pass the request/RITM sys_id or number, and then show the popup from that page.

Also, avoid using:

return false;

because it stops the catalog item from submitting unless you manually submit it again. Use return true if you want the normal submit process to continue.

************************************************************************************************************************************

If this response helps, please mark it as Accept as Solution and Helpful.

Doing so helps others in the community and encourages me to keep contributing.

Regards

Vaishali Singh

Servicenow Developer
Linkedin - https://www.linkedin.com/in/vaishali-singh-2273361bb

[zee15]

Hi @vaishali231 ,
Thank you for your response. I’m aware that the RITM will not be generated at the same time, which is why I am currently testing by passing hardcoded values. Once that works successfully, I will handle the dynamic part as well.
I also tried the code you shared, but it is not working—it is still showing the same popup without the values.

see the attached ss below:

[Ankur Bawiskar]

@zee15 

but why you want this?

The users will be redirected to Order Summary page and from there they can click and see the RITM etc

I don't think you should do this much customization as it will lead to technical debt and issues during platform upgrade.

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

[zee15]

Hi,@Ankur Bawiskar ,
Thank you for your response. This requirement is primarily to enhance the user experience. I had already suggested the same, but it wasn’t agreed upon, and the team prefers implementing a popup.
Could you please help me resolve this issue? Everything is working fine except for passing these values. If I’m able to pass these values from the client script to the widget, the problem will be resolved, as this is the only part where I’m currently stuck.