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 the below in a ServiceNow form?
Well, follow these steps to do a similar setup.
- 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 the 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 need 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;
} under
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.
Please note this may or may not work as is on next Exp and workspaces
Let me know your thoughts here.
Follow my blog: Deepak Negi – Medium
Follow me on LinkedIn: Deepak Negi | LinkedIn
Happy Learning!
