To create widget New - My Incident like My request widget on Service Portal

[Munender Singh]

Hi Folks,

There has been the requirements of most of the clients to get a widget like 'My Request' on the Service Portal for other tables like Incidents.I am aware we can use 'My List' and update the instance options to display any of the table records but,as a fair practise and for my own development experience I did it as I have seen many users trying to achieve it.

Here is the code for the Widget 'My Incidents':

HTML

<div class="panel panel-{{c.options.color}} b" ng-if="c.always_show ||c.data.list.length">
<div class="panel-heading" >
<h4 class="panel-title">{{c.options.title}}</h4>
<i class="fa fa-filter" aria-hidden="true" tabindex="0" ng-click="c.showFilter = !myinc.showFilter;" title="Show filters for {{c.options.title}}"></i>
<div ng-show="c.showFilter">
<input ng-model="c.filterText" sn-focus="c.showFilter" style="color: grey; width: 100%; margin-top: .5em;" placeholder="{{data.filterMsg}}">
</div>
</div>

<div ng-if="c.data.list.length == ''">
<div class="list-group-item">No incidents were raised</div>
</div>

<div class="list-group" style="max-height: none; overflow-y: auto;">
<div class="list-group-item" ng-repeat="item in c.data.list | filter:c.filterText" >
<a ng-click="c.onClick($event, item, item.url, {})" href="javascript:void(0)">
<div ng-class="{'l-h-40': !item.secondary_fields.length}">{{item.display_field}}</div>
<small class="text-muted" ng-repeat="f in item.secondary_fields">
<span ng-if="!$first"> • </span>
<span ng-switch="f.type" title="{{::f.label}}">
<span ng-switch-when="glide_date"><sn-time-ago timestamp="::f.value" /></span>
<span ng-switch-when="glide_date_time"><sn-time-ago timestamp="::f.value" /></span>
<span ng-switch-default="">{{f.display_value}}</span>
</span>
</small>
</a>
</div>
</div>
<div class="panel-footer" ng-if="c.options.maximum_entries && c.data.count > c.options.maximum_entries">
<h4 class="panel-title">${First {{c.options.maximum_entries}} of {{c.data.count}} shown}</h4>
</div>
</div>

CSS:

.panel-heading {
position: relative;
> .fa-filter {
position: absolute;
top: 1rem;
right: 1rem;
}
}

.list-group-item > a {
display: inline-block;
}

Client Side:

function ($location, $rootScope) {
var c = this;
this.filterText = "";
this.showFilter = false;
this.always_show=true;

this.onClick = function($event, item, url, action) {
$event.stopPropagation();
$event.preventDefault();
if (url)
$location.search(url);
else {
var evt = {};
evt.url = url;
evt.table = c.data.table;
evt.sys_id = item.sys_id;
evt.record = item;
evt.rectangle_id = c.data.sys_id;
evt.action = action;
// put out the selection with simple list "sl_" prefix
$location.search('sl_sys_id', evt.sys_id);
$location.search('sl_table', evt.table);
$location.search('spa', 1); // spa means "I've got this"
$rootScope.$broadcast('$sp.list.click', evt);
}
};
}

Server Side:

(function() {

if (!options.maximum_entries)

options.maximum_entries = 20;

var gr = new GlideRecordSecure('incident'); // does ACL checking for us

gr.addActiveQuery();

options.title = options.title || gr.getPlural();

data.display_field = 'short_description';

data.secondary_fields = ['number','sys_updated_on'];

data.filterMsg = gs.getMessage("Filter...");

gr.addEncodedQuery('caller_id=javascript:gs.getUserID()');

gr.orderByDesc('sys_created_on');

gr.query();

data.count = gr.getRowCount();

data.list = [];

var recordIdx = 0;

while (gr.next()) {

if (recordIdx == options.maximum_entries)

break;

var record = {};

record.sys_id = gr.getValue('sys_id');

var inc = new GlideRecord("incident");

inc.addQuery("sys_id", gr.getUniqueValue());

inc.query();

inc.next();

record.display_field = inc.getDisplayValue("short_description");

record.secondary_fields = [];

data.secondary_fields.forEach(function(f) {

record.secondary_fields.push(getField(gr, f));

});

record.url = {id: 'ticket', table: 'incident', sys_id: record.sys_id};

data.list.push(record);

recordIdx++;

}

function getField(gr, name) {

var f = {};

f.display_value = gr.getDisplayValue(name);

f.value = gr.getValue(name);

var ge = gr.getElement(name);

f.type = ge.getED().getInternalType()

f.label = ge.getLabel();

return f;

}

})()

Kindly share your thoughts on it if something looks inappropriate or not working.

Regards,

Munender Singh

Sr.Consultant Service-Now

[Adam Cartrette]

Hello,

I am also tasked with doing the same thing of using a My Requests widget for My Requested Items. Were you able to get it to work?