Close the SPModal from embeded widget

rajneeshbaranwa
Giga Guru

I have embeded a widget in spmodal window.

The widget contains multiple buttons, I want these button elements to perform same as OK button does in spmodal window. We have removed OK button from SpModal window

1 ACCEPTED SOLUTION

Oleg
Mega Sage

It's easy to implement your requirement if you just add $scope parameter to controller of the widget, which you embedded in spModal. Using $scope.$parent.$parent you will get the scope of or/and $uibModal. Thus you can call $dismiss and $close methods defined in $uibModal or to call buttonClicked method defined in spModal.

To be more exact, you can execute

$scope.$parent.$parent.$dismiss();

to close $uibModal and so spModal.

Alternatively you can execute

$scope.$parent.$parent.buttonClicked({ label: "Cancel", cancel: true });

or

$scope.$parent.$parent.buttonClicked({ cancel: true });

to simulate click on "Cancel" button or to execute

$scope.$parent.$parent.buttonClicked({ label: "OK", primary: true });

or

$scope.$parent.$parent.buttonClicked({ primary: true });

to simulate click on "OK" button.

In general, the object, used as parameter of buttonClicked method is very common. It can contains any additional properties, which you can access in then promise called after spModal. I mean that your call of spModal can look like

spModal.open({
    title: "Some text",
    widget: "inner-widget-test",
    buttons: []
}).then(function (response) {
    alert("response=" + JSON.stringify(response));
});

You will see that response object is exactly the object, which you used as parameter of buttonClicked method. It allows you to "send" any additional information to the outer widget, which calls spModal.

View solution in original post

8 REPLIES 8

Jags5
Mega Sage

You must be able to call JavaScript API on click of the button in your widget. 

Try to get handle of the SpModal and invoke JS API to close it or whatever that you are trying to achieve..

Please mark reply as Helpful/Correct, if applicable. Thanks!

rajneeshbaranwa
Giga Guru

That is the problem, how to get handle of Spmodal object. Any help will really be appreciated.

Oleg
Mega Sage

It's easy to implement your requirement if you just add $scope parameter to controller of the widget, which you embedded in spModal. Using $scope.$parent.$parent you will get the scope of or/and $uibModal. Thus you can call $dismiss and $close methods defined in $uibModal or to call buttonClicked method defined in spModal.

To be more exact, you can execute

$scope.$parent.$parent.$dismiss();

to close $uibModal and so spModal.

Alternatively you can execute

$scope.$parent.$parent.buttonClicked({ label: "Cancel", cancel: true });

or

$scope.$parent.$parent.buttonClicked({ cancel: true });

to simulate click on "Cancel" button or to execute

$scope.$parent.$parent.buttonClicked({ label: "OK", primary: true });

or

$scope.$parent.$parent.buttonClicked({ primary: true });

to simulate click on "OK" button.

In general, the object, used as parameter of buttonClicked method is very common. It can contains any additional properties, which you can access in then promise called after spModal. I mean that your call of spModal can look like

spModal.open({
    title: "Some text",
    widget: "inner-widget-test",
    buttons: []
}).then(function (response) {
    alert("response=" + JSON.stringify(response));
});

You will see that response object is exactly the object, which you used as parameter of buttonClicked method. It allows you to "send" any additional information to the outer widget, which calls spModal.

I was trying with $scope.parent.close()

Where can we get info about these functions and how did you determine that we need to go to $parent.$parent to reach to the level of spModal window