Printing KB Article from Service Portal

Gwen Vanderhaeg
Kilo Expert

Hi Community!

I am looking for a solution to the following issue:
When end users try to print a KB article from our Service Portal the actual article (widget KB Article Page) gets cut.
You see the "slider" on the right hand side on your print, but of course the idea is to have the entire article printed.

I suppose this can be fixed by editing something in the CSS of this specific widget?


Else I would also find it acceptable to solve as follows:
Put a Link Button on the page with Print Icon and instead forward to "printer friendly" version of the page
kb_view.do?sysparm_article=KBXXXXX

But then in this scenario I don't know how to put the KB article number in the HREF box.  

Suggestions?

Thanks in advance!

Gwen

1 ACCEPTED SOLUTION

Hello Gwen,


I am pasting the HTML part for the copy of KB Article Widget here. You can remove the printdiv function from client controller part as i haved added it in HTML body itself.



This solution works for me.




<div id="printarea" >


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




  <div class="panel-heading">


      <h4 class="panel-title">{{::data.short_description}}<span class="pull-right">{{::data.number}}</span></h4>


  </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"/>


              </span>


      </div>




      <div ng-if="!data.direct" class="kb_article" ng-bind-html="::data.text" style="overflow-x:auto;"></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>


<div ng-if="!data.isvalid">


  ${Article not found}


</div>




  <a href="javascript:void(0)"   onclick="printDiv('printarea')"> <span class="glyphicon glyphicon-print"></span> Print</a>


<script>


 


  function printDiv(divName) {


        var printContents = document.getElementById(divName).innerHTML;


        var originalContents = document.body.innerHTML;


        document.body.innerHTML = printContents;


        window.print();


        document.body.innerHTML = originalContents;


}


 


</script>




Please mark it correct if this resolves your concern.



Screenshot.png




find_real_file.png


View solution in original post

24 REPLIES 24

Let me work on it & will give you one if that turns out to be working.

Thanks

Gaurav

Hi Gaurav,

Will this work in Kingston? I have tried the suggested solution and printer icon does not show up in portal. Any advise.

Thanks in advance.

Ramel

Hi Ramel,

This should work in Kingston as well.

Try adding this line of HTML alone in your widget & see if that comes up or not?

<a href="javascript:void(0)"   onclick="printDiv('printarea')"> <span class="glyphicon glyphicon-print"></span> Print</a>

Please mark it correct/helpful based on the response.

Thanks
Gaurav

Thanks for the response Gaurav.

I have added the html code alone in my cloned KB Article Page widget and still no printer icon shown in the KB article page. Do you still have any other suggestions to fix it.

<a href="javascript:void(0)"   onclick="printDiv('printarea')"> <span class="glyphicon glyphicon-print"></span> Print</a>

Thanks and regards,

Ramel

Hi Gaurav,

Does it have something to do with the included pages when I clone the widget? It appears that the cloned widget does not have the 'Included in Pages' list.

 

find_real_file.png

The original widget has the 'Included in Pages', but I cannot simply add that as there is no 'Edit' option, only 'adding 'New'

find_real_file.png

Thanks.