I wanted to share a few ways that you can modify the out-of-box (OOB) the Service Catalog category list (Widget name: SC Categories, ID: this widget has no ID defined OOB). This widget typically acts like a menu and sits on the left hand side of your Service Catalog pages. The following applies to Istanbul version.
For each of the following modifications, you will need to first clone the OOB 'SC Categories' widget and make changes to the clone.
Expanding a Category to Show Subcategories (Child Categories)
Version 1: When a user clicks on a parent category (that has subategories), you want the category to automatically expand to show the subcategories when the user is directed to the category page that he/she has selected.
In the server script of the cloned widget, add the following code:
if (cat.sys_id == $sp.getParameter("sys_id")) {
cat.showSubcategories = true;
var childCategoriesGR = buildSubcategoryGR(cat.sys_id);
cat.subcategories = retrieveCategoriesFromGR(childCategoriesGR);
}
Below is a screenshot on where to add the above code:
Version 2: When a user clicks on a parent category (that has subcategories), you want the category to expand and not navigate away from the current page. You may want this if you have zero items in your top level category - to avoid having users land on an empty or broken page. This also helps if you find the folder icon to be too small to click on and want a more user friendly option.
Step 1: Open the widget in the ServiceNow platform (not the widget editor) and find the Angular Provider that is associated with the widget and open it:
Step 2:
- Update the name of the directive.
- Update the name of the function in the directive.
- Remember to do an Insert and Stay, to make a copy of the original directive.
- Update the 'template' section of the directive code with the following:
'<div ng-class="{\'indent-category\': indentCategory}">' +
// Not a parent category; has NO sub/child categories
'<a class="list-group-item" ng-class="{selected: category.selected}" href="?id={{page}}&sys_id={{::category.sys_id}}" ng-if="!category.isParentCategory">' + '<span ng-if="!omitBadges" class="label label-as-badge label-primary">{{::category.count}}</span>' +
'<i class="fa fa-fw text-muted" ng-class="{\'fa-folder\': !category.showSubcategories, \'fa-folder-open\': category.showSubcategories}" ng-if="category.isParentCategory" ng-click="toggleShowSubcategories($event)"></i>{{::category.title}}' +
'</a>' +
// Yes a parent category that HAS sub/child categories
'<a class="list-group-item" ng-class="{selected: category.selected}" ng-if="category.isParentCategory" ng-click="toggleShowSubcategories($event)">' +
'<span ng-if="!omitBadges" class="label label-as-badge label-primary">{{::category.count}}</span>' +
'<i class="fa fa-fw text-muted" ng-class="{\'fa-folder\': !category.showSubcategories, \'fa-folder-open\': category.showSubcategories}" ng-if="category.isParentCategory" ng-click="toggleShowSubcategories($event)"></i>{{::category.title}}' +
'</a>' +
// Update the recurring template used to this template
'<sp-category-list-item-mod ng-if="category.showSubcategories" ng-repeat="subcategory in category.subcategories" category="subcategory" omit-badges="omitBadges" level="level + 1"></sp-category-list-item-mod>' +
'</div>',
Step 3: In the platform, update the angular provider used by your widget (see screenshot in Step 1), and update the HTML template of your widget to use the new directive that you created in Step 2.
Changing the Folder Icon
If you want to change the icon displayed in the list (example: use chevrons instead of the folder icon) like so:
Follow the steps for version 2 above, but instead of changing the template as stated above, you only need to update the icon specified in the angular directive template. Replace fa-folder and fa-folder-open with the icon styles of your choice
Hopefully the above also gives you a starting point for other customizations you may want to apply for the base SC Categories widget.
Disclaimer: the content above has been collated from various community posts that I have answered. I've posted here so that the answers are easier to find and to read.
I want it to look similar to this (this section under IT to IT Services):
Nia:
I'd like to take the chevrons that you created above (worked like a charm, thanks) and move them to the right of the category title similar to what they have done in docs.servicenow.com. Do you know how I can accomplish that?
Also, I want the Catgories and Subcategories to respect the order field so that I can order present them in something that is non alphabetical.
Appreciate your help.
The page id is the text name for the page that you want to direct the link to. It's the machine friendly name the SP page like the one highlighted below:
HI Nia:
I had asked the rest of the community but I did not get an answer. Hoping you might.
I have a requirement to add mouse over/hover hints to the categories in the SC Categories Widget. I was thinking that I could use the OOB column 'description' in the Catalog Item. It would have a similar behavior as the fields in the standard forms that that display the value in the 'hint' column. like this:
In the same vein, I also want to show the Title And Description at the top of the 'SC Category Page' widget, similar to below.
Thanks
Hi Nia,
I have changed the href to parent page id but still, it is not working please help.
I have created the new page to reflect only one parent category and their sub-category.
But clicking on the parent category(how can we help you), it is taking to old page itself, which i got to know to change in "Angular provider". I have changed the page to page id, but still, it is not working.
When i clicked on parent caterogy it is taking to old page not landing on the new page.
Thanks in advance,
Naveena
