Changing Service Portal widgets look and feel without cloning widgets

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

While working with the Service Portal, quickly you will run into the limitations of working with the out-of-the-box Service Portal widgets. You just want the presentation a little bit different, to remove/hide a certain element, etc.. The most common answer given on the ServiceNow Community would involve cloning the out-of-the-box Service Portal widget. I'm just wondering… why?!

Two examples

On the Category page, out-of-the-box you can choose for a Card View or a Grid View. What if you want to change this? To remove this option, and only display the Card View (or the Grid View)?

Note: This would also need the creation of a system User Preference "catalog-item-list-view" with value "Grid" or "Card"

On the Catalog Item page, out-of-the-box help icons are shown on variables that contain a help text. What if you want to remove this question mark or the cross? Because you feel this is overhead?

Inspect CSS elements

The Service Portal widgets might come with several instance options, to configure the presentation, behavior, etc. of the Service Portal widget concerned. Though this is limited. Oke, no instance options, so now we have to clone and edit the out-of-the-box Service Portal widget? No!

Another option to influence the Service Portal widgets could be CSS override. First, use your browser to inspect which CSS elements it concerns. With Google Chrome for example, right-mouse click and choose Inspect. Ideally, place your mouse cursor on the element you are after and then choose Inspect.

CSS override: Page specific CSS / Widget Instance CSS

Knowing which CSS elements we are after, now we can influence them! In multiple ways, I'll show two possibilities here.

Widget Instance CSS

Navigating to "Service Portal > Widget Intances", you can lookup the Widget Instance for the Service Portal widget you are after. Amongst others, this would provide you with a CSS field which you can use to add additional CSS.

Page Specific CSS

An other option could be to add Page Specific CSS. For example if you are using the Service Portal Widget concerned, multiple times on the page. Or if concerns an Embedded Service Portal widget. On the Service Portal, right-mouse click on the Service Portal widget concerned and choose "Page in designer". On the top right, you can edit the page properties by selecting "Page". Amongst others, this would provide you with a Page Specific CSS field which you can use to add additional CSS.

Result

After reloading your Service Portal, the added CSS would immediately be effective. You just changed the behavior of the Service Portal widgets concerned, and without cloning the Service Portal widgets. In a lot of cases, cloning the out-of-the-box Service Portal widgets is really unnecessary!

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,

Mark Roethof

ServiceNow Technical Consultant @ Quint Technology
1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

LinkedIn