Adding Show/Hide Functions to Knowledge Articles in the Service Portal (Knowledge Article Content widget)

[Gregory Fox]

In order to make some of our support documents more usable, I recently wrote a little js script to add some display toggle functionality to a Knowledge Article template. I added it in a UI Script which I then included in the kb_view_customer UI Page. As you can see in the attached screenshot, the script allows the user to look at only the sections of the support document that they need at the time or to show and hide all of them.

The code works as desired, but the functionality is completely lost in the Service Portal which uses the Knowledge Article Content widget to display the article.

I've started working with a cloned copy of the widget, but I'm pretty new to AngularJS, and from the testing I've done so far, it doesn't seem possible to add any ng- notation to an article's HTML anyway (it all gets stripped away by the editor).  All I really need to be able to do is add some on-click functionality that edits the display property of sections of my article, but it seems to be just outside my current skillset.

Can anyone offer recommendations on what sort of code I might need to use to accomplish this? Or even on how to access elements of the knowledge article's HTML via the widget scripts? 

[Luuk Vonk]

Hi,

Don't know for sure, but maybe this will help you:

• https://docs.servicenow.com/bundle/geneva-servicenow-platform/page/administer/security/concept/c_HTM...
• https://docs.servicenow.com/bundle/london-platform-administration/page/administer/form-administratio...

Good luck with your solution.

Greetings,
Luuk

[Nirosha Uddandi]

Add code something like mentioned below before your heading quote

<a class="fasc" data-toggle="collapse" href="#request"  style="color:white;">
<span class="fas fa-plus"></span>
</a>
<script>
$(document).ready(function(){
$("#request").on("show.bs.collapse", function(){
$(".fasc").html('<span class="fas fa-minus"></span>');
});
$("#request").on("hide.bs.collapse", function(){
$(".fasc").html('<span class="fas fa-plus"></span>');
});
});
</script>

before panel body which you are getting display on click add below code

<div id = "request" class = "collapse">

[Alok Kumar2]

Hi Gregory,

You can get this working by making the below modifications to the widget:

in the html of the cloned version of the KB Article Page:

  <!--add the below html line-->
   <div class="pull-right">
     <button ng-click = "showFunct()">Show All</button>
     <button ng-click = "hideFunct()">Hide All</button>
   </div>
    <!--ends here-->
    <div ng-show="showFlag" >
    <div ng-if="!data.direct" class="kb_article" ng-bind-html="::data.text" style="overflow-x:auto;"></div>
    </div>

then in client controller, add the below two functions and the variable showFalg initialised as true when the page loads:

	$scope.showFlag = true;
	$scope.showFunct = function(){
		$scope.showFlag = true;
	};
	$scope.hideFunct = function(){
		$scope.showFlag = false;
	};

you will end up getting something something similar to this:

If you are confused about where to make changes in the html, then just replace the entire html with the below line:

<div ng-if="data.isvalid" class="panel panel-{{options.color}} b">

  <div class="panel-heading">
      <h2 class="panel-title h4">
          <span class="pull-left">{{::data.short_description}}</span>&nbsp;
          <span class="pull-right">{{::data.number}}</span>
      </h2>
  </div>

  <div class="panel-body m-b-lg wrapper-lg">

    <div class="row m-b-lg b-b">
        <span class="author pad-right" ng-if="data.author">
          <glyph sn-char="user" class="pad-right" />
          ${Authored by {{::data.author}}}
        </span>
        <span ng-if="data.sys_view_count == 1" class="views pad-right">
          <span class="pad-right">&#8226;</span> <glyph sn-char="eye-open" class="pad-right" />
          ${{{::data.sys_view_count}} View}
        </span>
        <span ng-if="data.sys_view_count > 1" class="views pad-right">
          <span class="pad-right">&#8226;</span> <glyph sn-char="eye-open" class="pad-right" />
          ${{{::data.sys_view_count}} Views}
        </span>
        <span class="published pad-right">
          <span class="pad-right">&#8226;</span> <glyph sn-char="calendar" class="pad-right" />
          <sn-day-ago date="data.publishedUtc"/>
        </span>
        <span ng-if="data.rating > 0 && !data.direct" title="{{::data.rating}} rating">
          <span class="pad-right">&#8226;</span> <uib-rating ng-model="::data.rating" max="5" readonly="true" aria-label="${Article rating} - ${Read Only}"/>
        </span>
    </div>
		
    <!--add the below html line-->
   <div class="pull-right">
     <button ng-click = "showFunct()">Show All</button>
     <button ng-click = "hideFunct()">Hide All</button>
   </div>
    <!--ends here-->
    <div ng-show="showFlag" >
    <div ng-if="!data.direct" class="kb_article" ng-bind-html="::data.text" style="overflow-x:auto;"></div>
    </div>
    
    <h4 ng-if="data.direct">
      ${View or download the attachments below}
    </h4>
    <div ng-if="::data.showAttachments || data.direct" class="b-t m-t">
      <sp-attachment-manager table="'kb_knowledge'" sys-id="::data.sys_id" omit-edit="true"></sp-attachment-manager>
    </div>

  </div>
</div>

<div ng-if="!data.isvalid">
  ${Article not found}
</div>

Note: Mark this answer as correct/helpful if this works so that it can be used by others as well

[Gregory Fox · Accepted solution]

Thanks for the several replies, but the problem was actually more complex and simpler than it seemed at first.  Complex because the functionality I wanted to add applied to a knowledge article, so I could not add any ng directives because the text editor strips them out. And adding my UI script which adds the functionality retroactively as a $scope function didn't work because it would get called before the html from the article had actually loaded in the widget.

The simple part of the solution we found was to call the UI script as a $timeout function, so it wouldn't be applied until after the article was present on the page. Had I been just slightly more experienced with angular services, I probably would have figured that out a lot quicker, but this has been a good learning experience.