
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-09-2017 12:53 AM
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
Solved! Go to Solution.
- Labels:
-
Service Portal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-23-2017 12:57 AM
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">•</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">•</span> <glyph sn-char="eye-open" class="pad-right" />
${{{::data.sys_view_count}} Views}
</span>
<span class="published pad-right">
<span class="pad-right">•</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">•</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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-25-2017 11:27 PM
Hey Gwen,
Can you please share the piece of code for landscape print .
Thanks,
Sherin Eipe
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-09-2017 12:14 PM
Hi,
I encountered two problems during implementation of the code provided above - 1. Images in the KB article not loading at all and not visible in the prints; 2. links to KB articles in the widgets in the same page do not work anymore. I did modify the code provided here to open a new window, wait till all the contents of the page are loaded and then rendering it for print. I'm posting it here in case, someone might find it useful.
<script>
function printDiv(divName) {
var printWindow = window.open();
printWindow.document.write('<html><head><title>' + document.title + '</title>');
printWindow.document.write(document.getElementById(divName).innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.onload = function() { printWindow.print(); printWindow.close()};
return true;
}
</script>
Thanks,
Darshak
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-17-2018 04:26 AM
Hi,
I have used your solution.
But the breadcumps do not work anymore, after printing. Do you have any idea?
Kind regards,
Martijn
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-18-2018 01:22 AM
Hi,
This solution was not intended to incorporate breadcrumbs in the printed area. You might have to write javascript code to get the breadcrumbs in your div & print it.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-18-2018 03:01 AM
Thanks for your answer.
Do you have an example? 🙂