Close the SPModal from embeded widget

rajneeshbaranwa · ‎03-13-2020

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

Oleg · ‎03-15-2020

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

Oleg · ‎03-16-2020

The $parent is a standard AngularJs property (see here and here, for example). One can use $scope....$parent to "travel" in scopes of parent widgets. Thus you need just know methods of parent widgets. The client side of the code of widgets can be examined using Developer Tools of Chrome for example.

One can see the Source Code of spModal using Developer Tools of Chrome. See my old answer for more details for example. You will find the code of service.spModal.js, which is readable after you would click on "{}" (formatting the code).

You will see the following code fragment of spModal:

$scope.buttonClicked = function(button) {
	if (button.cancel) {
		$scope.$dismiss();
		return;
	}
	if (options.input && $scope.form.xpForm.$invalid) {
		$scope.changed = true;
		return;
	}
	if (options.onSubmit) {
		var promise = options.onSubmit();
		promise.then(function(res) {
			if (!res.status) {
				$scope.options.errorMessage = res.errorMessage;
				return;
			} else {
				$scope.$close({
					button: button,
					input: $scope.input.value
				});
			}
		});
	} else {
		$scope.$close({
			button: button,
			input: $scope.input.value
		});
	}
}

One can set breakpoint inside of $scope.buttonClicked and examine parameters of $scope.buttonClicked, debug inside of $close and $dismiss methods and so on. After that the answer on your original question will be easy.

Rupekumar · ‎02-18-2025

Everything above is working but

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

the above one was just dismissing the modal without knowing that I have done something on child widget ,this was causing issue and server was not updating in main widget.

So I have functionalities to upload files and add comments .and created custom button to submit them on single button . I just wanted to update the server on main widget . So I used

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

.Thank you so much . Much Appreciated

Rupekumar · ‎02-18-2025

As I have defined custom button and wanted to refresh the main widget on submit of that below was perfect option to do that.

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

Rupekumar · ‎02-18-2025

As I have defined custom button and wanted to refresh the main widget on submit of that below was perfect option to do that.

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