NOTE: MY POSTINGS REFLECT MY OWN VIEWS AND DO NOT NECESSARILY REPRESENT THE VIEWS OF MY EMPLOYER, ACCENTURE.
DIFFICULTY LEVEL: INTERMEDIATE
Assumes good intermediate level knowledge and/or familiarity of Scripting in ServiceNow.
ServiceNow Eureka introduced a whole new interface paradigm: UI14. Among the many updates were a group of visual changes, including how the "background" color is displayed in the List View of all tables. Instead of filling in the background of a cell, there is now a colored dot next to the cell contents. Since that change can take some time to get used to, I've fielded a number of questions about how to change this back without losing all the other UI14 visual candy.
NOTE: This article is NOT about modern cell editing!
So is it possible? Yes! Here's how it's done:
We will need to do the following things to get us to where we want to go:
- Upload simple background images into the images table. These will act as our new background colors.
- Create or modify styles to set our background colors.
Got those? Then let's get started!
I used the following site in conjunction with my experimentation:
http://www.w3schools.com/cssref/default.asp
Import the Background Images
First I imported the (attached) list of images. To do this:
1. Navigate to System UI / Images
2. Right-click on the header bar and pick "Import Image ZIP File"
3. Choose the zip file of images you want to upload. In this case, it's the images.zip file.
4. Click the upload button. ServiceNow automatically extracts the image files from the zip and puts them in the images table where they are ready to reference. Cool, huh?
Style Creation / Modification
Next, pick your favorite table. I chose the Incidents table. You can see here the "before" picture. I am going to pick on the Priority styles. Note the "dots."
The colors are from out-of-the-box (OOB)
You will then need to create or modify existing styles. Remember: if you change it, you own it. I modified the two existing out-of-the-box styles for the Incident/Task Priority field for the purposes of this article.
A side note: One neat thing is that you can have multi-line styles -- it's not necessary to one-line the information. When I first figured this out, I reasoned: Since you can have "chained," semi-colon delimited-style information, you should be able to just put each on its own line. I tried it and it worked! You can also have comments just like in a normal CSS3 style. However, some CSS3 things flat out don't work (animations, for example). See more below about things I tried that worked -- you'll have to play around and see what you can do as well!
To continue, I modified the following styles:
Table: Task
Field Name: Priority
Value: 1
/* background-color:tomato - the original value*/
font-size: 18px;
font-weight: bold;
font-family: "Times New Roman", Georgia, Serif;
font-style: italic;
color: darkred;
/* forces the image to the background - this MUST come before the background-image line */
border-style: solid;
background-image: url("background_red.jpg");
border: 2px solid darkred;
text-decoration: underline;
text-align: right;
Table: Task
Field Name: Priority
Value: 2
/* background-color:orange - the original value*/
font-size: 18px;
font-weight: bold;
font-family: "Times New Roman", Georgia, Serif;
font-style: italic;
color: orange;
/* forces the image to the background - this MUST come before the background-image line */
border-style: solid;
background-image: url("background_yellow.jpg");
border: 2px solid orange;
text-decoration: underline;
text-align: right;
Once I saved these, they immediately become active in the list view. Here is the "after" picture:
So what's happening here? I set the following for the particular style:
Font color, size, weight, family and style.
I also added in the underline and aligned the text to the right.
Then the magic happens: we replace the "dot" with one of our uploaded images. You MUST set the border-style before that line, as this causes the cell to "wake up" to the new image. If you skip this step, all you will get is a confused cell with a rounded square set to your default color (by the way, you can change that color using the background-color CSS tag). Our image is automatically set to a default of 100% x 100% so it fills the entire cell.
If you turn off "Modern Cell Editing" in the list gear the modifications will really pop!
That's all there is to it. The only "downside" to this is that it requires that you go out and make this modification to every one of the styles you want to appear different than the "dot," as this method does not apply the change to all "dots."
Additional Capabilities
Ready for more? Here's a list of some other things I tried out that worked:
/* --- COMMENTS! worked fine --- */
background-color: white; /* worked of course - background color of the dot */
background-position: 0px 0px;
background-size: 16px 16px; /* size of the image - without a norepeat available this acts pretty weird*/
background-repeat: repeat-y; /* needs more testing */
border-bottom: thick dotted #ff0000;
/* tested both the named and hex values */
outline: 2px solid green;
outline: #00FF00 dotted thick;
visibility: hidden;
text-shadow: 2px 2px #00FF00;
opacity: 0.5;
letter-spacing: -3px;
cursor: crosshair;
/* --- The following column width setters worked fine in most cases --- */
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 150px;
On a final note, if you really, really want to back out of the UI14 interface in Eureka, you can simply go to sys_properties.list and look for the following property:
glide.ui.doctype
Set it to false, save and then log out and log back in and you should have your old interface back.
Enjoy!
Steven Bell.
If you find this article helps you, don't forget to log in and mark it as "Helpful"!
NOTE: ON APRIL 1, 2016 ACCENTURE COMPLETED THE ACQUISITION PROCESS OF CLOUDSHERPAS. AT THAT TIME THE CLOUDSHERPAS BLOG SITES WERE DOWNED FOREVER.
THIS IS THE RE-PUBLICATION OF MY ARTICLE FROM December 30, 2014 ON THE CLOUDSHERPAS SERVICENOW ADMIN 101 BLOG.
EVEN THOUGH THIS WAS ORIGINALLY CREATED FOR THE EUREKA RELEASE I THOUGHT THAT IT WAS STILL RELEVANT AS THE TECHNIQUES USED HERE WILL STILL WORK IN THE LATEST RELEASE.
Originally published on: 05-27-2016 07:00 AM
I updated the code and brought the article into alignment with my new formatting standard.
2 Comments
