Service portal scripted list menu item - add color / design

[Eli Guttman]

Hi,

In service portal menu item of scripted list type - for example - show list of open incident for user - is there a way to change the color of certain items in the list or making it bold?

which attributes can be used in such scripted list

i can see we have title, type, href,short description - are there attribute that can affect how certain item in the list will look like.

I'm referring to this type of menu item

[Rishabh Jha · Accepted solution]

Hi @elig@mellanox 

Yes, it can be done, but it's a bit tricky. You'd need to make changes to the Angular ng-template "spDropdownTreeTemplate", which drives the HTML layout of the menu items list.

Assuming that this is for the default 'sp' portal, from the application navigator, navigate to "Service Portal --> Menus". In the instances with menu list, locate the "Header Menu" widget, with the title "SP Header menu".

Click on the Header Menu record, and go to the "Angular ng-templates" related list, and then open the "spDropdownTreeTemplate" template (refer screenshots below).

In there, you'd see different blocks, defined for each menu item type. You can add the custom styling to your menu item type, if it's there, or you can add your menu item type, with your desired style attribute values.

For example, in the code below, I've styled the "request" type item  (i.e. mi.type == 'request') such that, if the item description contains 'Apple', then it'd appear in bold and italics.

Please refer to the template code & screenshots below for reference:

<a ng-if="mi.type == 'link'" title="{{::mi.title}}" target="{{::mi.target}}" ng-href="{{::mi.href}}" ng-click="collapse()" role="menuitem">
  {{::mi.title | characters:60}}
</a>
<a ng-if="mi.type == 'record' && !mi.__page" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.unique_number}}" ng-href="?id=ticket&table={{::mi.__table}}&sys_id={{::mi.sys_id}}" ng-click="collapse()" role="menuitem">
  <span>{{::mi.short_description | characters:60}}</span>
  <span class="block color-primary text-muted">
    <span class="block" style="float: right" id="id_{{::mi.unique_number}}">
      <sn-time-ago timestamp="::mi.sys_updated_on" />
    </span>
    {{mi.number}}
  </span>
</a>
<a ng-if="mi.type == 'record' && mi.__page" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.unique_number}}"  ng-href="?id={{::mi.__page}}&table={{::mi.__table}}&sys_id={{::mi.sys_id}}" ng-click="collapse()" role="menuitem">
  <span>{{::mi.short_description | characters:60}}</span>
  <span class="block color-primary text-muted">
    <span class="block" style="float: right" id="id_{{::mi.unique_number}}">
      <sn-time-ago timestamp="::mi.sys_updated_on" />
    </span>
    {{::mi.number}}
  </span>
</a>
<a ng-if="mi.type == 'request'" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.unique_number}}"  ng-href="?id=sc_request&table={{::mi.__table}}&sys_id={{::mi.sys_id}}" ng-click="collapse()" role="menuitem">
  <span ng-if="mi.short_description.indexOf('Apple') != -1">
    <b><i><span>{{::mi.short_description | characters:60}}</span>
    <span class="block color-primary text-muted">
      <span class="block" style="float: right" id="id_{{::mi.unique_number}}">
        <sn-time-ago timestamp="::mi.sys_updated_on" />
      </span>
      {{::mi.number}}
      </span></i></b>
  </span>
  <span ng-if="mi.short_description.indexOf('Apple') == -1">
    <span>{{::mi.short_description | characters:60}}</span>
    <span class="block color-primary text-muted">
      <span class="block" style="float: right" id="id_{{::mi.unique_number}}">
        <sn-time-ago timestamp="::mi.sys_updated_on" />
      </span>
      {{::mi.number}}
    </span>
  </span>
</a>
<a ng-if="mi.type == 'approval'" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.unique_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 class="block color-primary text-muted">
    <span class="block" style="float: right" id="id_{{::mi.unique_number}}">
      <sn-time-ago timestamp="::mi.sys_updated_on" />
    </span>
    {{::mi.number}}
  </span>
</a>
<a ng-if="mi.type == 'menu' && mi.items.length" aria-label="{{::mi.title}}" ng-click="collapse()" class="menu_trigger right-caret" role="menuitem">
  {{::mi.title | characters:60}}
</a>
<sp-dropdown-tree ng-if="mi.type == 'menu' && mi.items.length" items="mi.items" />

Thanks & Regards,

Rishabh Jha

Aavenir (https://www.aavenir.com/)

[Eli Guttman]

thank you! i hoped it will be simpler but it looks like what i was looking for.

[SKum]

Hi,

Is it possible to set back ground color for "View All Requests" in the drop down?

Thanks