How do you set the OnClick values for buttons created using spModal

[siakam]

I am currently building a Modal that pops up when a user saves a record on the Service Portal. I have been using spModal.open to generate this modal. I want the button generated with the Modal to call a specific function when it is clicked. Is there a way to do this?

For clarity, I am referring to this line in the spModal.open function.
buttons: [
{label:'OK', primary: true}
]

[Jace Benson]

I handled this... this way;

https://jace.pro/post/2019-08-25-sp-embedded-widgets/

[Robert Beeman]

Have you tried uibModal instead of spModal? I find it a lot more flexible. You can use your own template with it and create your own buttons:

https://serviceportal.io/modal-windows-service-portal/

[Oleg]

spModal don't have callback, which allows to control onClick event handler. spModal has $scope.buttonClicked function, which will be called onClick. I can suggest you to "subclass" the method $scope.buttonClicked and to call original one if needed. The main idea of the approach can be shown on the below code: 

	spModal.open({
			title: "Some Title",
			message: "Some text",
			buttons: [{
                label: i18n.getMessage("No"),
                cancel: true
            }, {
                label: i18n.getMessage("Ask me later"),
                myProp: "someValue"
            }, {
                label: i18n.getMessage("Yes"),
                primary: true
            }]
		}).then(function (response) {
			//
		});

	setTimeout(function () {
		var $modal = angular.element(".modal");
		if ($modal.length > 0) {
			var oldButtonClick = $modal.scope().buttonClicked;
			$modal.scope().buttonClicked = function (button) {
				debugger;
				if (button.myProp === "someValue") {
					alert("My custom button is clicked!");
				} else {
				    oldButtonClick.call(this, button);
				}
			}
		}
	}, 0);

[xiaix]

Oleg...all I gotta say is brilliant!

Here's how I'm using mine:

$scope.showAlertHistory = function(){
		var msg = '';
		for (var i = 0; i < $scope.alertHistory.length; i++){
			msg += '<div>'+$scope.alertHistory[i].time+' - '+$scope.alertHistory[i].msg+'</div>';
		}
		/* https://developer.servicenow.com/dev.do#!/reference/api/sandiego/client/SPModal-API */
		/* https://github.com/angular-ui/bootstrap/tree/master/src/modal */
		spModal.open({
			title: 'Notification History', /* a string that can be HTML that goes in the header. The default is empty. */
			message: msg, /* a string that can be HTML that goes in the header. The default is empty. */
			input: false, /* a Boolean. When true shows an input field on the dialog. The default is false. */
			value: '', /* a string containing the value of the input field. The default is empty. */
			widget: '', /* a string that identifies the widget ID or sys_id to embed in the dialog. The default is empty. */
			widgetInput: null, /* an object to send the embedded widget as input. The default is null. */
			shared: null, /* a client-side object to share data with the embedded widget client script. */
			size: 'sm', /* a string indicating the size of the window. Can be 'sm' or 'lg'. The default is empty. */
			messageOnly: true, /* if true, then options.headerStyle will be: border: 'none' */
			noDismiss: true, /* if true, then options.headerStyle will be: display: 'none' */
			backdrop: true, /* (Type: boolean|string, Default: true) - Controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' (disables modal closing by click on the backdrop). */
			keyboard: true, /*  (Type: boolean, Default: true) - Indicates whether the dialog should be closable by hitting the ESC key. */
			buttons: [  /* an array that contains the buttons to show on the dialog. The default is Cancel and OK. */
				{label:'OK', primary: true},
				{label:'Clear history', clear: 'true'}
			]
		});

		$timeout(function(){
			var $modal = angular.element(".modal");
			if ($modal.length > 0) {
				var oldButtonClick = $modal.scope().buttonClicked;
				$modal.scope().buttonClicked = function (button) {
					if (button.clear === "true") {
						$scope.alertHistory = [];
						oldButtonClick.call(this, button);
					} else {
						oldButtonClick.call(this, button);
					}
				}
			}
		},100);

	};