Service Catalog Categories as Cards/Tiles

[Nia McCash]

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;

To
overflow: 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 👍

[Chuck Tomasi]

Hi Nia, Love the URL highlighting, but it looks like the images are missing.

[Nia McCash]

Hi Chuck, 

I can see the images in my post.  I'm not sure how to fix this if you are unable to see them. Any suggestions?  Is it possible that this is another bug with the new community? 

EDIT: Unfortunately, I also cannot edit the post at this time because of the issue I reported here.

[Chuck Tomasi]

I see them now. Must have been something wonky with the machine I was using, the community, or the Internet yesterday while I was looking. Thanks for verifying. Great article BTW

[robinsamberg]

Hi,

I have a question for Nia (or anyone who may be able to help?)

First, thanks for these widgets.  Just what I was hoping to find.

My question:  I'm Using Version 1, how can I hide one category?  I am using this widget on my "Order Something" page, and I want to hide the "Can We Help You" category from appearing alongside all my purchasable items.

I've tried several code snippets found here on the community boards related to hiding categories, but so far unsuccessfully.  I'm not a coder, so I'm hopeful someone might be able to help me out. 

EDIT:  a colleague figured it out.  A line of code I had tried but needed double quotes rather than single.  addQuery('sys_id',"!=","sys id of category to hide")

[Vipin Murugesan]

Hi Nia,

Can you Attach the Screenshots ,

Now Image which you have attached seems to be broken!

It will be great if you attach the image!

[Nia McCash]

Screenshots/images above seem to still be broken for some people 😞 

So I'll attempt to reattach some of the images here:

Version 1

Version 2

Version 3

[kambleneeta20]

HI Nia,

Thanks for the Article .

I want to use Version 1 option ,I am confused how can I configure it in Service portal do I need to add widget " SC Category Tiles V1"

in-place of existing widget "SC Category Page" ?

Thanks & Regards,

[Moedeb]

The issue I have with these widgets is that my normal users don't appear to be able to access them. I can see everything as I am the Admin, my ITIL Users can also see everything using these widgets without issue, however my end users get "You do not have permission to see this catalog".

However using the normal widgets - 'SC Categories or Recent and Popular Items" they can see all categories and items.

Obviously in the Server Script there is checking for access, however it does not appear to be working for those who actually do have access normally.

Some ideas would certainly be very helpful as I think these widgets are great.

[Scott37]

When i added teh widget i was getting a permissions error.

"You do not have permission to see this catalog"

Im using my itil admin role so i dont know what it could possible be.

[Nia McCash]

Can you let me know which widget you're using and a sample URL that isn't working? Or steps to reproduce? I can try to troubleshoot as I find time.  

[Moedeb]

The page I'm using this on is the standard sp?id=sc_category page

I've tried all three of the widgets and get the same issue for each

• SC Category Tiles v1 - sp_widget_d04d92090f713d200bcb28fcce1050ee3.xml
• SC Category Tiles v2 - sp_widget_8f8360d70f5d7600bcb28fcce1050e4c.xml
• SC Category Tiles v3 - sp_widget_a033c208db1d8300f8723ade9d9619e6.xml

In my Dev instance I have the same issue that I have in production:

As Admin:

As a standard user:

[Pierre S]

Hi Nia,

Thank you for the article...this is a great widget! I am running into problems with the link handling and redirecting to order guides.  In the server script, it looks like it is missing the if conditions for order guides. When I look at the regular "SC Category Page" widget, it has this block of code to handle just that 

var item = {};
var gr = new GlideRecord('sc_cat_item');
gr.get(sc.sc_cat_item);
gr = GlideScriptRecordUtil.get(gr).getRealRecord();
$sp.getRecordDisplayValues(item, gr, 'name,short_description,picture,price,sys_id');
item.sys_class_name = sc.sc_cat_item.sys_class_name + "";
item.page = 'sc_cat_item';
if (item.sys_class_name == 'sc_cat_item_guide')
item.page = 'sc_cat_item_guide';

