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]

The options attribute on the widget directive is a directive also. You don't have to use the curly braces when assigning it the variable.  And the id attribute is looking for the value of the id field of the widget.

So if I wanted to use the data table widget and set the title in as a property with server side variable data.myoptions (data.myoptions = {title:'mytitle'}) the mark-up would look like this

<widget id="widget-data-table" options="data.myoptions"></widget>

In your case it would be

<widget id="embedded_widget" options='elem'></widget>

[Alex240]

Thanks for your answer 🙂

Unfortunately it is not working anyway. The issue is in the following piece of code

<ng-container ng-repeat="elem in c.data.elements">
  <widget id="embedded_widget" options="elem"></widget>
</ng-container>

It does not understand that "elem" within the options of the widget is the "elem" of the ng-repeat. But if I change the above code to

<ng-container ng-repeat="elem in c.data.elements">
  <p>{{elem.title}}
</ng-container>

... it does work as expected and displays the title.

Any other suggestion?

[ChrisBurks · Accepted solution]

If there is no specific reason to use the plain widget directive instead of spWidget you could do something like:

HTML

<div class="panel">
  <div ng-repeat="elem in c.data.elements">
  	<sp-widget widget="elem"></sp-widget>
  </div>
</div>

Server Script

var listOptions = [
     {
		"table":"sc_request",
		"display_field":"request",
		"filter":"request_state=requested^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
		"order_direction": "",
		"order_by": "sys_created_on",
		"sp_page":"nr_sc_request",
		"secondary_fields":"request_state,price",
		"maximum_entries": 2
     },
     {
		"table":"incident",
		"display_field":"number",
		"filter":"state=1^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
		"order_direction": "desc",
		"order_by": "sys_created_on",
		"sp_page":"nr_sc_request",
		"secondary_fields":"state,short_description",
		"maximum_entries": 3
    }]
	
data.elements = listOptions.map(function(optionList){
	return $sp.getWidget('widget-simple-list', optionList);
});

Results:

And the same thing should be able to be done (small tweak) with spUtil if it's required to be done client side.

[Saroj Patel]

How can we set embedded widget options via client script

HTML Templates

<div class="form-group">
<p>
Embedded widget via Client Script
</p>
<sp-widget widget="c.clientScriptWidget"></sp-widget>
</div>

Client Script

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

function(spUtil){ 

spUtil.get('widget-cool-clock',{c_color:"orange"}).then(function(response){  //not working
c.clientScriptWidget=response;
});