We have a requirement to change the header of the record producers which are suppose to create incidents. At the moment OOB we are able to see that these are mentioned as Request. Please find the screenshot below.
Please let us know if this is possible.
Thanks in advance.
Regards,
Jithu
Hi @JithuJose and @Saurabh Singh5
To accomplish this, we'll need to clone all the out-of-the-box (OOB) widgets involved in rendering the page. Based on the screenshot you shared, it looks like this is from the Taxonomy Topic page of the ESC portal.
Let's understand the structure of the section where these cards are displayed.
There are total 3 widgets involved.
- Topic Content (Blue)
- Catalog Content (Green)
- Taxonomy Content Card (Orange)
First, we need to clone the Topic Content widget. This widget typically renders two types of content: Catalog Content and KB Content. Since the required changes are related to catalog items, we specifically need to clone the Catalog Content widget.
The Taxonomy Content Card is a general widget that follows the above design and is used across multiple pages. However, since it retrieves data from the Catalog Content widget, most of the code-level changes need to be made in the Catalog Content widget.
After cloning the two widgets, we need to make the following code-level changes:
Topic Content widget
Go to server script of cloned widget and make changes at the highlighted line.
we have to give the id of the cloned Catalog Content widget here.
Catalog Content
Go to server script of cloned widget and make changes at the commented line. I have noted the updates using code update comments.
(function () {
var catalogSysId = options.content;
var catalogTable = options.content_table;
var widgetTitle = options.widgetTitle;
var widgetSysId = options.widgetSysId;
var isFeatured = options.isFeatured || false;
var viewType = options.listType || 'card';
var CONTENT_TYPES = {
KB: 'kb',
EXTERNAL: 'external'
};
var TYPES = {
ORDER_GUIDE: 'order_guide',
CONTENT_ITEM: 'content_item'
};
var searchModeEnabled = options.searchModeEnabled || false;
var CARD_DATA_SOURCE = {};
// code update 1: to store the name of the table linked to record producer
var recProdTable;
if (searchModeEnabled) {
CARD_DATA_SOURCE = options;
var type = "";
var content_type = "";
var kb_article = "";
for(var i=0; i<options.columns.length; i++){
if(options.columns[i].fieldName === "sys_class_name"){
type = options.columns[i].value;
}
else if(options.columns[i].fieldName === "content_type"){
content_type = options.columns[i].value;
}
else if(options.columns[i].fieldName === "kb_article"){
kb_article = options.columns[i].value;
}
}
if(type === 'sc_cat_item_guide'){
CARD_DATA_SOURCE.type = TYPES.ORDER_GUIDE;
}
else if(type === "sc_cat_item_content") {
CARD_DATA_SOURCE.type = TYPES.CONTENT_ITEM;
}
CARD_DATA_SOURCE.content_type = content_type;
CARD_DATA_SOURCE.kb_article = kb_article;
data.res="else";
}
else {
if (!catalogSysId || !catalogTable)
return;
var catalogItemJS = new sn_sc.CatItem(catalogSysId);
CARD_DATA_SOURCE = catalogItemJS.getItemSummary();
// code update 2: to pull the name of the table linked to record producer
var values = catalogItemJS.read({"table_name" : ""}, true);
// code update 3: updating the name of the table in declared variable
recProdTable = values.table_name;
}
var catItemDetails = CARD_DATA_SOURCE;
var additionalInfo = '';
var zeroRecurringPriceVal = '0.00';
//to check if the catalog item has price and also 'glide.sc.price.display' property value
if (catItemDetails.show_price && $sp.showCatalogPrices()) {
additionalInfo = catItemDetails.price;
if(!searchModeEnabled){
var isRecurringPriceNonZero = catItemDetails.recurring_price && catItemDetails.recurring_price.substr(1, 4) !== zeroRecurringPriceVal;
if (catItemDetails.recurring_frequency && catItemDetails.recurring_frequency !== null && isRecurringPriceNonZero)
additionalInfo = additionalInfo + ' + ' + catItemDetails.recurring_price + '/' + catItemDetails.recurring_frequency;
}
}
var page = catalogTable;
//use kb article sys_id instead of catalog record sys_id if it is a kb article type catalog
var sys_id = catItemDetails.content_type === CONTENT_TYPES.KB ? catItemDetails.kb_article : catItemDetails.sys_id;
//for the external type catalog, open the catalog item in new tab
var target = catItemDetails.content_type === CONTENT_TYPES.EXTERNAL ? '_blank' : '';
//page ids differ for order guide and kb article type catalog items
if (catItemDetails.type === TYPES.ORDER_GUIDE) {
page = 'sc_cat_item_guide';
} else if (catItemDetails.type === TYPES.CONTENT_ITEM && catItemDetails.content_type === CONTENT_TYPES.KB) {
page = 'kb_article';
}
var pageUrl = catItemDetails.type === TYPES.CONTENT_ITEM && catItemDetails.content_type === CONTENT_TYPES.EXTERNAL ?
catItemDetails.url : '?id=' + page + '&sys_id=' + sys_id;
var image = catItemDetails.picture ? catItemDetails.picture + '?t=small' : '';
// code update 4: object to store the title which will get displayed on the card.
// table names might be stored in snake_case, hense storing the key value pair will help to get the proper title
// here you can add custom titles as well based on your requirement, make sure you give the correct table name as key. request is not a table it is a default value for catalog item title
var titleObj={
incident: 'Incident',
change_request:'Change Request',
request:'Request'
};
// code update 5: based to fetched table name it will filter the readable title from the object.
var recProducerName= recProdTable ? recProdTable : 'request';
data.catalogCardData = {
sysId: catalogSysId,
widgetTitle: widgetTitle,
widgetSysId: widgetSysId,
title: catItemDetails.name,
description: catItemDetails.short_description,
type: gs.getMessage(titleObj[recProducerName]),//code update 6: title is assigned to type variable which displays the title on the page
isFeatured: isFeatured,
image: image,
iconClass: 'fa fa-pencil-square-o',
target: target,
additionalInfo: additionalInfo,
url: pageUrl,
viewType: viewType,
table: catalogTable
};
data.widgetData = $sp.getWidget("content-card", data.catalogCardData);
})();
Once the code level changes are done, go to the Taxonomy Topics page and add the newly created Topic Content widget.
Output from my PDI:
I hope this will help you to accomplish your requirement. 😊
Mark this as Helpful / Accept the Solution if this helps.
