Service Portal Header Menu: always show My Tickets, but hide My Surveys unless >0

JP-ODU
Tera Guru

We were using the out of the box Service Portal>Widgets>Header Menu, which has two menu items: My Tickets and My Surveys and hides them unless >0. I was asked to always show My Tickets.

To do so, I did the following:

1. Go to Service Portal>Widgets>Header Menu
2. Clone Header Menu, name "Header Menu always show My Tickets"
3. Change the client controller script at line 41 to: 

if (item.items || (item.scriptedItems && item.scriptedItems.count >= 0))

4. Go to sp_ng_template.list and change the Widget for menuTemplate, item-added-tooltip.html, and spDropdownTreeTemplate to "Header Menu always show My Tickets"

5. Update the code of menuTemplate to: 

	<a role="menuitem" ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{::item.href}}" ng-click="collapse()" target="{{::item.url_target}}" title="{{::item.hint}}">
	  <fa ng-if="::item.glyph" name="{{::item.glyph}}"></fa>
	  <span ng-bind-html="::item.label"></span>
	</a>
	<a role="menuitem" aria-haspopup="true"  ng-if="item.items.length > 0" href class="dropdown-toggle sp-menu-has-items" data-toggle="dropdown" aria-controls="{{::item.label.split(' ').join('')}}" aria-haspopup="true" title="{{::item.hint}}">
	  <fa ng-if="::item.glyph" name="{{::item.glyph}}"></fa>
	  <span ng-bind-html="::item.label"></span> <span class="caret"></span>
	</a>
	<ul ng-if="item.items.length > 0" class="dropdown-menu" role="group" id="{{::item.label.split(' ').join('')}}">
	  <li ng-repeat="item in item.items" ng-include="'menuTemplate'" />
	</ul>
	<a role="menuitem" aria-haspopup="true" ng-if="item.scriptedItems.count >= 0" href data-toggle="dropdown" aria-label="{{::item.label}} : {{item.scriptedItems.count}}" title="{{::item.hint}}">
	  <fa ng-if="::item.glyph" name="{{::item.glyph}}"></fa>
	  <span ng-bind-html="::item.label"></span>
	  <span ng-if="::!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
	</a>
<sp-dropdown-tree role="menu" aria-label="{{::item.label}}" ng-if="item.scriptedItems.count >= 0" items="item.scriptedItems.items" />

6. Go to Service Portal>Menus and open the Instance with Menu record titled "SP Header Menu" and set the widget as "Header Menu always show My Tickets"

Challenge: this means that My Tickets and My Surveys *both* always show up and I've been told that we really want to always see My Tickets, but only see My Surveys if >0... anyone know how I can update the above scripting to split the two? It seems to me that I need to call something other than item.scriptedItems? Or perhaps change a list that refers to somewhere?

1 ACCEPTED SOLUTION

@JP-ODU 

Hi,

You may try below.

 

1.Navigate to Service Portal --> Portals and open your service portal record where you are displaying the menu.

2. Click on information icon placed next to "Main Menu" and click on "Open Record" button.

find_real_file.png

3. Now, scroll down to the related list "Menu Items", click on "New" button

Label: Incident List

Type: Scripted List

Condition: gs.isLoggedIn()

Server Script:

// maximum number of entries in this Menu
var max = 10;

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

var u = gs.getUser().getID();

// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'incident','filter':'active=true^caller_id=' + u});

var z = new GlideRecord('incident');
z.addActiveQuery();
z.addQuery('caller_id', gs.getUserID()).addOrCondition('opened_by',gs.getUserID());
z.orderByDesc('sys_updated_on');
z.setLimit(max);
z.query();
while (z.next()) {
  var a = {};
  $sp.getRecordValues(a, z, 'short_description,sys_id,number,sys_updated_on');
  if (z.short_description.nil())
    a.short_description = "(No description)";
  a.__table = z.getTableName();
  a.type = 'record';
  a.sortOrder = z.sys_updated_on.getGlideObject().getNumericValue();
  t.items.push(a);
}
var incCount = 0;
var incRec = new GlideAggregate('incident');
incRec.addQuery('caller_id', gs.getUserID()).addOrCondition('opened_by',gs.getUserID());
incRec.addActiveQuery();
incRec.addAggregate('COUNT');
incRec.query();
if(incRec.next())
{
incCount = incRec.getAggregate('COUNT');
}

t.items.sort(function(a, b) {
  return b.sortOrder - a.sortOrder;
});
t.items = t.items.slice(0, max); // only want first 30
t.count = incCount;
if(incCount == 0)
{
t.count = 'O';
}

