ServiceNow Widget is what define the content in your portal. You can use the base system widgets provided with Service Portal, clone and modify widgets, or develop custom widgets to fit your own needs.
ServiceNow Widget – Catalog Home Page Widget
Today, we are going to add a simple custom widget which contains the Image background and the dynamic catalog Title and Description based on user selection of which catalog.

HOW CAN WE ACHIEVE THIS REQUIREMENT
- Step 1: Clone the Homepage search widget

- Step 2: Modify the content as below
HTML Template
<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h2 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="data.title"></h2>
<div ng-if="data.description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="data.description"></div>
</div>
</div>
Server Script
(function() {
data.catalogId = $sp.getParameter('catalog_id') || -1;
if (data.catalogId == -1) { // All is selected
data.title = "Request Form";
data.description = "Here is the description when select ALl";
} else {
data.title = getCatalogFieldValue(data.catalogId,'title');
data.description = getCatalogFieldValue(data.catalogId,'description');
}
function getCatalogFieldValue(catalogId,field) {
var gr = new GlideRecord('sc_catalog');
if (gr.get(catalogId)) {
return gr.getValue(field);
}
}
})();
- Step 3: Include the widget to Page and add Image to Container


Result
When All is selected or page is loaded first time

When we select other catalogs
