Portal diaries: Service Portal — Multiple Catalogs (Part 1)

dvp · ‎04-10-2017

In this article, I would like to discuss on how to display multiple catalogs in the service portal. We already know that OOB Service Portal supports only a single catalog, which is not a desired solution most of the clients are looking for. In order to support multiple catalogs, below are a couple solutions that I read.

Create a separate portal for each catalog or
Use the solution proposed by @Brett Karl which consolidates all the categories.

This is a solution that I came up with. Below is the screenshot showing all the catalogs

Screen Shot 2017-04-09 at 4.17.08 PM.png

For this, I started by creating a new page which shows all the catalogs that the user has access to. Once the user selects the catalog the next page (Catalog homepage) would display its related categories

Screen Shot 2017-04-09 at 4.17.48 PM.png

Catalog homepage

These are the list of customizations that need to be done in order to make it happen

Create a new page and a widget that shows all the catalogs
Update OOB SC categories, SC Category page and SC Popular items widgets to support multi catalog functionality
New catalog home page to show its related categories and items
Update sc_category page
Update Homepage Search and Typeahead search widgets to support search functionality for items in different catalogs.
Breadcrumbs

As there are many development tweaks to be done, I would like to break this article.

Today, lets tackle first one in the above bullet list, creating a multi catalog widget.

Here are the codes

HTML

<h1 class="font-thin m-t-none">{{::options.title}}</h1>
<div class="row" >         
   <div class="col-sm-6 col-md-4" ng-repeat="inc in data.catalogList">
       <div class="panel panel-default">
           <a ng-href="?id=sc_home2&catalog_sys_id={{inc.sysid}}" class="panel-body block">
               <div class="overflow-100">
                   <h4 class="m-t-none m-b-xs">{{::inc.title}}</h4>
                   <img ng-src="{{inc.picture}}" ng-if="inc.picture" class="m-r-sm m-b-sm inc-image pull-left" height="75" width="75" /> 
             <div class="text-muted inc-short-desc">{{::inc.description}}</div>
               </div>
           </a>
       </div>
   </div>
</div>

Server Code

(function() {
   /* populate the 'data' object */
   /* e.g., data.table = $sp.getValue('table'); */
data.catalogList = [];
var gr = new GlideRecordSecure('sc_catalog'); // enforeces acl operations
   gr.addQuery('active', true);
   gr.query();
   while(gr.next()){
   var temp = {};
   temp.title = gr.title.toString();
   temp.sysid = gr.sys_id.toString();
   temp.picture = gr.desktop_image.getDisplayValue(); 
   temp.description = gr.description.getDisplayValue();                     
   data.catalogList.push(temp);
   }
})();