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:

'

',

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.