spModal with buttons: How to define functionality when a button is clicked?

Smith Johnson · 8 hours ago

Hello,

I have an spModal with two buttons. I would like to display a message to the user when the "Agree" button is selected, and a different message when the "Disagree" button is selected. In addition, if the user closes the modal by clicking the "X" icon, no message should appear. How to make this work?

spModal.open({
		"title" : "Terms&Conditions",
		"message" : message,
		"buttons" : [
			{label: "Agree" , primary: true},
			{label: "Disagree" , cancel: true}
		],
		"backdrop" : "static",
		"keyboard": false
})

Thanks,
Smith.

Ankur Bawiskar · 7 hours ago

@Smith Johnson

this worked for me, enhance further

spModal.open({
        title: 'Custom Action Required',
        message: 'Please choose an action:',
        buttons: [{
            label: 'Agree',
            value: 'agree',
            primary: true // Makes this button visually prominent
        }, {
            label: 'Disagree',
            value: 'disagree'
        }]
    }).then(function(result) {
        // This function executes when a button is clicked
        if (!result.primary) {
            alert('You clicked disagree!');
        } else {
            alert('You clicked agree!');
        }
    });

Output:

💡 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 || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

RaghavSh · 8 hours ago

@Smith Johnson Refer : https://www.servicenow.com/docs/bundle/zurich-api-reference/page/app-store/dev_portal/API_reference/...

This has the example where you can show alert in .then function based on the button clicked.

Please mark the answer correct/helpful accordingly.

Raghav
MVP 2023
LinkedIn

Sebastian L · 7 hours ago

Hi,

See the below script and you can use it to convert to your use-case. Because you have "cancel: true" it runs like it was using the X-close button. So You need to remove that and do another button to catch they click it.

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

    $scope.doSomething = function() {

        spModal.open({
            title: "DO SOMETHING",
            message: "do something",
            buttons: [
                { label: "DONT" }, 
                { label: "DO", primary: true }
            ]
        }).then(function(clickedButton) {            
            if (clickedButton.label === "DO") {
                console.log("User clicked DO - Do something herec");
            }         
            else if (clickedButton.label === "DONT") {
                console.log("User clicked DONT - Do something here");
            }

        }, function() {
            console.log("Dismissed via 'X' or Backdrop - Doing nothing.");
        });
    }
};

Best regards,
Sebastian Laursen