From Bland to Grand: Decorating ServiceNow Forms Like a Pro

Ah, Servicenow! The go-to platform for all your enterprise needs. If you’re familiar with this powerhouse of a tool, then you know that it’s capable of doing some pretty impressive things. But did you know that it can also help you create a killer form background? That’s right, folks, Servicenow has got your back.

Not only form background, you can style multiple elements in a single configuration. Excited to know how you can do below in a ServiceNow form?

Form background in ServiceNow

Well, follow these steps to do a similar setup.

1. First things first, let’s talk about backgrounds. Adding a background to your form can make a world of difference. But why stop at just a simple image? Get creative with it! Add a pattern, gradient, or even a subtle animation to really make your form pop. You can download below image for instance.

2. Upload under System UI > Images

3. Create a UI Macro and add the following code. Notice the CSS has other elements too which needs to be styled to make the background look more appealing.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
 .touch_scroll{
 background:url("/formbg.png");
 background-size:cover;
 background-position:center;
 }
 label{
 font-weight:600;
 font-size:16px;
 
 }
 .btn-default{
 background:#fff;
 } 
 table,form,.section,.tabs2_section {
 background:transparent !important;
 }
 </style>
</j:jelly>

4. Create a new UI Formatter for incident table under System UI > Formatters. In the formatter field, add the <macro_name>.xml

5. Go to form layout and place the formatter on the form and that's it!

Output:

It was fun working on it. This may not be an actual requirement in most cases, but it was a good learning on knowing that SN is so flexible. You can do other styling on the form inside the macro e.g., change color of a specific label, input styles, hover/focus effects etc.

Let me know your thoughts here.

Please note this may or may not work as is on next Exp and workspaces

Happy Learning!