Find your people. Pick a challenge. Ship something real. The CreatorCon Hackathon is coming to the Community Pavilion for one epic night. Every skill level, every role welcome. Join us on May 5th and learn more here.

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
  • 311 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