Skip to content

Commit fdde06e

Browse files
Create readme.md
Readme file to use formbackground via UI Macro
1 parent b879679 commit fdde06e

File tree

1 file changed

+65
-0
lines changed
  • Client-Side Components/UI Macros/FormBackground

1 file changed

+65
-0
lines changed
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
56+
57+
## Contributing
58+
59+
Contributions, improvements, and pull requests are welcome. Please follow these guidelines:
60+
61+
* Fork the repo and create feature branches for changes.
62+
* Keep the macro CSS minimal and well-commented.
63+
* Include screenshots and a short description for visual changes.
64+
65+
If you want help adapting this macro to your instance (Next Experience / Workspaces / Service Portal), open an issue or reach out via the repository.

0 commit comments

Comments
 (0)