Skip to content

Commit ce6066c

Browse files
Create readme.md
Readme file for using UI macro
1 parent 375215b commit ce6066c

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

UI Macros/FormBackground/readme.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# ServiceNow UI Macro - Form Background Macro
2+
3+
> A lightweight UI Macro to style ServiceNow forms with a custom background and simple element theming
4+
5+
## Features
6+
7+
* Adds a full-cover background image to a form (supports cover, center positioning).
8+
* Makes table/form/section backgrounds transparent so the background shows through.
9+
* Easy to customize (image path, label styles, button styles, additional CSS selectors).
10+
11+
## Requirements
12+
13+
* ServiceNow instance with admin access.
14+
* An image to set as background
15+
16+
> ⚠️ 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.
17+
18+
## Installation
19+
20+
1. **Upload the background image**
21+
22+
* Navigate to **System UI > Images** and upload your background image (e.g., `formbg.png`).
23+
24+
2. **Create the UI Macro**
25+
26+
* Go to **System UI > UI Macros** and create a new macro (e.g., `ui_form_background`).
27+
* Copy the example macro content below into the UI Macro.
28+
29+
3. **Create a UI Formatter**
30+
31+
* Go to **System UI > Formatters**. Create a new formatter for the target table (for example, `incident` table).
32+
* In the *Formatter* field, reference the macro name you created (e.g., `ui_form_background.xml`).
33+
34+
4. **Add the Formatter to the Form Layout**
35+
36+
* Open the form layout for the target table (Form Layout / Form Designer) and place the formatter region on the form.
37+
* Save and open a record to see the background applied.
38+
39+
## Result
40+
41+
<img width="1838" height="922" alt="image" src="https://github.com/user-attachments/assets/92b81219-69e0-4f20-96ca-8d1bdc92a0ab" />
42+

0 commit comments

Comments
 (0)