Close spModal - Service Portal

[kurtbell1]

I am opening a widget within the spModal class provided in Service Portal - but am wondering how do I close the Modal I've opened once I've done what I came to do in the embedded widget? This seems like it should be easy but I cant work it out. Here is the code I'm using to Open it.   As you can see I've tried in a few places to close it but with no luck.

Are there any other approaches I can try?

[ChrisBurks]

Hi Kurt,

If you haven't figured this out yet the issue is that if "buttons: []" is supplied within the spModal setup then you have to define what the buttons will contain. For example:

buttons: [

        {label:'✘ ${No}', cancel: true},

        {label:'✔ ${Yes}', primary: true}

]

Otherwise if you don't care what the buttons contain then just remove "buttons: []" from your script and you'll get the default buttons.

[nathanfirth]

spModal is just a wrapper around $uibModal which tries to make opening and closing modals easy but in my opinion you loose a lot of options and functionality by using it. We wrote a tutorial on how to use $uibModal and have a full working example you can follow: https://serviceportal.io/modal-windows-service-portal/

[jpierce_cerna]

I was facing the same challenge. I wanted to use the standard modal buttons, but my own custom versions of them. The challenge is that the spModal function "buttonClicked" lives up the hierarchal chain of controller scope, as well as the button objects themselves. So in the embedded widget you can access both the "buttonClicked" function and the button objects via the $parent. We need to go two steps above the embedded widget, so our paths look like this:

$parent.$parent.buttonClicked()

$parent.$parent.options.buttons

In my case, I had two buttons. A submit and a cancel. So the template for my custom buttons is this:

        <button ng-click="$parent.$parent.buttonClicked($parent.$parent.options.buttons[0])">Submit</button>

        <button ng-click="$parent.$parent.buttonClicked($parent.$parent.options.buttons[1])">Cancel</button>

And then you can hide the original modal footer via angular-element:

angular.element('.modal-footer').css({display:'none'});

[JC S_]

Hi, I am unsure on how to implement this solution on a similar problem we have.

Basically, we embedded the "Widget Form" on a modal, then on that form we show the fields of the incident form. What we want to achieve is recreate the functionality of the "Save" button on our own custom modal button so that we can call other functions like closing the modal upon clicking our custom "Save" button.

I tried using the button html codes you have but it does nothing.