|
| 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