Add sort option on Service Portal for knowledge

[vkhair]

I want to add sort option on Service Portal for knowledge like backend. Can someone help with this?

[Jace Benson]

Cause I hate downloading the files I'll inline them for you;

Backend

Portal;

[Alok Kumar2 · Accepted solution]

Hello,

You can achieve this after making a clone of the OOB KB Category Page widget. All you need to do is to do some changes to your HTML code of the cloned widget and the cloned widget to this page. You can use the below HTML code on your widget:

<div>
<div ng-if="data.categoryExists" class="panel panel-{{::options.color}} b">
<div class="panel-heading">
<div class="row">
<div class="col-md-9">
<h2 class="panel-title">{{data.categoryDisplay}} 
</h2></div>
<div class="col-md-3" >
<div class="row">Sort By :
<select ng-model="sortName">
<option value="">Select Option</option>
<option value="sys_view_count">Views</option>
<option value="sys_updated_on">Last Updated</option>
</select>
</div> 
</div> 
</div> 
</div>
<div role="list" class="panel-body">
<div ng-if="data.items.length == 0">
(${No articles})
</div>
<div role="listitem" ng-repeat="kb_article in data.items | orderBy:sortName:true" class="sp-kb-topic-article m-b-lg">
<a ng-href="?id=kb_article&sys_id={{::kb_article.sys_id}}">{{::kb_article.title}}</a>
<div style="max-height: 3em; overflow: hidden; padding-top:4px;" aria-label="{{::c.getShortenText(kb_article.text)}}">{{::kb_article.text}}</div>
<div class="kb-about" style="padding-top:4px;">
<span class="about-outer-span">
<span class="author pad-right" ng-if="kb_article.author">
<glyph sn-char="user" class="pad-right" aria-hidden="true"/>
${Authored by {{::kb_article.author}}}
</span>
<span ng-if="kb_article.sys_view_count == 1" class="views pad-right">
<span class="pad-right">&#8226;</span> <glyph sn-char="eye-open" class="pad-right" />
${{{::kb_article.sys_view_count}} View}
</span>
<span ng-if="kb_article.sys_view_count > 1" class="views pad-right">
<span class="pad-right">&#8226;</span> <glyph sn-char="eye-open" class="pad-right" />
${{{::kb_article.sys_view_count}} Views}
</span>
<span class="published pad-right">
<span class="pad-right" aria-hidden="true">&#8226;</span> <glyph sn-char="calendar" class="pad-right" aria-hidden="true" />
<sn-day-ago date="kb_article.published"/>
</span>
<span ng-if="data.showStarRating && kb_article.rating">
<span class="pad-right">&#8226;</span> <uib-rating ng-model="::kb_article.rating" max="5" readonly="true" aria-label="${Article rating} - ${Read Only}"/>
</span>
</span>
</div>
</div>
</div>

</div>

</div>

What it does is adds a select box at the right corner of the panel-header and then based on the selected value(views and last updated on) sort the data.items aray using the orderBy of angularJS. You can add more options on the dropdown.

Refer the screenshots with output achieved by making these changes.

Please mark it correct or helpful if it works!!

[Jace Benson]

Please use the editor so your code looks like this

[shivaprasad1]

Hi Alok,

I have used above script to sort the List. It worked for me.

I have one issue when I sort the list with alphabetical order ie it is sorting in (Z-A) format not with (A-Z).

Please suggest me how to fix this.

I have used below script to sort the list with alphabetical order:

 <option value="short_description">Alpha</option>

Thanks and Regards,

Shivaprasad K N