Service Portal destroy spUtil widget

[drberg]

How can I destroy a widget created with spUtil?

I thought i could destroy a widget with toggling an ng-if boolean like this:

<div ng-if="c.showWidget">
   <sp-widget widget="c.myWidget"></sp-widget>
</div>

I thought that if c.showWidget is false, then the c.myWidget data would disappear from memory.

But it doesn't.

Rather, when I show the widget again it will load with the old data. Investigating further I see that on run #1 it runs the server script first, but on run #2 and more it starts with client script, then runs the server script. This causes me to work with the old data because the data isn't fresh from the server until after it has been presented.

This is how I call the widget:

c.showAbsChk = true;
spUtil.get('rcn-boden-modal-abs-chk', { "obj": { "type": "MY_TYPE", "sysId": aSysId } }).then(function(response) {
   c.myWidget = response;
});

Any ideas on how I can fix this?

[drberg · Accepted solution]

I found this here:

Note: As of all versions of Helsinki, any options passed into this function will only be available in the embedded widget's server script on the first execution of that script. Any subsequent calls into the server script from the embedded widget will not contain the object properties passed in. This is something we are investigating for a future version of Helisinki or Istanbul.

It seems to be the answer on why it's behaving the way it is.

I have found an ugly work around for this that seems to work for me:

The widget has three layers: widget 1 starts widget 2, widget 2 starts widget 3.

The workaround was emitting a message to w1 to toggle w2 off and on again. This seems to recreate w3 correctly.

It's ugly, but it seems to work for the moment.

Does anyone know of a more elegant workaround?

[Brian Dailey1]

Hi Magnus,

Rather than creating multiple layers to recreate your widget just to maintain the instance options, I would just iterate them into the scope of your widget to give them persistence.

(e.g.)

...Client Side:

for(var m in c.options){

        c.data.initialOptions[m] = c.options[m];

}

...or Server Side:

for(var m in options){

        data.initialOptions[m] = options[m];

}

And include a check to only do this the first time (e.g., only so long as initialOptions is not already defined/or c.options is defined).   But it does kind of boggle the mind as to why the instance options wouldn't persist on their own.

Thanks,

-Brian

[brian_]

I've worked around this issue by putting the widget inside of a div with an ng-if condition. When the ng-if condition evaluates to false, the widget is hidden and its context is destroyed.

ng-show and ng-hide do not properly destroy the widget upon not showing. Only ng-if

HTML

<div ng-if="c.showWidget == true">
  <sp-widget widget="c.myWidget"><sp-widget>
</div>

Client Controller

function(spUtil) {
	var c = this;

	//default to hiding the widget
	c.showWidget = false;

	getWidget: function() {
		//this is however you define your widget.
		//be it a user-triggered event or a watch on element
		//just an exmaple here to show what to do after getting your widget
		//
		//my exmaple shows with spUtil getting it client side
		//you could do a server callback to get it
		//but that's more effort and i'm being lazy



		//first set the ng-if condition to hide the widget
		//therefore destroying it
		c.showWidget = false;


		//get the search widget, and pass the search phrase to it
		spUtil.get('my-widget-id', {
			optionalInputParameter : value
		}).then(function(response) {
			//repsonse is the widget we got
			c.myWidget = response;
			
			//now set ng-if to true to show widget
			c.showWidget = true;
		})
	}
}

[SusmitoB]

This helped. Thanks!