Skip to content

Commit aea7842

Browse files
Form Background via UI Macros (#2085)
* Update cc all group members.js All active users from the group * Update README.md * Create readme.md Readme file to use formbackground via UI Macro * Create form_background.xml Form background script * Update README.md reverted to original * Update cc all group members.js reverted to original * Update readme.md updated readmefile
1 parent 036d425 commit aea7842

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<j:jelly trim="false"
3+
xmlns:j="jelly:core"
4+
xmlns:g="glide"
5+
xmlns:j2="null"
6+
xmlns:g2="null">
7+
<style>
8+
.touch_scroll{
9+
background:url("/formbg.png");
10+
background-size:cover;
11+
background-position:center;
12+
}
13+
label{
14+
font-weight:600;
15+
font-size:16px;
16+
17+
}
18+
.btn-default{
19+
background:#fff;
20+
}
21+
table,form,.section,.tabs2_section {
22+
background:transparent !important;
23+
}
24+
</style>
25+
</j:jelly>
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# ServiceNow Form Background Macro
2+
3+
> A lightweight UI Macro to style ServiceNow forms with a custom background and simple element theming (labels, buttons, sections).
4+
---
5+
6+
## Features
7+
8+
* Adds a full-cover background image to a form (supports cover, center positioning).
9+
* Makes table/form/section backgrounds transparent so the background shows through.
10+
* Easy to customize (image path, label styles, button styles, additional CSS selectors).
11+
12+
## Requirements
13+
14+
* ServiceNow instance with admin access.
15+
* An image to set as background
16+
17+
> ⚠️ Note: This macro uses Jelly/CSS that may not work as expected in some Next Experience workspaces or future UI updates. Test in a non-production instance first.
18+
19+
## Installation
20+
21+
1. **Upload the background image**
22+
23+
* Navigate to **System UI > Images** and upload your background image (e.g., `formbg.png`).
24+
25+
2. **Create the UI Macro**
26+
27+
* Go to **System UI > UI Macros** and create a new macro (e.g., `ui_form_background`).
28+
* Copy the example macro content below into the UI Macro.
29+
30+
3. **Create a UI Formatter**
31+
32+
* Go to **System UI > Formatters**. Create a new formatter for the target table (for example, `incident` table).
33+
* In the *Formatter* field, reference the macro name you created (e.g., `ui_form_background.xml`).
34+
35+
4. **Add the Formatter to the Form Layout**
36+
37+
* Open the form layout for the target table (Form Layout / Form Designer) and place the formatter region on the form.
38+
* Save and open a record to see the background applied.
39+
40+
## Compatibility
41+
42+
* Tested on ServiceNow classic forms (UI16). May require tweaks for Next Experience, Service Portal, or Workspace.
43+
* If your instance uses strict Content Security Policy (CSP) or image hosting constraints, host the image in a supported location or adapt the implementation.
44+
45+
## Troubleshooting
46+
47+
* If no background appears:
48+
49+
* Confirm the image is uploaded and the filename matches.
50+
* Ensure the formatter is placed on the form layout and published.
51+
* Inspect (browser devtools) to confirm CSS selectors are applied.
52+
53+
## Result
54+
<img width="1838" height="922" alt="image" src="https://github.com/user-attachments/assets/14c29e0a-ad88-411e-b7ca-1c82eaeaf324" />
55+

0 commit comments

Comments
 (0)