How to get the KB Category Page widget to sort the Knowledge Articles based on the Short Description

jlaue · ‎04-17-2018

Hello -

When I use the KB - Categories - KBv3 Widget in Service Portal and click on a specific Knowledge Base category, it appears to be sorting the articles on the articles category, on the KB Category Page widget. I was wondering if there was a way that I could get these articles to sort/order on the Short Description of the Knowledge Article instead of the current way it is sorting.

I am not sure if this sort is controlled in the KB Categories - KBv3 widget or if it is happening in the KB Category Page widget, and how I can update this. The SC Categories widget and SC Category Page widget are properly sorting on the name of the Catalog Item, I was hoping to achieve a similar result with the KB widgets.

Thanks!

Jack · ‎05-15-2018

Hi @jlaue,

This is my way:

Clone KB Category Page widget (example: KB Category Page v1.0)

Update HTML code as below:

<div>
  <div ng-if="data.categoryExists" class="panel panel-{{::options.color}} b">
    <div class="panel-heading">
      <h2 class="panel-title">{{data.categoryDisplay}}</h2>
    </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 : 'title'" 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>

Note: my idea is using orderBy of AngularJS
<div role="listitem" ng-repeat="kb_article in data.items | orderBy : 'title'" class="sp-kb-topic-article m-b-lg">

Go to kb_category page and replace OOB widget by new widget

And this is the result.

Hope this will help.

View solution in original post

jlaue · ‎04-26-2018

Hello - was hoping someone could help with this.