Printing KB Article from Service Portal

[Gwen Vanderhaeg]

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

[Gaurav Bajaj]

Hello,

You can add a href like this or a button calling the printDiv Method

<a href="#"   onclick="printDiv('printarea')"> <span class="glyphicon glyphicon-print"></span> Print</a>

and then you can write below code in client 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;

}

where printDiv is the Div under which your content for KB article is present inculding short description and the body part.

<div id="printDiv" >

// your body of KB article

</div>

I have this working on CMS as well as Service Portal for custom widget.

Please let me know if this helps.

Thanks

Gaurav

[Gwen Vanderhaeg]

Hi Gaurav,

Thanks for your response. I haven't gotten it to work yet though.

Just to make sure I'm understanding your instructions correctly:

I made a copy of the KB Article Widget since original can't be edited.
Here I added at the bottom if the HTML:

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

Since href="#" was not accepted.

The function printdiv I pasted underneath what already existed in "Client Controller"

The Printdiv Start/End I added in the HTML (top and bottom).

When clicking the button nothing happens though.
So i'm guessing i'm putting some part in the wrong place.

thanks!

Gwen

[Gaurav Bajaj · 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.

[Gwen Vanderhaeg]

Thanks Gaurav, works

I noticed however that now the "width" is not 100% printing, but I've edited the button to add a "Best practice"-tip to print in Layout Landscape.
That should do fine.