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 🙂

[Arti Kumar]

My requirement is to have an interactive bar chart in the service portal. I already have a custom widget with a bar chart. I am trying for when the bars are clicked, it opens up an embedded simple-list-widget with the custom filter.

For example: The bar chart displays all incidents state-wise. So clicking on a bar gives all incidents in that particular state. So was trying to call the widget inside the on-click function from the client side.

Appreciate your help

[ChrisBurks]

This is still possible by embedding the simple-list widget in a custom widget server-side so that you can push the options in supplied by your widget with the bar chart.

Follow these steps.

Custom Widget:

Widget ID: simple-list-wrapper

HTML:

<div>
  <sp-widget widget="data.simplelist"></sp-widget>
</div>

Server script

(function() {
    if (input) {
        //input will take the place of options; being supplied by spUtil call
	 data.simplelist = $sp.getWidget('widget-simple-list', input)
    }
	
})();

Client controller

Empty

This is my widget with the pretend bar chart calling the simple-list wrapper widget

HTML

<div>
  <div class="m-b" style="display:flex; align-items:flex-end">
    <div class="bg-primary wrapper" style="height:75px;display:grid;align-content:center" ng-click="c.openCool('incident','active=true','All Active')">
      All Active
    </div>
    <div class="bg-danger wrapper" style="height: 25px;display:grid;align-content:center" ng-click="c.openCool('incident','active=false','All Closed')">
      All Closed
    </div>
  </div>
  <div ng-repeat="wid in c.wid">
    <sp-widget widget="wid"></sp-widget>
  </div>
</div>

Server Script

Empty

Client controller

api.controller=function($scope,spUtil) {

	var c = this;

	c.wid = [];
	c.openCool = function(table,filter,title){
		c.wid.pop()
		spUtil.get('simple-list-wrapper',{
			table:table,
			filter:filter,
			title:title,
			maximum_entries:5,
			secondary_fields: 'short_description,state',
			hide_footer:true}).then(function(resp){

			c.wid.push(resp)

		})
	}

};

The rendered output clicking on each bar.

[Arti Kumar]

This has helped me a great deal. Appreciate the help Chris!

[Arti Kumar]

Any idea how I can use this option (from instance options) when I am calling 'simple-list-widget' as an embedded widget? Need to link the tickets in the link to the underlying ticket. Thanks!

[ChrisBurks]

Yes. To find out the what the option name is, navigate to the Simple List widget in the native platform UI and scroll down to the field named "Fields" or the Option Schema. In this case it's the "Fields" field and the name is sp_page.

Now update the script with sp_page and supply the sys_id of the page :

api.controller=function($scope,spUtil) {

	var c = this;

	c.wid = [];
	c.openCool = function(table,filter,title){
		c.wid.pop()
		spUtil.get('simple-list-wrapper',{
			table:table,
			filter:filter,
			title:title,
			maximum_entries:5,
			secondary_fields: 'short_description,state',
            sp_page: '84af292247132100ba13a5554ee4909e', //this is the sys_id of the ticket page
			hide_footer:true}).then(function(resp){

			c.wid.push(resp)

		})
	}

};

 Of course you can make that a variable if you need it to navigate to a different page depending upon the record. But if you think it will always or should always point to the ticket page then just supply the sys_id.