Reputation: 73

Listing customization ServiceNow

How can I personalize a list within ServiceNow?

I mean, I have this list:

But I think its very confusing to see the position on the right side.. How can I center it?

Like CSS customization or JS or something like that.. where can I find the customization form?

Upvotes: 1

Answers (2)

Dylan Lindgren

Reputation: 361

You can customise the position of the field content by using Field Styles.

If you mean customising the position of the field header, I have had a play around with doing this and I seem to have got it working.

If you inspect the HTML of the column header you want to target (the th tag), you'll see that there's an attribute on it called glide_type which contains in it the type of column. You can use this to create a CSS rule to target only headers of a particular type.

For example, I have a field of type decimal, and the th tag has the following attribute:glide_type="decimal". So to target that element, I could create a CSS rule like the below:

th.text-align-left.list_header_cell[glide_type="decimal"] {
    text-align:  right;
}

The hacky part is including that CSS so that it applies throughout the SN interface. You can use a UI Script to run some JavaScript which includes the Style Sheet. So if you put the above CSS inside a new Style Sheet (navigate to Content Management > Design > Style Sheets), and copy that new Style Sheet's Sys ID, you can create a UI Script with the below in it to include that Style Sheet on all pages:

link = document.createElement("link");
link.href = "STYLE_SHEET_SYS_ID_GOES_HERE.cssdbx?";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName("head")[0].appendChild(link);

After doing that, you'll see that the Style Sheet is getting loaded on all pages, and if you've written your CSS right then you should find that the column header is now right-aligned!

As @Kirk said, performing this kind of customisation will mean that it's hard for ServiceNow Customer Support to assist if there's something you've customised getting in the way of their troubleshooting. Take this into account if you decide to implement something like this, and also thoroughly test this on a non-production instance.

In addition to the above, this solution may break in future releases as ServiceNow may decide to change the way that lists work and thus the CSS selector may no longer target the right/any element.

Hope this helps!

Dylan

Upvotes: 2