I tried inserting the bolded part of the code in the same general area of the code block but does not work. Any ideas? I'm not very good with code so I apologize in advanced. Thanks!

 EDIT: I found out how to achieve this!

The block:

var gr = new GlideRecord('sc_cat_item');
var grJoin = gr.addJoinQuery('sc_cat_item_category','sys_id','sc_cat_item','sys_class_name');
grJoin.addCondition('sc_category', cat.sys_id);
gr.addActiveQuery();
gr.query();

while (gr.next()) {
var catalogItem = {};
if (gr.sys_class_name == 'sc_cat_item_guide')
catalogItem.page = 'sc_cat_item_guide';
else catalogItem.page = options.sc_cat_item_page;
catalogItem.title = gr.getDisplayValue('name');
catalogItem.sys_id = gr.getValue('sys_id');
catalogItems[cat.sys_id].push(catalogItem);

I simply added the condition in bold and it works. I'm not sure if this is the most appropriate way to handle this but it works.

Thank you again Nia for the awesome widget!

[Nia McCash]

Hi Moedeb.  Unfortunately, I haven't been able to replicate your issue.  However, I'm not on London and Madrid versions.  Not sure what version you are running but I wonder if it may be version specific.

[Moedeb]

We are using Kingston, however upgrading to London in the next few weeks, so maybe London will make a difference?

[Joshua DeSouza1]

Nia - Thank you so much this was exactly what I was looking for!!! Made some small modifications to get this to work for our design but it was an absolute time saver!!! Much appreciated!

[josh_the_tech]

Nia, thanks for this! It's saved us a lot of work. One thing we're trying to do is order our categories by the Order field rather than alphabetically. I'd have thought changing the 

cat.orderBy('title');

to

cat.orderBy('order');

in the server script would re-order them based on the order field.

Could you or someone in the comments point me in the right direction to make it show in the order specified by the Order field? We are using V1 and only have 1 catalog so not parsing any sys_id or catalog_id information in the URL.

[Joshua DeSouza1]

Hi Josh - 

I updated Nia's script to the following: 

var items = data.items = [];
var cat = new GlideRecord('sc_category');
if (data.category_id) {
cat.addQuery('parent',data.category_id);
}
else {
cat.addQuery('sc_catalog',data.catalog_id)
cat.addEncodedQuery('parentISEMPTY');
}
cat.addQuery('active','true');
cat.orderBy('order');
cat.query();

and it works for me so you're change to the script should have worked - make sure your sc_category records are updated to the correct ordering. 

[Ryan M]

I ran into this same issue.   The problem with mine was that the page/widget was passed the sys_id of a catalog category that does not exist in the current catalog.  If you remove sys_id=<somenumber> from the url it loads fine.  On my page this was coming through from the "Catalog category" option/setting on the Icon Link widget from the main portal page. 

[Ryan M]

Possible solution in previous posters comment.

[TStark]

Hi Nia,

Thank you for this. I am having trouble with this widget unintentionally displaying the error message: "You do not have permission to see this category" to all users except admins. I've ruled out all other potential issues (inaccessible categories, catalogs, items, etc.) and when I remove this widget everything is fine. I also did another test....we have two portals and I've tried this widget on both portals and the same error message.

One thing to not is we aren't using the Customer Service plugin or Human Resources plugins which enables the use of snc_external and snc_internal roles.

I assume the culprit is related to the Server script which performs the checks on permissions and displays the error message but I'm not sure how to modify the script to resolve the issue. Is there anyway you can look at this? I'm using the V1 (SC Category Tiles V1) version.

Thanks,
AJ

[Nia McCash]

Hi AJ,

It has been a loooong time since I've looked at this code, but there should be a section in the Server Script that looks something like this:

	data.catalog_id = $sp.getParameter("sys_id") || $sp.getValue('sc_catalog');
	if (!$sp.canReadRecord("sc_catalog", data.catalog_id)) {
		data.error = "You do not have permission to see this catalog";
		return;
	} 

As a starting point for your troubleshooting, this is the code that is checking for access and is giving that message. 

[TStark]

I really appreciate your reply Nia. I figured that was the part of the code that needed troubleshooting since it produces the error message however, I'm not sure how to modify it. Also, I installed this on an SN developers instance for further testing and elimination and the same issue occurs. Please see screenshot below.

[Nia McCash]

I would try to just comment out those lines/that check for now. But do plenty of testing to make sure that folks who can't access the Service Catalog (if any) are still prevented from accessing it.

[TStark]

Thats exactly what I just did and that worked. I'll post the screenshot below for those who ran into the same issue as there were a few. Thanks for your help Nia!

[Moedeb]

Yes commenting that out makes it completely work. Since everyone has access this is a valid workaround for us, thank you 🙂

[Dtwarren]

I am trying this on V3 but not having any luck.  Is there a change that needs to be made for it to work on V3?

[Nia McCash]

These widgets are based on fairly old code now. Can you post what version of ServiceNow you are now running and more details on what the issue is?

[Dtwarren]

I am on Orlando and will be updating to Quebec in a month or two.

The issue is that the categories are sorting by title rather than order.  The Catalog Items in each category are sorting by order as desired.

[Nia McCash]

Update Line 5 of the HTML template code

from

<div class="col-sm-6 col-md-4" ng-repeat="item in data.items | orderBy:'title'">

to

<div class="col-sm-6 col-md-4" ng-repeat="item in data.items | orderBy:'order'">

[Dtwarren]

Thank you! That worked.  I never even looked there, LOL I was focused on the server side script.

[A77]

Hi Nia! Thank you for sharing this info. I'm using version 2 but facing issue how to implement this.

I am attaching two images. The first image shows how it's currently looking. Your second version is how it's supposed to look.

Could you please help me with it? 

[Nia McCash]

Is the problem that you aren't seeing the subcategories listed in each card?

[A77]

Thank you foe getting back.

Yes, I want subcategories to list inside each category card like Version 2.

[Nia McCash]

I just tried the widget in my Quebec version PDI and it seems to be working for me. Do your caregories have subcategories? Perhaps you can post a new question in a new thread with more information so that others can try to help.

Also keep in mind these widgets are based on really old code (3 years!) an hasn't been updated since.

[vicky7413]

Hi Nia,

I tried using Version 1 and am able to see categories in card view but am not able to see catalog items after clicking on categories.

Could you please help me with the code to get the catalog items after clicking on categories.

 

[shalinitangella]

^ following.

[shalinitangella]

Hi, 
Could you please share the steps you followed? 
Downloaded the widget but unsure if this should replace any existing page. 

[Nia McCash]

What's the URL of the page that you are directed to when you click on the the category card? Can you show more of the screenshot? I'm not sure what I'm looking at. Is "Access" the category you clicked on?

[A77]

Hi Nia,

I am using version 2 for my service catalog. I am unsure how to use the xml file that you uploaded in my sc category page widget. My goal is to make subcategories appear in each category card as a list.

I added this line of code in my text description div but it didn't work:

<ul>

                  <li ng-repeat="subcategory in data.subItems[item.sys_id]"><a href="?id={{subcategory.page}}&sys_id={{subcategory.sys_id}}">{{subcategory.title}}</a></li>

              </ul>

Currently my URL for the page above is:

https://dev.abc.edu/sp?id=sc_category

I'd really appreciate if you could please tell how to properly implement it in this scenario?

I am new to ServiceNow and not really great in coding.

Thank you!

[Nia McCash]

Importing the XML: https://docs.servicenow.com/bundle/rome-platform-administration/page/administer/development-best-pra...

Configuring Service Portal pages to use the widget that is imported via the XML: https://docs.servicenow.com/bundle/rome-servicenow-platform/page/build/service-portal/task/t_Configu...

[shalinitangella]

Hello,

Can we do this dynamically? I am able to display in card tiles by passing the sys_id as url. (Attached Screenshot). But unable to fully use it as it's not picking up dynamically. 

What I have done - 
I added the widgets sc_category and version1 widget on same page. Clicking the category on the sc_category widget is not sending sys_id to the version1 widget to display subcategories as tiles. 

Please advise. 

[Nia McCash]

As far as I know of, it should work dynamically. What's the URL that you're getting when clicking on the card?

[Vinit6]

Hi Nia,

@Nia McCash Thanks a lot for this article. I'm using version 2 for my service catalog in my personal instance but when I try to click on the subcategories I'm getting error message - 

You do not have permission to see this catalog

Please find the url - https://dev101363.service-now.com/sp?id=sc_category&sys_id=900682363731300054b6a3549dbe5d5f

I have also tried to comment the error message in the script but after commenting it is just showing blank page. Kindly help me regarding this.

Regards

Vinit

[Nia McCash]

HI Vinit,

Commenting out just the message is likely not enough to resolve your problem as the logic of the code that is preventing access would still apply.

You should check to make sure that the user viewing the catalog has access to it OR, if you want to get rid of the check entirely (NOT recommended) you can comment out the following lines 4-7 of the Server Script:

	if (!$sp.canReadRecord("sc_catalog", data.catalog_id)) {
		data.error = "You do not have permission to see this catalog";
		return;
	} 

Note that line 4 checks to see that the person viewing the Service Portal page has read access to the catalog in question.

[Vinit6]

Hi Nia,

Thanks a lot for your response. I have already commented the lines 4-7 in the script . After commenting I'm getting the blank page . Same is the case with version 1 . Can you please guide me on this .

Regards

Vinit

[Nia McCash]

HI Vinit,

Without further information, I don't know how to help you. These widgets are rather old and based on old code. I would suggest you clone the widget form a newer version of ServiceNow (currently San Diego or Tokyo) and customize that new clone to your needs.

[Virag Shah2]

Hello Nia,

This is really a great work! Thank you for sharing it.

I really liked the version 1 widget.

We are on San Diego and I was comparing the OOTB widget with the version 1 widget and noticed that things have changed a lot.

Would it be possible for you to update the Version 1 widget as per the latest release.

I understand that it is a bit of a task and huge huge favour I am asking for.

But like others mentioned, the challenge is where we get the error message of "You do not have permissions to see this catalog" as an admin also. When we click the any of the categories(in left panel) or tiles, it does not show the items inside it and gives this error message. Even after commenting that piece of code it does not work.

Since now most of them are on San Diego and later releases, it would really benefit and help if you could  add the fix/update widgets

Thank you very much and would really appreciate for this!

Cheers!

Virag

[Jan Helge]

Hi @Nia McCash !

I have been looking for something like this forever! As @Virag Shah2  said most of us are in San Diego or Tokyo now. Would it be possible to get an updated widget?

I started working with ServiceNow in the Rome release and have just started to slowly copy some widgets and try to change them up a bit. I have a solution that "kinda" does the same thing now. Only that it is hardcoded, but that just gives an error if a user clicks on a category they don´t have access. Hope to use your widget instead if an update comes around.

[Nia McCash]

HI @Virag Shah2 , @Jan Helge 

I started working on a new version (based on Tokyo) of Categories titles and descriptions as cards/tiles (v1) which you can find at https://github.com/niamccash/servicenow-serviceportal-widgets. It's a work in progress and I will update the widget code and the documentation, as I find time.

If you find it helpful, would appreciate it if you could mark my original post ☝️ as such.

[praneeth7]

HI @Nia McCash

I'm using (SC Category Page v1) Widget in Santiago Version , It Works Fine. But when I try to open the subcategories it Doesn't shows the catalog Item inside the Subcategories.  I am getting no item in category error message. I would appreciate  If you can Help me on this.

Thank you,