Employee Centre Portal Changes

[Snehal]

Hi Team ,

Actually I Wanted to change Label From My Requests to My Tickets on Employee Centre portal and changed it using Instance option by pressing control and right click then i wanted to change the drop downs of view like open requests and closed requests to open tickets to closed tickets i did that by cloning the widget of My Requests having id my-request-v2 to Request view having id request_view_1 (made changes in Server Script ) and then changing the widget in page editor and it woking well that provblem only problem i am facing is it is changing the font and missing the borders like OOB (Out of the box ) i am attaching the some screenshots . can anyone help me how to keep the boarders as like OOB.Lemme know if any input needed from my side .

[bradleydebono · Accepted solution]

Hi Snehal, 

This issue here will be that the original "My Requests" widget is picking up a CSS Class from somewhere else, which isn't define inside the widget code/configuration directly. 

This is likely coming from the "EC Theme" CSS. Specifically, it's probably coming from the "ec-theme-my-requests" Style Sheet record specifically. 

That style sheet will probably start with something along the lines of...

.v8cc0df25875023000f220cf888cb0bb5 {

However, if you inspect your new widget via your browser's DevTools - You'll probably find that your new widget does not have this class. This means that none of the CSS that comes after it will apply to your widget. 

There are multiple solutions here. If you're planning on replacing the OOTB widget entirely, you can just change that class to match whatever your new widget is getting. I've tested this in a PDI and confirmed it's working.

I also found a helpful link that might provide more information for you: Solved: Widget Styles Missing after Clone - ServiceNow Community

If this helped, please mark it as the correct answer, it really helps!

[bradleydebono · Accepted solution]

Hi Snehal, 

This issue here will be that the original "My Requests" widget is picking up a CSS Class from somewhere else, which isn't define inside the widget code/configuration directly. 

This is likely coming from the "EC Theme" CSS. Specifically, it's probably coming from the "ec-theme-my-requests" Style Sheet record specifically. 

That style sheet will probably start with something along the lines of...

.v8cc0df25875023000f220cf888cb0bb5 {

However, if you inspect your new widget via your browser's DevTools - You'll probably find that your new widget does not have this class. This means that none of the CSS that comes after it will apply to your widget. 

There are multiple solutions here. If you're planning on replacing the OOTB widget entirely, you can just change that class to match whatever your new widget is getting. I've tested this in a PDI and confirmed it's working.

I also found a helpful link that might provide more information for you: Solved: Widget Styles Missing after Clone - ServiceNow Community

If this helped, please mark it as the correct answer, it really helps!

[Mark Roethof · Accepted solution]

Hi there,

This is an approach I often use when working with widget CSS:
- 2020-05-18 - Article - Changing Service Portal widgets look and feel without cloning widgets