var link = {title: gs.getMessage('View All Reported Issues'), type: 'link', href: '?id=list&table=incident', items: []};
t.items.unshift(link); 

4. Submit or Save the record

View solution in original post

16 REPLIES 16

For posterity: the issue with doubled menu items was caused by my changes on the menuTemplate angular ng-template for the Menu Header making "count != 0" rather than "count > 0" as the original OOTB script was. With count > 0, the duplicate menu items don't appear

I'm glad that it worked for you and you may revert all your changes you made to header widget 

A few more updates on this... 

1. I was asked to make sure it was MyTickets menu item, incorporating sc_task and service_tasks, so I updated the menu item script as follows:

// maximum number of entries in this Menu
var max = 10;
var t = data; 
t.items = [];
var u = gs.getUser().getID();
// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'service_task','filter':'active=true^opened_by=' + u});
t.record_watchers.push({'table':'incident','filter':'active=true^caller_id=' + u});
t.record_watchers.push({'table':'sc_request','filter':'active=true^requested_for=' + u});

var st = new GlideRecord('service_task');
if (st.isValid()) {
  st.addActiveQuery();
  st.addQuery('opened_by', gs.getUserID());
  st.orderByDesc('sys_updated_on');
  st.setLimit(max);
  st.query();
  while (st.next()) {
    var a = {};
    $sp.getRecordValues(a, st, 'short_description,sys_id,number,sys_updated_on');
    if (st.short_description.nil())
      a.short_description = "(No description)";
    a.__table = st.getTableName();
    a.type = 'record';
    a.sortOrder = st.sys_updated_on.getGlideObject().getNumericValue();
    t.items.push(a);
  }
}

var z = new GlideRecord('incident');
z.addActiveQuery();
z.addQuery('caller_id', gs.getUserID()).addOrCondition('opened_by',gs.getUserID());
z.orderByDesc('sys_updated_on');
z.setLimit(max);
z.query();
while (z.next()) {
  var a = {};
  $sp.getRecordValues(a, z, 'short_description,sys_id,number,sys_updated_on');
  if (z.short_description.nil())
    a.short_description = "(No description)";
  a.__table = z.getTableName();
  a.type = 'record';
  a.sortOrder = z.sys_updated_on.getGlideObject().getNumericValue();
  t.items.push(a);
}

var z = new GlideRecord('sc_request');
z.addActiveQuery();
z.addQuery('requested_for', gs.getUserID());
z.orderByDesc('sys_updated_on');
z.setLimit(max);
z.query();
while (z.next()) {
  var ritm = new GlideRecord('sc_req_item');
  ritm.addQuery('request', z.getUniqueValue());
  ritm.query();
  if (!ritm.next())
    continue;

  var a = {};
  $sp.getRecordValues(a, z, 'sys_id,number,sys_updated_on');
  if (ritm.hasNext())
    a.short_description = ritm.getRowCount() + ' requested items';
  else
    a.short_description = ritm.cat_item.getDisplayValue() || ritm.getDisplayValue("short_description");
  a.__table = z.getTableName();
  a.type = 'request';
  a.sortOrder = z.sys_updated_on.getGlideObject().getNumericValue();
  t.items.push(a);
}

var count = 0;
var Rec = new GlideAggregate('requests');
Rec.addQuery('caller_id', gs.getUserID()).addOrCondition('opened_by',gs.getUserID());
Rec.addActiveQuery();
Rec.addAggregate('COUNT');
Rec.query();
if(Rec.next())
{
Count = Rec.getAggregate('COUNT');
}

t.items.sort(function(a, b) {
  return b.sortOrder - a.sortOrder;
});
t.items = t.items.slice(0, max); // only want first 30
t.count = Count;
if(Count == 0)
{
t.count = 'O';
}
var link = {title: gs.getMessage('View All Tickets'), type: 'link', href: '?id=requests', items: []};
t.items.unshift(link); 

2. The doubled menu items caused by putting "!=" or ">=0" in the menuTemplate angular ng-template required me to move back to >0, but this then invalidated the entire effort to set the count at the letter O... the solution to that is to remove the last two ".count > 0" bits from the menuTemplate script, entirely. Just trim out the quoted text, do not replace with anything

find_real_file.png

oshina1
Kilo Contributor

it is showing error in Glideaggregate(requests) such as table requests not found like that..please help me

Hi @oshina 

If you are still having the problem then please elaborate more on the issue and provide screenshots if possible