how to get past widget options in server script from the embedded widget in Service Portal

TouriaL
Tera Contributor

I have two widgets, I call one on the other. The problem is that I can not get back the options on the child widget’s script server but on the client script I get them well (see screenshot).
Can you help me to fix this problem ?

TouriaL_0-1673610880003.png

 

Parent widget:
server script: widget embedded in the server script
var instanceOptionsDecoded={
message: "test message",
colonne: "test colonne"
}
data.embeddedWidget = $sp.getWidget(widgetId,instanceOptionsDecoded);
html:
<sp-widget widget="data.embeddedWidget"></sp-widget>

child widget:
Customer Controller:
api.controller=function($scope, $window) {
/* widget controller */
var c = this;
c.parameters = {
action: "firstLoad"
};
c.server.get(c.parameters). then(function(response){
c.data = response.data;
c.isLoading = false;
});
server script:
(function() {
/* fill in the data object*/
/* e.g. data.table = $sp.getValue('table'); */
if (input && input.action == "firstLoad") {
data.message = options.message;
data.colonne = options.colonne;


})
html:
<div>
<h1>Options column: {{c.data.colonne}}</h1>
<h1>Option message: {{c.data.message}}</h1>

<pre>{{c.options | json}}</pre>
</div>

 

5 REPLIES 5

-O-
Kilo Patron
Kilo Patron

The child widget does nothing with the options during initial load (when they are actually available).

After both parent and child widgets will have been loaded into the page, a second HTTP transaction is initiated by the client controller of the embedded/child widget, but exactly because it is embedded it has no instance record, so it cannot have options.

That's one of the reasons.

The other one is because you post code without using the appropriate tool:

2023-01-21-1.png

The question is, why are you trying to use options on the 2nd call only?

Why not store those on data on 1st load and send those back whenever needed?

Something like - in server script:

(function () {
	if (input && input.action == "firstLoad") {
		options.message = input.message;
		options.colonne = input.colonne;
	}

	data.message = options.message;
	data.colonne = options.colonne;
})();

In the Client controller:

api.controller = function () {
	var c = this;
	//...
	c.parameters = {
		message: c.data.message,
		colonne: c.data.colonne,
		action: "firstLoad"
	};
	//...
};