How to pass reponse from Child widget to parent in SPModal

[Revathi Kotha]

I am trying to pass the response from the child widget to the parent in spModal, but it's not working.

I followed this article to accomplish this.  https://jace.pro/post/2019-08-25-sp-embedded-widgets/

Unable to get a response from the child. Am I missing anything here? Please guide me in the right direction.

Parent :

var shared={};
				spModal.open({

					title: 'Reason for deactivating CW',
					buttons:[],
					widget: 'cwdeactivation',
					widgetInput: {sys_id:number,action:'Remove'},
					shared:shared

				}).then(function(shared) {
					
					
					console.log('REMOVALREASON'+shared);

				});


Child:

Client script:

api.controller=function($window,$scope) {
	/* widget controller */


	var c = this;
	
	c.fromDate = {
		displayValue: '',
		value: '',
		name: '',
		id: 'fromDate',
		placeholder: 'YYYY-MM-DD'
	};
	

	c.updateemployee=function()
	{
	
	var shared=c.widget.options.shared;
		
		c.value = function value(newVal){
		return angular.isDefined(newVal) ? (shared.value = newVal) : shared.value;
	}
		
		
		
		$scope.$parent.$parent.$dismiss();
	}
	
	
};


HTML:


  <label>Please select the End Date</label>
  <sp-date-picker field="c.fromDate" ng-model="c.fromDate.value" ng-model-options="{getterSetter: true}" ng-required="true"></sp-date-picker>
  <br/>
  
   
  
  <label class="col-md-4 control-label" for="textinput">Please provide the reason for deactivating employee</label>  
  
   <textarea class="form-control" ng-model="c.value" ng-model-options="{getterSetter:true}"></textarea>
    
 
  
  <br/>
  <button id='updateemployee' ng-click="c.updateemployee()">Update
    
  </button>
  

[Chaitanya Redd1]

Hi,

Can you try below changes to your script and ensure that both the widgetInput and shared objects are being passed correctly between the parent and child and you don’t need to create a getter/setter function for the shared object. Direct assignment should work as long as you are passing the same reference back and forth.

Client Script in Child Widget:

api.controller = function($window, $scope) {
    var c = this;

    c.fromDate = {
        displayValue: '',
        value: '',
        name: '',
        id: 'fromDate',
        placeholder: 'YYYY-MM-DD'
    };

    c.updateemployee = function() {
        // Access the shared object from widget options
        var shared = c.widget.options.shared;
        
        // Set the shared value directly
        shared.value = c.value;

        // Dismiss the modal
        $scope.$parent.$parent.$dismiss();
    };
};

In the HTML, ensure you bind the model correctly for c.value:

<textarea class="form-control" ng-model="c.value"></textarea>

Parent Script:

In the parent script, you should now be able to log the shared.value passed back from the child:

var shared = {};
spModal.open({
    title: 'Reason for deactivating CW',
    buttons: [],
    widget: 'cwdeactivation',
    widgetInput: { sys_id: number, action: 'Remove', shared: shared },
    shared: shared
}).then(function(responseShared) {
    console.log('REMOVAL REASON: ' + responseShared.value); // Access the shared value from child
});

Thanks,

Chaitanya

[Revathi Kotha]

Thank you for responding @Chaitanya Redd1  .Unfortunately it's not working. I added console messages here, and it looks like it's not executing the block.

spModal.open({
    title: 'Reason for deactivating CW',
    buttons: [],
    widget: 'cwdeactivation',
    widgetInput: { sys_id: number, action: 'Remove', shared: shared },
    shared: shared
}).then(function(responseShared) {
	console.log('InTHERemovelaoption');
    console.log('REMOVAL REASON: ' + responseShared.value);
	// Access the shared value from child
});

[Chaitanya Redd1 · Accepted solution]

Hi,

Updated Child Widget Client Script:

api.controller = function($window, $scope) {
    var c = this;

    c.fromDate = {
        displayValue: '',
        value: '',
        name: '',
        id: 'fromDate',
        placeholder: 'YYYY-MM-DD'
    };

    c.updateemployee = function() {
        // Access the shared object from widget options
        var shared = c.widget.options.shared;

        // Set the shared value directly
        shared.value = c.value;

        // Close the modal and pass the shared object back
        $scope.$parent.$parent.$close(shared);  // Use $close instead of $dismiss
    };
};

Updated Parent Script:

var shared = {};
spModal.open({
    title: 'Reason for deactivating CW',
    buttons: [],
    widget: 'cwdeactivation',
    widgetInput: { sys_id: number, action: 'Remove', shared: shared }
}).then(function(responseShared) {
    console.log('InTHERemovelaoption');
    console.log('REMOVAL REASON: ' + responseShared.value);  // Access the shared value from child
});

[Revathi Kotha]

Thanks, Chaitanya. I used the rootscope. The on-and-broad method was used to pass the variables to the child widget, and it worked. I appreciate all your help. I will try your proposed solution, and next time, it will be helpful for me to fix the issues.