Change SC Category to card view instead of list view in service portal

[AmritaT]

Is there a way to change the 'SC Category' widget which is currently looking like this -

to a card view like given below :

I want to get rid of the list view and just have the card view for categories when user clicks on the 'Service Catalog' link on portal.

Please suggest. Thanks! 

[Narendra Kota]

For this you have to remove SC Categories widget from the sc_category Page.

Mark my answer as correct or helpful if it helped.

[Jeffrey DJ]

I'm afraid there's no easy way if I'm not mistaken.  You may need to create multiple things on your Portal.  As far as I can think of right now you'll need:

• New "Service Catalog" Page - suggest clone existing
• • Remove the SC Categories widget
• New Widget "SC Category Page" - suggest clone from existing
• • From here is where you're much work will be as you need to consider all Categories and Subcategories
  • You'll also need to think about Popular Items if you need it.

Once your page is done then relate it to your service portal.

[nathanfirth]

Amrita,

We developed this as a widget that we use with several of our clients. It's a little tricky because you can have multiple layers of categories and sub-categories and you can also have catalog items at the same level. We did quite a bit of development to solve this in a way that was intuitive to the end-user.

However, to get a basic POC of the widget is quite simple, just get the sys_id of the current category using $sp.getParameter('sys_id') and then a GlideRecord returning the categories within that category. Then ng-repeat in the HTML over the array to display the cards.

If you're interested in seeing the completed widget, it's part of our "RocketFuel Widget Library" that we offer available for license. Feel free to email me if you would be interested in seeing a demo.

-----------------
Nathan Firth
President & Chief Service Portal Officer
NewRocket, Inc.
nathan.firth@newrocket.com
http://serviceportal.io
http://newrocket.com

[Nia McCash]

This post is a bit old now so the code is dated, but might be somewhat useful or might point the way for you to develop your own custom widget: https://community.servicenow.com/community?id=community_article&sys_id=a0083cf5db35db00c310fb651f961...