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.
This is a solution that I came up with. Below is the screenshot showing all the catalogs
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
Catalog homepage
These are the list of customizations that need to be done in order to make it happen
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);
}
})();
After this widget is successfully created, create a page with id multi_catalog and drag the multi catalog widget in portal designer.
To make it easily accessible a header menu is created like the below image.
In the next part, I will explain how to display related categories of a catalog
Blogs in this series
Portal diaries: Service Portal — Making Rejection Comments Mandatory on Approval Record
Portal diaries: Service Portal — Approval Summarizer in Portal
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.