Hi All,
we have a requirement to show a custom field and it's value on the service portal in the Table View of the service catalog. Values of the custom field are not showing up in the list/table.
Back-end view:
SP View:
Steps so far:
- created custom field on the Catalog Item / Table in the back-end. (The custom field is of the Translated Text type)
- cloned the sc_category page to allow customizing
- changed Server Script to this:
function fetchItemDetails(itemRecord, items) {
while (itemRecord.next()) {
var catalogItemJS = new sn_sc.CatItem(itemRecord.getUniqueValue());
if (!catalogItemJS.canView())
continue;
var catItemDetails = catalogItemJS.getItemSummary();
var item = {};
item.name = catItemDetails.name;
item.short_description = catItemDetails.short_description;
item.u_custom_field = catItemDetails.u_custom_field; //<- THIS IS MY CUSTOM FIELD
item.picture = catItemDetails.picture;
item.price = catItemDetails.price;
item.sys_id = catItemDetails.sys_id;
item.hasPrice = catItemDetails.show_price;
item.page = 'sc_cat_item';
item.type = catItemDetails.type;
item.order = catItemDetails.order;
item.sys_class_name = catItemDetails.sys_class_name;
item.titleTag = catItemDetails.name;
if (item.type == 'order_guide') {
item.page = 'sc_cat_item_guide';
} else if (item.type == 'content_item') {
item.content_type = catItemDetails.content_type;
item.url = catItemDetails.url;
if (item.content_type == 'kb') {
item.kb_article = catItemDetails.kb_article;
item.page = 'kb_article';
} else if (item.content_type == 'external') {
item.target = '_blank';
item.titleTag = catItemDetails.name + " ➚";
}
}
items.push(item);
}
}
- and changed HTML code to this:
<div id="tabpanel-grid-{{::data.category_id}}" role="tabpanel" aria-labelledby="{{'tab-grid'}}" ng-if="view == 'grid' && data.items.length > 0">
<table class="table table-striped item-table" aria-label="{{::data.category.title}}" aria-describedby="id-caption-category">
<caption id="id-caption-category"><span class="sr-only">{{::data.category.title}}</span></caption>
<thead>
<tr>
<th id="id-header-item" scope="col" colspan="2">${Item}</th>
<th id="id-header-description" scope="col" colspan="3">${Description}</th>
<th id="id-header-custom_field" scope="col" colspan="3">${Custom Field}</th> //<-THIS IS THE CUSTOM FIELDS TABLE HEADER
<th id="id-header-price" scope="col" ng-if="data.showPrices">${Price}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.items | orderBy: 'order' | limitTo: data.limit track by item.sys_id" ng-init="startItemList()">
<td id="id-item-{{item.sys_id}}" headers="id-header-item" scope="row" colspan="2">
<a target="{{::item.target}}" ng-href="{{::getItemHREF(item)}}" sn-focus="{{::item.highlight}}" ng-click="onClick($event, item)">
<div>
<img ng-src="{{::item.picture}}?t=small" ng-if="item.picture" alt="" class="m-r-sm m-b-sm item-image pull-left"/>
<span class="catalog-text-wrap catalog-item-name">{{::item.name}}</span>
<span ng-if="item.content_type == 'external'"><span class="sr-only">${External Link}</span> ➚</span>
</div>
</a>
</td>
<td headers="id-header-description id-item-{{item.sys_id}}" class="catalog-text-wrap" colspan="3">{{::item.short_description}}</td>
<td headers="id-header-u_custom_field id-item-{{item.sys_id}}" class="catalog-text-wrap" colspan="3">{{::item.u_custom_field}}</td> //<- THIS IS WERE THE VALUE OF THE CUSTOM FIELD SHOULD SHOW UP
<td headers="id-header-price id-item-{{item.sys_id}}" ng-if="data.showPrices">{{::item.price}}</td>
</tr>
</tbody>
</table>
</div>
Is there anything else I needed to do to make this work? Thank you in advance!
This requirement is the same for the Popular Items View in the service catalog on the Portal.
#tokyo
