How to add columns fields in list - Service Portal

[chanikya]

Hi EveryOnce,

How to add columns fields in list.

i want to add columns , i just edited server side script and as well added table namd, fields under Mobile view .

but here details are showing something like this , i don't want to display this way.

i want to see columns like below screenshot

Server side script:

HTML scriptL

<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 = !myreq.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 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>

Server script:

(function() {
if (!options.maximum_entries)
options.maximum_entries = 20;
var gr = new GlideRecordSecure('sc_request'); // does ACL checking for us
gr.addActiveQuery();
options.title = options.title || gr.getPlural();
data.display_field = 'sys_created_on';
data.secondary_fields = ['number','sys_updated_on','request_state' ,'opened_at','requested_for','price'];
data.filterMsg = gs.getMessage("Filter...");

gr.addEncodedQuery('requested_for=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 ritm = new GlideRecord("sc_req_item");
ritm.addQuery("request", gr.getUniqueValue());
ritm.query();
if (ritm.getRowCount() == 0)
continue;

if (ritm.getRowCount() > 1)
record.display_field = gs.getMessage("{0} requested items", ritm.getRowCount());
else {
ritm.next();
record.display_field = ritm.cat_item.getDisplayValue() || ritm.getDisplayValue("short_description");
}

record.secondary_fields = [];
data.secondary_fields.forEach(function(f) {
record.secondary_fields.push(getField(gr, f));
});

record.url = {id: 'sc_request', table: 'sc_request', 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;
}

})()

[Harsh Vardhan · Accepted solution]

create one custom page,then you need to create widget here,add that widget on that page,once you will add that then go to the main manu ( sp header menu) 

once you will open the sp header main menu then you need to scroll down and you will see the menu items related list here you will find "Requests" open that you will find the scripts , at the bottom of the script you will see the below line

var link = {title: gs.getMessage('View all requests'), type: 'link', href: '?id=<your new page id which you had created on first step>', items: []};

or you can create custom widget to display the list of incidents and request raised by logged in user then you can call that on your custom page that way it will also work.