Modify the Popular items list in the service portal

[karrierr]

In the Service Portal OOB, when you click on Order Something, it redirects you to the Service Catalog homepage which displays the Popular Items list.

The client wants to control what items are displayed on this list. They still want to show 9 "items" but some of the boxes they want to see are "Hardware" and "Software" which are not really items, but categories. Is this feasible by modifying the Popular Items widget?

Or any suggestions on how to deal with a combination of categories and items as the default view when clicking on Order Something? Maybe we should not use Popular Items at all, rather display the required categories and items as static on the Service Catalog home widget.

Items/Categories that should replace the Popular Items:

1. Access to MS AX (catalog item)

2. Access to MS NAV (catalog item)

3. Change and Project Request (category)

4. New Employee (catalog item)

5. Update Employee (catalog item)

6. Deactivate Employee (catalog item)

7.Onboarding Package (catalog item)

8.Hardware (category)

9.Software (category)

[Muralidharan BS]

Hi Jayanthi and Karrierr,

For displaying category in the popular items, you have to insert the below piece of code, I am displaying category - computer. 

	count = new GlideAggregate('sc_category');
		count.addEncodedQuery('title=Computer');
		count.query();
		while (count.next()){
		var item = {};
		item.page = 'sc_category';
		item.sys_id = 'd0f3575b53813300c128ddeeff7b128b';
		item.name = 'Computer';
			items.push(item);
					 }

Result:

Kindly mark my response correct and helpful if my suggestion resolved your query,

Thanks

Murali

[Jayanthi]

Hi Murali,

I have edited the created query . but still no luck. am not able to get . 

[Muralidharan BS]

HI Jayanthi,

ok, try to go to the line 168 and comment line till 220. Instead of that use the below try, 

var count = new GlideAggregate('sc_cat_item');
count.addAggregate('COUNT','name');
count.addEncodedQuery('nameSTARTSWITHorder'); // use the encoded query here, the list of the forms
count.groupBy('sys_id');
count.orderByAggregate('COUNT', 'name');
count.query();	
while (count.next()){
var catalogItemJS = new sn_sc.CatItem(count.getValue("sys_id"));
var item = {};
var catItemDetails = catalogItemJS.getItemSummary();
item.name = catItemDetails.name;
item.short_description = catItemDetails.short_description;
item.picture = catItemDetails.picture;
item.price = catItemDetails.price;
item.sys_id = catItemDetails.sys_id;
item.hasPrice = item.price != 0;
item.page = 'sc_cat_item';
items.push(item);
 }
count = new GlideRecord('sc_category');
count.addEncodedQuery('title=Computer');
count.query();
while (count.next()){
var item = {};
item.page = 'sc_category';
item.sys_id = 'd0f3575b53813300c128ddeeff7b128b'; // sysid of the specific category
item.name = 'Computer'; // category name
items.push(item);
}					 }
return items;

[rajneeshbaranwa]

In addition to updating Server Script , You also need to make some subtle changes to HTML template. These changes are required because redirecting URL for categories are going to be different than catalog items.

Please find changes made in sc_categories widget.

HTML Template :

//Server Script Changes

var categories1 = new GlideRecord('sc_category');
		categories1.addQuery('sys_id','109f0438c6112276003ae8ac13e7009d');
		categories1.query();
		while (categories1.next())
			{
				
				var item = {};
				item.name = categories1.title.toString();
				item.short_description = "Category";
				item.picture = categories1.picture;
				item.sys_id = categories1.sys_id.toString();
				item.page = 'sc_category';
				items.push(item);
			}
			return items;
	}
	

 <div ng-if="view == 'card'">
      	<div class="col-sm-6 col-md-4" ng-repeat="item in data.items | orderBy: 'order' | limitTo: data.limit track by item.sys_id" ng-init="startItemList()">
        <div ng-if="item.page == 'sc_cat_item'"  class="panel panel-{{::options.color}} b">
          <a target="{{::item.target}}" ng-href="{{::getItemHREF(item)}}" ng-click="onClick($event, item)" class="panel-body block" sn-focus="{{::item.highlight}}">
            <div class="overflow-100">
              <h2 class="h4 m-t-none m-b-xs text-overflow-ellipsis" aria-hidden="" role="presentation" title="{{::item.name}}" style="padding-bottom:1px">{{::item.name}}<span ng-if="item.content_type == 'external'" aria-label="${External Link}"> ➚</span></h2>
              <img ng-src="{{::item.picture}}?t=small" ng-if="item.picture" alt="{{::item.name}}" class="m-r-sm m-b-sm item-image pull-left" />
              <div class="text-muted item-short-desc break-word" aria-hidden="{{::item.name}}" role="presentation">{{::item.short_description}}</div>
            </div>
          </a>
          <div aria-hidden="true" class="panel-footer">
            <a aria-hidden="true" ng-if="item.sys_class_name != 'sc_cat_item_content' || item.content_type == 'kb' || item.content_type == 'literal'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" class="pull-left text-muted" tabindex="-1">${View Details}</a>
            <a aria-hidden="true" ng-if="item.sys_class_name == 'sc_cat_item_content' && item.content_type == 'external'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" target="_blank" class="pull-left text-muted" tabindex="-1">${View Details}</a>
            <span ng-if="data.showPrices && item.hasPrice" class="pull-right item-price font-bold">{{::item.price}}</span> &nbsp;
          </div>
        </div>
          <div ng-if="item.page == 'sc_category'"  class="panel panel-{{::options.color}} b">
          <a target="{{::item.target}}" ng-href="sp?id=sc_category&sys_id={{::item.sys_id}}&catalog_id=-1" ng-click="onClick($event, item)" class="panel-body block" sn-focus="{{::item.highlight}}">
            <div class="overflow-100">
              <h2 class="h4 m-t-none m-b-xs text-overflow-ellipsis" aria-hidden="" role="presentation" title="{{::item.name}}" style="padding-bottom:1px">{{::item.name}}</h2>
              <img ng-src="{{::item.picture}}?t=small" ng-if="item.picture" alt="{{::item.name}}" class="m-r-sm m-b-sm item-image pull-left" />
              <div class="text-muted item-short-desc break-word" aria-hidden="{{::item.name}}" role="presentation">{{::item.short_description}}</div>
            </div>
          </a>
          <div aria-hidden="true" class="panel-footer">
            <a aria-hidden="true" ng-if="item.sys_class_name != 'sc_cat_item_content' || item.content_type == 'kb' || item.content_type == 'literal'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" class="pull-left text-muted" tabindex="-1">${View Details}</a>
            <a aria-hidden="true" ng-if="item.sys_class_name == 'sc_cat_item_content' && item.content_type == 'external'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" target="_blank" class="pull-left text-muted" tabindex="-1">${View Details}</a>
            <span ng-if="data.showPrices && item.hasPrice" class="pull-right item-price font-bold">{{::item.price}}</span> &nbsp;
          </div>
        </div>
      </div>
      </div>
    </div>

[smfoister]

Will this work the same if the requirement was just to show items in a specific category? I have a requirement to just be able to control what is listed by putting the item in a "Popular Items" category.