Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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

jlaue
Mega Sage

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!

1 ACCEPTED SOLUTION

Jack
Tera Guru

Hi @jlaue,

This is my way:

  1. Clone KB Category Page widget (example: KB Category Page v1.0)
  2. 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">

  3. 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

16 REPLIES 16

atlsdrew
Kilo Contributor

Thank you for providing the scrip and solution.  This also helped me.  What modifications to the script would I need to make if I wanted to filter by created by date? 

Carl Fransen1
Kilo Sage

The field you refer to is 'sys_created_on' so just replace 'title' with 'sys_created_on'....  Haven't tested it but no reason why it shouldn't work.

Carl - Thank for the reply and assistance, but can you clarify if I update the Client Controller' script you provided or the HTML code?  I've tried both and still struggling.  The HTML script solved the issue I have with sorting by short description, but I have a widget instance to where I need to sort by created by date. 

Oh, and I'm no scripting or coding expert, so please forgive my ignorance.  

I'd love to help but I'm also not the best coder and had assistance from a web team in-house with my solution.  I think the issue is because the fields types are different (String vs date) and Jack has indicated in his solution that this could be an issue.

@Jack - would you be able to assist with this query - to sort by 'sys_created_on' date...?

 

Thanks

Carl.

Hi @Cart and @atlsdrew,

 

I think we cannot sort by "sys_created_on", because the item object hasn't contained this field.

find_real_file.png

So, I assume we will sort list by "published" field (Date type). And this is my way (follow my post above):

  1. Update sortArticles() method (server-script):
    function sortArticles(arr, field, desc) {
        try {
            //sort for date type (published)
            if (field == "published") {
                arr.sort(function (a, b) {
    				
    		var dateA = new GlideDate(); 
    		dateA.setDisplayValue(a[field]); 
    		var dateB = new GlideDate(); 
    		dateB.setDisplayValue(b[field]);
    
                    if (desc) {
                        return GlideDate.subtract(dateA, dateB).getDayPart();
                    }else{
                        return GlideDate.subtract(dateB, dateA).getDayPart();
                    }
                });
    
            } else { //sort for normal type            
                arr.sort(function (a, b) {
                    var compare = a[field].localeCompare(b[field]);
                    if (desc) {
                        if (compare == 1) {
                            compare = -1;
                        } else {
                            compare = 1;
                        }
                    }
                    return compare;
                });
    
            }
    
        } catch (err) {
            console.log("***ERROR: " + err);
        }
        return arr;
    }
    ​
  2. Update instance options
    {
      "sortBy":"published",
      "sortDesc":"false"
    }​


  3. This is the result
    find_real_file.png

Hope this will help.