Menu item (scripted list) should always appear in the header menu

[paulh1]

Hi everyone,

I have a menu item which is a scripted list. I would want the menu item to always appear in the header menu, even if the record count is zero (t.count) and the link "View my items" is available. It links to lists that also contains closed tickets, and I want the users always to able to view the lists. Does anyone have an idea?

Thanks in advance!

Paul Hoogenboom

[Stephen Sturde]

Hi Paul -

The trick to this is ensuring the t.count is always at least 1. Here is an OOB CSM approval menu script. Instead of leaving the default t.count = 0, I set it to t.count = 1 and the menu is always visible with the "View All Items" link. 

Let me know if that helps or not.

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

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

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


var z = new GlideRecord("sysapproval_approver");
z.addQuery("state", "requested");
z.addQuery("approver", u);
z.orderByDesc('sys_updated_on');
z.query();
while (z.next()) {
    var a = {};
    var rec = getRecordBeingApproved(z);
    a.short_description = rec.short_description + "";
    $sp.getRecordValues(a, z, 'sys_id,sys_updated_on');
    a.number = rec.getDisplayValue();
    a.__table = z.getRecordClassName();

    a.type = 'approval';
    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");
        }
    } else if (rec.getRecordClassName() == 'sn_customerservice_registration') {
        a.short_description = rec.getDisplayValue();
        a.number = rec.getDisplayValue("account");
        a.__page = 'csm_approval';
        a.type = 'record';
    }
    t.items.push(a);
    t.count++;
}

var link = {};
link.title = gs.getMessage('View all approvals');
link.type = 'link';
link.href = '?id=csm_approvals&table=sysapproval_approver&view=csp';
link.items = [];
t.items.unshift(link); // put this first

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

    return gr.document_id.getRefRecord();
}

[paulh1]

Hi Stephen, thank you for your response. I've tried this already myself. The problem is that you will always see a number, indicating there is an open ticked. 

[Stephen Sturde · Accepted solution]

Hi Paul,

Digging a bit deeper into this then, you'll need to update the angular template that populates the menu. The header menu widget is selected on the theme record that is selected on the portal record. This community entry takes a good look at how to update that template. While this question is helping someone add a badge with a count, you can see where to update so that you can force the scripted item to show even if count is 0.

Angular templates are in the 'sp_ng_template' table. There isn't a module for this in the application navigator OOB. The template name is 'menuTemplate'. If you're going to modify this, I would recommend making a copy of it and also cloning the header widget, then updating the copy of the header widget with reference to the new angular template in the HTML. Then associate the new header widget with your portal theme. 

Let me know how it goes.

[paulh1]

Hi Stephen,

I missed the part of the menuTemplate. I created a clone of the Menu Header widget and adjusted the Client controller script.

Replaced lines 41, 42:

if (item.items || (item.scriptedItems && item.scriptedItems.count != 0))
$scope.visibleItems.push(item);

with:

if (item.items || item.scriptedItems)
$scope.visibleItems.push(item);

and was convinced that this would work, but the cloned widget didn't have the angular ng-templates, so it looked really weird 🙂

Thank you for pointing that out to me!

Kind regards, Paul