Service Portal spModal: what can the "shared" option be used for?

[ITSM Dev]

What can the "shared" option in spModal be used for and how?

It is shown in below example code

[Mohith Devatte]

Hello,

shared - a client-side object to share data with the embedded widget client script.

If you send some variable in that shared option you will be able to access it in the widget client controller script that you called in widget parameter

For more explanation and details please refer to below link https://developer.servicenow.com/dev.do#!/reference/api/sandiego/client/SPModal-API

Please mark me answer correct if you find it helpful

[Mohith Devatte]

HELLO

DID MY RESPONSE HELP IF YES PLEASE MARK MY ANSWER CORRECT AND HELPFUL . THIS WILL HELP OTHERS TOO WITH SAME QUERY

[Upender Kumar]

Example

Html Template

<div>
  <button ng-click="c.onChangeSchedule()">
    Open
  </button>
  
  <div ng-if="c.selectedValue">
    You picked: {{c.selectedValue.text}}
  </div>
</div>

Client Script

function ($scope,spModal) {	
	var c = this;
	var shared = {};
	c.onChangeSchedule = function(){
		spModal.open({
			title: 'Select a value',
			widget: 'bec1438bdbf276009ed8f81d0f96193e',
			widgetInput: { hint: "Soup or Nuts?" },
			shared: shared
		}).then(function() {
			// Shared object was updated
			c.selectedValue = shared.selection;
		});
	}
}

[Trevor Muhl]

I had to do more research to understand how this parent<-->child widget communication works. Hopefully this is helpful.

Parent Widget

Provide the child widget with initial data either on the server-side ("widgetInput"), client-side ("shared"), or both.

Parent widget client script:

var shared = {'parm1': 'Hello shared object'}; // You can name this object whatever you like
spModal.open({
	title: 'My Custom Title',
	widget: 'my-custom-widget-id',
	widgetInput: {'parm1': 'Hello widget input'}, // Becomes "input" on child server script
	shared: shared // Becomes "c.widget.options.shared" on child client script
})...

Child Widget

Use the data initial provided by the parent widget and send data back using the "shared" object.

Child widget client script:

api.controller=function($scope) {
	var c = this;
	var sharedObject = c.widget.options.shared; // {'parm1': 'Hello shared object'}
	var dataFromParent = sharedObject.parm1; // 'Hello shared object'
};

Child widget server script:

(function() {
	if (input) {
		data.dataFromParent = input.parm1; // 'Hello widget input'
	}
})();

Whether you use "shared" or "widgetInput" within spModal depends on whether you need that data on the client-side or server-side of the child widget.