How to access widgetInput data

[dgarnica]

Hi experts,

I'm starting with Widgets and I'm need to pass a value from the spModal to the widget, I'm trying the "widgetInput" parameter, for example:

spModal.open({

            title: 'My First Widget,

            widget: "my_first_widget",

            widgetInput: {

                test: '111233555'

            },

            size:"md"

        }).then(function(){

        }) ;  

Is there an option to read a value passed from the spModal?, I tried with data or input, for example: input.test or data.test but it doesn't get the value in the Widget.

[-O-]

As far as I can tell spModal does not return values, it only returns which button closed the dialog and runs the (Promis) "thenable" with the same index as the pressed button.
E.g. if you specify 3 buttons (in options), you will specify 3 parameters/thenables for .then() and when the dialog is closed with the 3rd button, the 3rd theanable function will be called.

If you want to obtain more information from the dialog, I'd advise you to try $uibModal, which does allow interaction with the "current" scope.

[ChrisBurks · Accepted solution]

Hi @dgarnica ,

One possible solution is to use the $scope property named "widget_parameters". If you add a property called "shared" to the object passed to the spModal.open() method, it will be added to the widget_parameters property on the current widget $scope and it will be accessible in both the modal and the calling widget.

Here is a basic example:

Widget that opens the spModal

HTML:

<div>
  <h3>
    Hello 
    <span ng-hide="c.MySharedVar.person">_______</span>
    <span ng-show="c.MySharedVar.person" class="text-success">{{c.MySharedVar.person}}</span>
   !
  </h3>
  
  <button class="btn btn-default" ng-click="c.openModal()">
    Get Person
  </button>

</div>

Client Controller:

api.controller=function($scope, spModal) {

	var c = this;

	c.MySharedVar = {
		"person":"",
	};

	c.openModal = function() {
		spModal.open({
			"title":"My First Widget",
			"shared": c.MySharedVar,
			"widget": "my-first-widget",
			"size":"md",
			buttons:[
				{"label":"Cancel", "cancel":true},
				{"label": "Ok", "primary":true}
			],
			
		});
	}
};

Widget appearing in the modal (my-first-widget)

HTML

<div>
 <form>
   <div class="form-group">
     <label for="FirstInputPerson">Who Am I</label>
     <input id="FirstInputPerson" class="form-control" ng-model="c.MySharedVar.person">
   </div>
  </form>
</div>

Client Controller

api.controller=function($scope) {
  var c = this;
	
	c.MySharedVar = $scope.widget_parameters.shared;

};

Rendered Demo:

Pass object from Modal back to Widget

[dgarnica]

Hi @ChrisBurks 

Thanks for the help, this solved the requirement. Now I'm trying to close the parent modal of the widget but nothing works, I already tried with:

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

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

If I include those lines in the ng-click with the button works fine, but I need to send the close event based on the result of a validation inside the widget.

[ChrisBurks]

Can you provide an example of where and how you're using the methods?

These forms work for me within the client controller of the widget embedded in the spModal:

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

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

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

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

For a simple example (keep in mind I don't know anything about the logic of your validation)

I added a $watch on the property "person" on the shared object. If it is equivalent to "Susan" then close.

api.controller=function($scope) {
  var c = this;
	
	c.MySharedVar = $scope.widget_parameters.shared;

   $scope.$watch('c.MySharedVar.person', function(data){
		if(data == 'Susan')
			$scope.$parent.$parent.$dismiss();
	})

};

This is closing the modal.