Embedded SP Widget Options

[Alex240]

Dear community!

I have a question regarding Service Portal Widgets and their options. Actually, I'm not even sure (I guess so) whether it is possible to do what I'm trying to. Let me explain it with the code:

In a portal page, I've got a widget. The HTML is:

<div class="container">
  <h3>Resume</h3>
  <div class="timeline">
    <ng-container ng-repeat="elem in c.data.elements">
      <widget id="embedded_widget" options={{elem}}></widget>
    </ng-container>
  </div>
  <div class="btn">
      <i class="far fa-file-user"></i>
      <span>Home</span>
  </div>
</div>

...and the server script contains just the array of elements:

(function() {
	
data.elements = [
	{
		'title': 'title 1'
	},
	{
		'title': 'title 2'
	}
	];
})();

In the other hand, in my embedded widget, I'm just trying to display those "titles". Just highlight that I do not set anything in the Option Schema field and not sure what it does.

The html is

<div>
{{c.data.title}}
</div>

...and the server script

(function() {
  data.title = options.elem.title;
})();

When loading the page, system returns the following error message: `Server JavaScript error invalid property id`  but when I remove the `options` attribute (and of course in the embedded widget just print Hello World it does not displays any error message.

Any suggestion?

Thanks in advance 🙂

[ChrisBurks]

Hi Saroj,

When embedding a widget via spUtil the object passed acts as inputs instead of options. Unless the widget accommodates both inputs and options in the code it won't work.

The way around this is that the response gives you access to options thus you can pass them by simply modifying the response.

Here is your function modified:

function(spUtil){ 

spUtil.get('widget-cool-clock').then(function(response){  
    response.options.c_color = "orange";
    c.clientScriptWidget=response;
});

[Arti Kumar]

This works for cool-clock-widget. How can i adapt this to embedding a 'simple-list-widget' where the widget options are response.options.c_table='incident'

It successfully invokes the list widget but does not pick up options

[ChrisBurks]

Hi @Arti Kumar 

"c_color" is an actual property in the options object in the cool-clock-widget.

For the simple-list widget the property on the options object is just "table". There is no "c_" prefix. For example try the following:

response.options.table = 'incident'

[Arti Kumar]

Having in in the client-controller does not load the simple-list widget:

Client Controller:

spUtil.get('widget-simple-list').then(function(response){
response.options.table = 'incident';
c.clientScriptWidget=response;
console.log(c.clientScriptWidget)
});

HTML:

<sp-widget widget="c.clientScriptWidget"></sp-widget>

Do I need something in the server script for this to work?(console log does have the widget object for simple-list-widget)

[ChrisBurks]

That's how it should work according to the docs. Is there a reason for this list that you need it client side instead of server side?