Creating custom lists CSS

[phugron]

Good day,

I'm fairly new to ServiceNow and am responsible for the front end design for our client applications. I can create pixel-perfect pages but I hit a wall when it comes to specifying custom styles for tables (ie. sc_req_item, sc_cart_item, etc.) dropped in content blocks . If I'm not mistaken, generated sites include the CSS file "css_includes_cssx" to style these god-awful misshapen tables (HTML tables in divs in other tables in spans in more divs...). My goal is to create custom styles for these tables to match the look and feel of my sites. The only way I found at this point is to target each class individually and override the css in the base file. It's a labor intensive process to say the least.

Is there an easier method to style tables?
Is there a way to create my own HTML tables (and css) and generate each row dynamically?

I may not be asking the right questions. If anyone has answers or could point me to the right information it would be very appreciated.

Regards.

[geoffcox]

The answer to your second question is yes, you can absolutely create your own tables with UI pages.
I will continue to watch responses to this question to see if anybody can answer the first question!

Cheers,
Geoff.

[phugron]

Thanks Geoff! I'll take a look at UI pages in greater detail.

[jfarrer]

Overriding the table styles is probably the quickest and easiest.

The alternative as you suggested is to create your own HTML in Jelly script. If it's part of the CMS you can do that in the Content Type definition for the Site and Table. The Summary determines what is used when the content is displayed in a List. The Detail determines what is shown when using the Current Document block. In the default examples that come with the ESS site they use an iframe to display the content. You could replace this with your own HTML that displays the content.

If you're doing something that is meant to be a little more custom and more of an exception to the normal way you're displaying things you can create a table specific List Definition (similar to catalog_item_grid) for lists. You can use a Dynamic Content Block to create just about anything else since it's just freeform Jelly script.

If you're not using the CMS then you're pretty much just looking at UI Pages for creating custom HTML.

[phugron]

Great stuff, thanks!

I'll take a closer look at what you're proposing. I've found part of the answer to generate my own tables in the TechNow videos on Jelly

Thanks again!