From Bland to Grand: Decorating ServiceNow Forms Like a Pro

Deepak Negi
3 min readApr 25, 2023

--

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!

--

--

Deepak Negi
Deepak Negi

Written by Deepak Negi

Meet Deepak,the tech wizard and adventure enthusiast. When he's not coding on SN,you can find him exploring the mountains or searching for places with good food

Responses (2)