Built something you're proud of? Tell the story. A quick G2 review of App Engine or Build Agent helps other developers see what's possible on ServiceNow. Share your experience.

Platform analytics dashboard

JigyasaAror
Tera Contributor

3 weeks ago - last edited 3 weeks ago

Hi everyone,

 

I’m working on a Platform Analytics dashboard (score widget / score tile) and had a few UI-related questions:

 

  1. Is it possible to change the background color of a score widget/tile (not just the score color via thresholds)?
  2. Can we customize the font size of the heading/title in a score widget?
  3. Is there a way to center-align the score value (digits) both horizontally and vertically within the tile?

As of now I have created dashboard using in line editor.
PFA an image FYR.

Any guidance, best practices, or examples would be really helpful.

 

Thanks in advance!

Preview file
69 KB
0 Helpfuls
  • 318 Views
1 REPLY 1

Naveen20
ServiceNow Employee

3 weeks ago

Try this single CSS Include for your dashboard.

Steps:

  1. Inspect your dashboard's score tiles in browser DevTools to grab the exact class names (they vary by release).
  2. Create a Style Sheet record (sys_ui_style) and add it to your dashboard.
  3. Apply overrides as below and try:
 
css
/* 1. Background color (override or supplement thresholds) */
.pa-widget-body {
    background-color: #2D2D2D !important;
}

/* 2. Title font size */
.pa-widget-header .pa-widget-title {
    font-size: 12px !important;
}

/* 3. Center-align score value */
.pa-widget-score {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
0 Helpfuls