Pass data from Server Side to Client Side to HTML in ServicePortal Widget

[anirban300]

Hi Everyone,

I am new to Service Portal I have created a widget but it's not working.Below are the codes.Nothing is visible in the widget.Can anyone tell me why?

Property Value:

Portal=www.xyz.com; 

HTML:

<div class="panel panel-{{::options.color}} b">
<div class="panel-heading">
<h4 class="panel-title">${Switch Portal}</h4>
</div>

<div class="list-group">
<div class="Switch Portal">
<a href="a.LinkPeople" target="_blank">{{::a.LabelPeople}}</a>
</div></div>

SERVER SCRIPT:

var arr = gs.getProperty("portal.label_and_links");
var people = arr.split("=",2);
var peopleLabel = people[0];
var peopleLink = people[1];
var t = [];
var a = {};
a.LabelPeople = peopleLabel;
a.LinkPeople = peopleLink;
t.push(a);

CLIENT CONTROLLER:

function() {
/* widget controller */
var c = this;
}

[psphanindrakuma]

Hi anirban300,

The widget should be written in AngularJs to show data on the portal.

Put t into a data object. and you can access in client script.

Example widget

HTML:

<div>
<table>
<pre> sort by = {{orderField}}</pre>
<tr>
<th><button ng-click="changeSort('NUMBER')">Number</button></th>
<th><button ng-click="changeSort('SHORT DESCRIPTION')">Short Description</button></th>
<th><button ng-click="changeSort('PRIOPRTY')">Priority</button></th>
<th><button ng-click="changeSort('CREATED')">Created</button></th>
<th><button ng-click="changeSort('CATEGORY')">Category</button></th>
</tr>
<tr ng-repeat="incident in data.incidents">
<td>{{incident.number}}</td>
<td>{{incident.short_description}}</td>
<td>{{incident.priority}}</td>
<td>{{incident.sys_created_on}}</td>
<td>{{incident.category}}</td>
</tr>
</table>
</div>

SERVER SCRIPT:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.incidents = [];

/*var gr = new GlideRecord('incident');
//gr.addQuery('active',true);
gr.setLimit(10);
//gr.orderBy('sys_created_on');
gr.query();
while(gr.next()){

var incident = {};
incident.number = gr.getDisplayValue('number');
incident.short_description = gr.getDisplayValue('short_description');
incident.priority = gr.getDisplayValue('priority');
incident.sys_created_on = gr.getDisplayValue('sys_created_on');
incident.category = gr.getDisplayValue('category')
data.incidents.push(incident);
}*/

var gr = new GlideRecord('sys_user');
//gr.addQuery('active',true);
gr.setLimit(10);
//gr.orderBy('sys_created_on');
gr.query();
while(gr.next()){

var incident = {};
incident.number = gr.getDisplayValue('user_name');
incident.short_description = gr.getDisplayValue('first_name');
incident.priority = gr.getDisplayValue('last_name');
incident.sys_created_on = gr.getDisplayValue('sys_created_on');
//incident.category = gr.getDisplayValue('category')
data.incidents.push(incident);


})();

CLIENT CONTROLLER:

function($scope) {
/* widget controller */
var c = this;
$scope.orderField = "number";

$scope.changeSort = function(field){
$scope.orderField = field;
}
}

mark correct if it helps. 

[anirban300]

Hi Kumar ,

Thank you for your reply. I have done what you said but it is throwing error when clicked.

[psphanindrakuma]

can you show the codes(HTML,client script, and server script)?

[psphanindrakuma]

Did it work?