Customize Service Portal Header Menu for Approvals

jasonthorngren · ‎04-30-2019

I have an approval menu in the head of my service portal. Since we only do knowledge article approvals users have request that I show the author in this menu along with aritlcle number and short description (see attached).

However, I do know that these approvals come from sys_approval table and the author data lives on kb_knowledge table. As well as the script behind the menu is stored in a menu item called approvals and has the following server script:

// only show 30 in header menu dropdown
var max = 30;

var t = data;
t.items = [];
t.count = 0;

var u = getMyApprovals();

// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'sysapproval_approver','filter':'approverIN' + u.toString() + '^state=requested'});

var z = new GlideRecord('sysapproval_approver');
z.addQuery("approver", u);
z.addQuery("state", "requested");
z.orderByDesc('sys_updated_on');
z.setLimit(max);
z.query();

var link = {};
link.title = gs.getMessage('View all approvals');
link.type = 'link';
link.href = '?id=approvals';
link.items = [];
t.items.push(link);

while (z.next()) {
var a = {};
var rec = getRecordBeingApproved(z);
if (!rec.isValidRecord()) // nothing being approved - hmmm
continue;

a.short_description = rec.short_description + "";
if (rec.getRecordClassName() == "sc_request") {
var items = new GlideRecord("sc_req_item");
items.addQuery("request", rec.getUniqueValue());
items.query();
if (items.getRowCount() > 1)
a.short_description = items.getRowCount() + " requested items";
else if (items.getRowCount() == 1) {
items.next();
a.short_description = items.getValue("short_description");
}
}
$sp.getRecordValues(a, z, 'sys_id,sys_updated_on');
a.number = rec.getDisplayValue();
a.__table = z.getRecordClassName();
a.type = 'approval';
t.items.push(a);
t.count++;
}

function getRecordBeingApproved(gr) {
if (!gr.sysapproval.nil())
return gr.sysapproval.getRefRecord();

return gr.document_id.getRefRecord();
}

My theory is that I could place another GlideRecord call in this script to kb_knowledge and get the other based off the approvals document_id. I am just not sure exactly how to pus the data into the menu. From the code it looks like we use the array define as a = {}; Can I just add another field a.author? I am looking for some additional direction on how I might complete this customization. Any help would be appreciated! Thanks in advanced!!

Alikutty A · ‎04-30-2019

Hello,

Please follow these steps and you will be able to achieve this requirement.

1) On the scripted list, add the following line, place it as shown in the image above $sp.getRecordValues():

if(rec.getRecordClassName() == "kb_knowledge"){
  a.author = rec.author.getDisplayValue();
}

2) Open the dropdown angular template 'spDropdownTreeTemplate'

Here is its OOB URL, Replace your instance name in it: https://instance_name.service-now.com/nav_to.do?uri=sp_ng_template.do?sys_id=492127b05b301200e39fc7a...

Modify the HTML to insert the author field to the right side of short description. Replace the following lines starting with <a ng-if="mi.type == 'approval'"

The following line is introduced to modify its display HTML: <span ng-if="mi.author" style="float: right" >{{::mi.author}}</span>

<a ng-if="mi.type == 'approval'" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.number}}"  ng-href="?id=approval&table={{::mi.__table}}&sys_id={{::mi.sys_id}}" ng-click="collapse()" role="menuitem">
  <span ng-if="mi.short_description">{{::mi.short_description | characters:60}}</span>
  <span ng-if="mi.author" style="float: right" >{{::mi.author}}</span>
  <span class="block color-primary text-muted">
    <span class="block" style="float: right" id="id_{{::mi.number}}">
      <sn-time-ago timestamp="::mi.sys_updated_on" />
    </span>
    {{::mi.number}}
  </span>
</a>

Once you make this change, all set!

Let me know once you set it up.

Thanks!

View solution in original post

Alikutty A · ‎04-30-2019