Overview
This article explains how to dynamically render a background image on Service Portal catalog-related pages (Catalog Items, Categories, and Topics) using a custom image field and a Service Portal widget.
Whenever the background image is updated on the record, it is automatically reflected on the portal page without any additional configuration.
Use Case
Display a unique background image for each Catalog Item, Category, or Topic
Improve portal UI/UX by dynamically changing the background based on the selected record
Avoid hardcoding images in widgets or themes
Prerequisites
Configuration Details
1. Create a Custom Background Image Field
Create a custom image field named Background on the following tables:
Table Field Name Type
| Catalog Item | u_esc_background | Image |
| Catalog Category | u_esc_background | Image |
| Topic | u_esc_background | Image |
This field will store the image that should be rendered as the page background.
2. Widget – HTML Template
The widget does not require complex HTML. A simple container is sufficient:
<div class="elementCatItem"> </div>
3. Widget – Server Script
The server script determines:
Which page is being accessed
Which table and record to read
Which background image to load dynamically
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var itemID;
var page = $sp.getParameter('id');
var table;
if (page == 'emp_taxonomy_topic' || page == 'ele_emp_taxonomy_topic') {
table = 'topic';
itemID = $sp.getParameter('topic_id');
}
if (page == 'sc_cat_item' || page == 'sc_cat_item_guide') {
table = 'sc_cat_item';
itemID = $sp.getParameter('sys_id');
}
if (page == 'ele_sc_category') {
table = 'sc_category';
itemID = $sp.getParameter('sys_id');
}
var itemGr = new GlideRecord(table);
if (itemGr.get(itemID)) {
data.bg_image = itemGr.getValue('u_esc_background') + '.iix';
}
})();
What this script does:
Identifies the Service Portal page
Fetches the related record
Reads the custom background image field
Passes the image URL to the client controller
4. Widget – Client Controller
The client controller applies the background image dynamically to the page layout.
api.controller = function() {
/* widget controller */
var c = this;
var bgurl = 'url("/' + c.data.bg_image + '")';
var el = document.getElementsByTagName('section')[0];
el.style.backgroundImage = bgurl;
el.style.backgroundRepeat = 'no-repeat';
el.style.backgroundAttachment = 'fixed';
el.style.backgroundSize = 'cover';
el.style.backgroundPosition = 'bottom';
};
Behavior:
Applies the background image to the main page section
Ensures full-screen coverage
Maintains consistent positioning and responsiveness
Result
Each Catalog Item, Category, or Topic can have its own background image
Updating the image field on the form immediately updates the portal UI
No manual widget changes required after configuration
Benefits
Fully dynamic and scalable solution
Centralized image control at record level
Enhanced Service Portal user experience
Reusable widget across multiple pages
Best Practices
Optimize image size for performance
Use consistent image resolution for better UX
Ensure fallback styling if no image is uploaded
Conclusion
By using a custom image field and a Service Portal widget, you can dynamically render background images for catalog-related pages. This approach provides flexibility, improves visual consistency, and ensures that UI changes are driven directly from record configuration.
