I’ve seen a number of posts in the community asking for a Service Portal widget that displays Service Catalog categories (or subcategories) in a card/tile-view. Below I’ve attached code for 3 versions of such a widget.
Version 1: Tile with category picture and category description
Works well to display categories for a particular catalog, or subcategories within a particular category.
URL parameters
- category_id - the sys_id of the parent category of the tiles you want to display. In the example above, it would be the sys_id of the “Hardware” category. Takes precedence.
Example:https://[instance].service-now.com/sp?id=[page_id]&category_id=[category_sys_id]
- sys_id - the sys_id of the catalog that you want to to display, want to display a catalog other than the default catalog for your portal. category_id takes precendence and will be honored if you provide both category_id and sys_id. That is, provided sys_id will be ignored if category_id is present.
Example:https://[instance].service-now.com/sp?id=[page_id]&sys_id=[catalog_sys_id]
- If you exclude both parameters, then the widget will display the top/root level categories for the default catalog configured for your Service Portal.
Example:https://[instance].service-now.com/sp?id=[page_id]
Instance configuration option(s):
- Link Target Page: Specify the page id that is linked when you click on a tile or click “View Details
Version 2: Category tiles with subcategories as linked list items
Works well for top/root level categories (instead of the sidebar list) where there is a consistent structure maintained (eg. each category has at least one subcategory) and not too many subcategories with title that are too long.
If you have a category without any subcategories, you may end up with something like the above there “Can We Help You?” has no subcategories to present in the tile.
If you have too many subcategories or too many that have long titles (that wrap), the tile may cut off the remainder of the list that do not fit within the tile. (See options for dealing with the overflow in version 3, below).
URL parameters
- sys_id - the sys_id of the catalog that you want to to display, want to display a catalog other than the default catalog for your portal. category_id takes precendence and will be honored if you provide both category_id and sys_id. That is, provided sys_id will be ignored if category_id is present.
Example:https://[instance].service-now.com/sp?id=[page_id]&sys_id=[catalog_sys_id]
- If you exclude the sys_id parameter, then the widget will display the top/root level categories for the default catalog configured for your Service Portal.
Example:https://[instance].service-now.com/sp?id=[page_id]
Note that you can only specify the catalog for this widget. If you need to drill down further to specify a category id, look at the code for one of the other widgets (version 1 or 3) for example on how to modify this widget.
Instance configuration options(s):
- Category Target Page: Specify the page id that is linked when you click on “View Details” link for a particular category.
- Subcategory Target Page: Specify the page id that is linked when you click on a subcategory (one of the bullets in the list).
Version 3: Category tiles with Catalog Items as linked list items
Works well if you don’t have lots of catalog items per category, otherwise the list of items gets cut off to just those that fit within the tile and it may not be apparent that there is more in the list than is presented.
To make the tile scroll (for long lists of items), cChange the CSS rule in the.overflow-200class from:overflow: hidden;
Tooverflow: auto;
URL parameters (same as version 1 - see above).
Instance configuration options(s):
- SC Category Page: Specify the page id that is linked when you click on “View Details” link for a particular category.
- SC Catalog Item Page: Specify the page id that is linked when you click on a catalog item (one of the bullets in the list).
Disclaimer : For the most part, my code uses regular GlideRecord queries as I haven’t had the time to update the code to use the sn_sc namespace API . I am providing the widgets as is for now in hopes that the above widgets will still be helpful to some people.
Update - Tokyo release version
The above information and attached XMLs were based on an older release of ServiceNow. Some commenters have asked for an updated version so I created a widget based on out-of-box code from the Tokyo release. You can find the updated version now on https://github.com/niamccash/servicenow-serviceportal-widgets with updated information, issue logs, etc.
If you found this helpful, please don't forget to mark it as such 👍
