Hello,
I am trying to refill the following requirement:
- Add new option named 'Print Article' under the Actions feature on the kb article in the Service Portal.
Is this possible? If yes, please let me know the best way to achieve it, ideally with step by step instructions.
Thanks,
Cyn
1 ACCEPTED SOLUTION
Harsh,
Thank you for responding. I tested the solution and it got me close to the desired outcome. However, I am looking for a way to print only the article details\content and exclude the other information on the webpage.
@cynlink1 You can try using below scripts.
HTML
<div class="kb-article-wrapper">
<div ng-if="data.versionWarningMessage && c.options.show_version_info != 'false'" class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div ng-bind-html="data.versionWarningMessage">
</div>
</div>
<div ng-if="c.data.replacementArticleId" class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div ng-bind-html="c.data.replacementAlert">
</div>
</div>
<div ng-if="::data.isValid" ng-class="{'kb-mobile' : c.isMobile, 'panel panel-default kb-desktop' : !c.isMobile, 'mesp-ui' : c.data.isMESP}">
<div class="kb-panel-heading" ng-class="{'panel-heading' : !c.isMobile}">
<span ng-class="{'panel-title' : !c.isMobile}">
<div class="row">
<span class="col-md-5 kb-panel-title-header">
<div class="kb-number-info">
<span>{{data.number}}</span>
<span ng-if="data.isKBAdmin && data.isArticleExpired">${(Expired)}</span>
<span ng-if="!c.isMobile && data.showHistory && c.options.show_version_info != 'false'"> -
<div class="dropdown inline" role="list">
<button id="kbVersionButton" aria-expanded="{{!c.showVersions}}" class="btn btn-default kb-version dropdown-toggle kb-dropdown-button transparent-button" data-toggle="dropdown" ng-click="c.toggleVersions()" aria-label="{{data.versionInfoLabel}}"> {{data.versionInfo}}
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<span ng-if="!c.isMobile && data.workflowState">{{data.workflowState}}</span>
<ul id="kbVersionMenuList" class="dropdown-menu dropdown-menu-left version-menu-list">
<li class="kb-version" ng-repeat="version in data.versionList">
<a ng-if="!version.isCurrent && data.viewAsUser.length == 0" href="?id=kb_article_view&sys_kb_id={{version.sysId}}"
aria-label="${{{version.versionLabel}} - {{version.versionText}}}">{{version.versionNumber}} - {{version.versionText}}</a>
<a ng-if="!version.isCurrent && data.viewAsUser.length > 0" href="?id=kb_article_view&sys_kb_id={{version.sysId}}&view_as_user={{data.viewAsUser}}"
aria-label="${{{version.versionLabel}} - {{version.versionText}}}">{{version.versionNumber}} - {{version.versionText}}</a>
<span ng-if="version.isCurrent"><b>{{version.versionNumber}} - {{version.versionText}}</b></span>
</li>
</ul>
</div>
</span>
</div>
</span>
<div ng-if="!c.isMobile && !$root.hideFeedbackOptions && c.options.hide_all_actions != 'true'" class="col-md-7 kb-end-buttons">
<div class="dropdown kb-end-buttons">
<span class="pull-left">
<sp-widget widget="data.favoriteWidget"></sp-widget>
</span>
<span class="hidden-sm hidden-xs" ng-if="!data.externalArticle">
<button ng-mouseover="c.handleSubscribeButtonFocus()"
ng-if="data.properties.isSubscriptionEnabled"
ng-mouseleave="c.handleSubscribeButtonBlur()"
ng-focus="c.handleSubscribeButtonFocus()"
ng-blur="c.handleSubscribeButtonBlur()"
class="btn btn-default kb-subscribe kb-sub-icon apply-brand-color" ng-click="c.handleSubscription()">
{{data.subscribeLabel}}
</button>
</span>
<button ng-if="c.showAttachArticle()" class="btn btn-default" type="button" ng-click="c.attachToTask()" aria-label="{{::data.messages.ATTACH_TO_TASK_LABEL}}">{{::data.messages.ATTACH_TO_TASK_LABEL}}</button>
<button id="actionMenuLabel" ng-if="c.showActionMenu() && !$root.readOnly"
class="btn btn-default dropdown-toggle kb-dropdown-button more-actions-menu apply-brand-color" type="button" data-toggle="dropdown" aria-label="{{::data.messages.ACTION_MENU}}">
{{::data.messages.ACTION_MENU_LABEL}}
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<ul id="kbActionMenuList" class="dropdown-menu dropdown-menu-right moreActionsMenuList">
<li class="kb-menu-entry hidden-md hidden-lg visible-sm visible-xs" ng-if="data.properties.isSubscriptionEnabled && !data.externalArticle">
<a ng-mouseover="c.handleSubscribeButtonFocus()"
ng-if="data.properties.isSubscriptionEnabled && c.options.hide_subscription != 'true'"
ng-mouseleave="c.handleSubscribeButtonBlur()"
ng-focus="c.handleSubscribeButtonFocus()"
ng-blur="c.handleSubscribeButtonBlur()"
href="javascript:void(6)"
ng-click="c.handleSubscription()">
<span class="kb-sub-icon" aria-label="{{data.subscribeLabel}}">
{{data.subscribeLabel}}
</span>
</a>
</li>
<li class="kb-menu-entry" ng-if="c.showFlagArticle"><a id="flagArticleButton" href="javascript:void(1)" data-toggle="modal" ng-click="c.launchFlagModal($event)">{{data.messages.FLAG_ARTICLE}}</a></li>
<li class="kb-menu-entry" ng-if="c.showCreateIncident"><a target="_blank" href="{{c.createIncidentURL}}">{{c.createIncidentLabel}}</a></li>
<li class="kb-menu-entry" ng-if="data.properties.isEditable" ><a target="_blank" href="{{c.editUrl}}">{{data.messages.EDIT}}</a></li>
<li class="kb-menu-entry" ng-if="data.kbDocSysId"><a target="_blank" href="sys_attachment.do?sys_id={{data.kbDocSysId}}">{{data.messages.DOWNLOAD_DOCUMENT}}</a></li>
<li class="kb-menu-entry"><a ng-click="c.printArticle('myPrint')">Print</a></li>
</ul>
</div>
<!-- Flag article modal -->
</div>
</div>
</span>
</div>
<div id="myPrint">
<div class="kb-wrapper" ng-class="c.isMobile ? 'kb-mobile' : 'panel-body kb-desktop'">
<h1 class="widget-header kb-title-header">{{::data.shortDesc}}</h1>
<div class="kb-language-block pad-right text-nowrap" ng-if="data.langList.length > 1" ng-cloak>
<div class="kb-language">
<div class="dropdown">
<button class="dropdown-toggle transparent-button trim-padding-right kb-lang-dropdown-btn" aria-label="${Language: {{c.selectedLanguage.label}}}. Select to choose other available languages to view this article." aria-haspopup="true" data-toggle="dropdown">
<span class="lang-icon" aria-hidden="true"><i class="fa fa-globe"></i></span>
<span class="lang-data" ng-class="{'hidden-xs':!c.isMobile}">${{{c.selectedLanguage.label}}}</span>
</button>
<ul class="dropdown-menu dd-right-menu" role="list">
<li ng-repeat="item in data.langList" role="listitem">
<a ng-click="c.selectLanguage($index)">${{{item.label}}}</a>
</li>
</ul>
</div>
</div>
</div>
<div class="title-secondary-data">
<span ng-if="!c.isMobile" class="sr-only">Article metadata.</span>
<span ng-if="data.revisionString" class="author pad-right text-nowrap">
<span ng-if="!c.isMobile && data.langList.length > 1" class="pad-right" aria-hidden="true">•</span>
<i class="fa fa-user pad-right" aria-hidden="true"/>
{{data.revisionString}}
</span>
<span ng-if="!c.isMobile && data.externalArticle" class="pad-right text-nowrap">
{{data.messages.EXTERNAL_CONTENT}}
</span>
<br class="visible-xs" aria-hidden="true"/>
<div class="published published-date pad-right text-nowrap">
<span class="sr-only">This article was updated</span>
<span class="pad-right hidden-xs" ng-if="!c.isMobile" aria-hidden="true">•</span> <i class="fa fa-calendar pad-right" aria-hidden="true"/>
<sn-time-ago timestamp="data.sys_updated_on"/>
</div>
<span ng-if="data.viewCount == 1" class="views pad-right text-nowrap">
<span class="sr-only">This article has {{::data.viewCount}} view.</span>
<span class="pad-right" aria-hidden="true">•</span> <i class="fa fa-eye pad-right" aria-hidden="true"/>
<span aria-hidden="true">${{{::data.viewCount}} View}</span>
</span>
<span ng-if="data.viewCount > 1" class="views pad-right text-nowrap">
<span class="sr-only">This article has {{::data.viewCount}} views.</span>
<span class="pad-right" aria-hidden="true">•</span> <i class="fa fa-eye pad-right" aria-hidden="true"/>
<span aria-hidden="true">${{{::data.viewCount}} Views}</span>
</span>
<span class="text-nowrap str-rating" ng-if="data.properties.showKBStarRating && data.properties.showKBRatingOptions && data.avgRating >= 0">
<span class="sr-only">${This article has average rating: {{::data.avgRating}} out of 5 stars}</span>
<span class="pad-right" aria-hidden="true">•</span>
<span class="kb-rating-stars" ng-if="::c.KBRatingStyle" aria-hidden="true">
<uib-rating sp-rating ng-model="::data.avgRating" max="5" aria-label="{{::data.messages.ARTICLE_RATING}}" readonly="true"/>
</span>
<span class="sp-stars" ng-if="!c.KBRatingStyle" aria-hidden="true">
<span uib-rating sp-rating ng-model="::data.avgRating" max="5" readonly="true" aria-label="{{::data.messages.ARTICLE_RATING}}" state-on="'fa fa-star kb-star-on'" state-off="'fa fa-star kb-star-off'" />
</span>
</span> 
<span ng-if="data.viewCount > 1" class="views pad-right text-nowrap">
<span aria-hidden="true">Word Count: {{c.data.wordCount}}</span>
</span>
</div>
<div class="row community-attribution" ng-if="!c.isMobile && data.hInfo">
<div class="contributor pad-right" ng-if="data.hInfo.contributor && data.hInfo.contributor.userId">
<i class="fa fa-globe" aria-hidden="true"></i>
<span class="pad-lr pad-right" ng-bind-html="data.hInfo.profileMessage"></span>
<span class="discussion-published pad-right pre-bullet-icon text-nowrap" ng-if="data.hInfo.postedOn">
${Posted}<sn-day-ago date="data.hInfo.postedOn"/>
</span>
<span class="discussion-link pad-right pre-bullet-icon text-nowrap" ng-if="data.hInfo.title">
<a href="?id=community_question&sys_id={{data.hInfo.sourceRoot}}" target="_blank_cm1">${Link to Discussion}</a>
</span>
</div>
</div>
<div ng-if="c.isMobile && !c.isAgentApp" class="kb-favorite" ng-click="toggleFavorite($event)">
<sp-widget widget="data.favoriteWidget"></sp-widget>
<span ng-if = "showFavorite">
<span class="favorite-text" ng-if="isFavorite === true">${Favorited}</span>
<span class="favorite-text" ng-if="isFavorite === false">${Favorite}</span>
</span>
</div>
<hr class="kb-header-line" aria-hidden="true"/>
<article class="kb-article-content" ng-if="::data.articleType != 'wiki'">
<section ng-if="::!c.data.kbContentData.isTemplate" ng-bind-html="::c.data.kbContentData.data" ng-class="{'word-addin-mobile' : c.data.wordOnlineUrl && c.data.wordOnlineUrl.length>0}"/>
<section ng-if="::c.data.kbContentData.isTemplate" ng-repeat="field in c.data.kbContentData.data track by $index" ng-attr-style="{{field.field_style}}">
<h3 ng-if="::!field.collapsible" ng-attr-style="{{field.heading_style}}">{{field.label}}</h3>
<header class="collapsible-title" ng-if="::field.collapsible">
<h3 ng-attr-style="{{::field.heading_style}}">
<button aria-expanded="{{!field.collapsed}}"
aria-controls="{{::field.column}}"
class="transparent-button accordion-trigger"
ng-click="c.toggleSection(field)">
{{field.label}}
<i class="fa fa-chevron-up rotate" ng-class="{'down': field.collapsed}" aria-hidden="true"/>
</button>
</h3>
</header>
<p id="{{::field.column}}" ng-if="::field.type != 'html' && field.collapsed" style="display:none;">{{field.content}}</p>
<p id="{{::field.column}}" ng-if="::field.type != 'html' && !field.collapsed">{{field.content}}</p>
<section id="{{::field.column}}" ng-if="::field.type == 'html' && field.collapsed" style="display:none;" ng-bind-html="::field.content"/>
<section id="{{::field.column}}" ng-if="::field.type == 'html' && !field.collapsed" ng-bind-html="::field.content"/>
</section>
</article>
<article class="kb-article-content" ng-if="::data.articleType == 'wiki'" ng-bind-html="::data.kbWiki"></article>
<hr class="kb-permalink-separator" ng-if="::!c.isMobile" aria-hidden="true"/>
<p class="pull-right kb-permalink" ng-if="::!c.isMobile">
<button class="transparent-button" ng-click="c.copyPermalink()">{{::data.messages.COPY_PERMALINK}}</button>
</p>
</div>
</div>
<div ng-if="!data.isValid && !data.knowledgeExists" class="col-sm-12 panel-danger">
<div class="panel-heading">{{data.messages.RECORD_NOT_FOUND}}</div>
</div>
<div ng-if="!data.isValid && data.knowledgeExists && !data.isArticleExpired" class="col-sm-12 panel-warning">
<div class="panel-heading kb-font-color-black">{{data.messages.INSUFFICIENT_PREVILEGES}}</div>
</div>
<div ng-if="!data.isKBAdmin && data.isArticleExpired" class="col-sm-12 panel-warning">
<div class="panel-heading kb-font-color-black">{{data.messages.ARTICLE_EXPIRED}}</div>
</div>
</div>
</div>
<style>
#uiNotificationContainer{
top : 10px;
}
.kb-article-wrapper .kb-desktop .kb-panel-title-header{
padding-left: 25px;
}
.kb-article-wrapper .app-modal-window .modal-dialog {
margin-top: 110px;
}
.kb-article-wrapper .kb-mobile{
letter-spacing: .6px;
}
.kb-article-wrapper .kb-mobile .title-secondary-data{
word-spacing:1px;
}
.kb-article-wrapper .kb-mobile .author{
margin-bottom: 17px;
}
.kb-article-content dl {
margin-top: .2em;
margin-bottom: .5em;
}
.kb-article-content dd {
line-height: 1.5em;
margin-left: 2em;
margin-bottom: .1em;
}
@media only screen and (max-width :992px){
.kb-article-wrapper .kb-desktop{
margin-top:15px;
}
.kb-article-wrapper .kb-wrapper{
padding : 10px !important;
}
.kb-article-wrapper .kb-menu-entry{
padding-top: 2px;
padding-bottom: 2px;
}
.kb-article-wrapper .kb-version-info{
margin-top : 5px !important;
}
.kb-article-wrapper .kb-desktop .kb-number-info{
margin-top : 6px !important;
padding-left: 10px;
}
.kb-article-wrapper .kb-mobile .kb-panel-title-header{
padding-left: 16px;
}
.kb-article-wrapper .kb-desktop .kb-panel-title-header{
padding-left: 0px;
}
}
@media only screen and (max-width :768px){
.kb-article-wrapper .right-col-padding{
padding-left : 25px !important;
}
}
@media only screen and (max-width: 750px) {
.kb-article-wrapper .kb-mobile .author{
margin-bottom: 0px;
}
}
@media only screen and (min-width: 992px) {
.kb-article-wrapper .app-modal-window .modal-dialog {
width: 750px;
}
.kb-article-wrapper .control-label{
float :right;
}
.kb-article-wrapper .left-col-padding{
padding-right : 30px !important;
}
.kb-article-wrapper .right-col-padding{
padding-left : 5px !important;
}
}
@media only screen and (min-width:768px) and (max-width: 992px) {
.kb-article-wrapper .app-modal-window .modal-dialog {
width: 600px;
}
.kb-article-wrapper .control-label{
float :right;
}
.kb-article-wrapper .left-col-padding{
padding-right : 5px !important;
}
.kb-article-wrapper .right-col-padding{
padding-left : 5px !important;
}
}
@media only screen and (max-width: 400px) {
.pad-right{
padding-right:0px !important;
}
}
@media only screen and (max-width: 376px) {
.kb-article-wrapper .kb-mobile{
letter-spacing: 0px;
}
.kb-article-wrapper .kb-mobile .title-secondary-data{
word-spacing:0px;
}
.kb-article-wrapper .kb-mobile .title-secondary-data .str-rating{
margin-top: 17px;
display: block;
}
.kb-article-wrapper .kb-mobile .title-secondary-data .str-rating .pad-right{
display: none;
}
}
/*Versions dropdown screen width adjustment*/
@media only screen and (min-width: 500px) {
.version-menu-list li,.version-menu-list{
font-size: 14px !important;
margin: auto;
min-width: 410px !important;
}
.version-menu-list li a,.version-menu-list li span{
display:block;
padding: 3px 10px !important;
white-space: normal !important;
}
}
@media only screen and (max-width: 500px) {
.version-menu-list li,.version-menu-list{
font-size: 14px !important;
margin: auto;
min-width: 200px !important;
width:100% !important;
}
.version-menu-list li a, .version-menu-list li span{
display:block;
padding: 3px 10px !important;
white-space: normal !important;
}
}
}
</style>
Client Controller Script:
function($rootScope, $scope, $window, $timeout, spUtil, $sce, spModal, $uibModal, $location, cabrillo, snAnalytics) {
/* widget controller */
var c = this;
if (c.data.redirect) {
var id = $location.search().sys_kb_id ? 'sys_kb_id' : 'sys_id';
if ($location.search()[id] && $location.search()[id] !== c.data.redirect) {
$location.state({
addSPA: true
});
$location.search('spa', 1);
$location.search(id, c.data.redirect);
$location.replace();
}
}
c.printArticle = function(myID) {
var printContents = document.getElementById(myID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
window.location.reload();
}
if (c.data.replacementArticleId) {
var queryParameters = $location.search();
var articleIdentifier = queryParameters.hasOwnProperty('sys_kb_id') ? 'sys_kb_id' : queryParameters.hasOwnProperty('sysparm_article') ? 'sysparm_article' : 'sys_id';
if (queryParameters[articleIdentifier] !== c.data.replacementArticleId) {
$location.state({
addSPA: true
});
$location.search('spa', 1);
$location.search(articleIdentifier, c.data.replacementArticleId);
$location.replace();
}
if (c.data.page_title && c.data.page_title != $window.document.title) {
$window.document.title = c.data.page_title;
}
}
$window.onpopstate = function(e) {
if (e && e.state && e.state.addSPA) {
$location.search('spa', null);
$location.replace();
}
};
if (c.data.isValid) {
if (c.data.kbContentData && c.data.kbContentData.isTemplate) {
//alert(c.data.kbContentData.data);
c.data.kbContentData.data.forEach(function(field) {
if (field.type == 'html')
field.content = $sce.trustAsHtml(field.content);
//alert(field.content);
});
if (c.data.articleType === 'wiki') {
c.data.kbWiki = $sce.trustAsHtml(c.data.kbWiki);
//alert(c.data.kbWiki);
}
} else if (c.data.articleType === 'wiki') {
c.data.kbWiki = $sce.trustAsHtml(c.data.kbWiki);
//alert(c.data.kbWiki);
} else {
c.data.kbContentData.data = $sce.trustAsHtml(c.data.kbContentData.data);
c.data.wordCount = c.data.kbContentData.data.toString().replace(/(<([^>]+)>)/ig, '').split(' ').length;
}
}
$scope.submitted = false;
c.flagMessage = null;
$timeout(function() {
$rootScope.$broadcast("sp.update.breadcrumbs", $scope.data.breadCrumb);
});
$rootScope.properties = $scope.data.properties;
$rootScope.messages = $scope.data.messages;
$rootScope.isValid = c.data.isValid;
$rootScope.isKBAdmin = $scope.data.isKBAdmin;
$rootScope.isKBOwner = $scope.data.isKBOwner;
$rootScope.article_sys_id = $scope.data.article_sys_id;
$rootScope.attachments = $scope.data.attachments;
$rootScope.attachedIncidents = $scope.data.attachedIncidents;
$rootScope.affectedProducts = $scope.data.affectedProducts;
$rootScope.displayAttachments = $scope.data.displayAttachments;
$rootScope.hideFeedbackOptions = $scope.data.hideFeedbackOptions;
$rootScope.helpfulContent = $scope.data.helpfulContent;
$rootScope.tableName = $scope.data.tableName;
$rootScope.hasComments = $scope.data.hasComments;
$scope.data.isSubscribed = $scope.data.isArticleSubscribed || $scope.data.isArticleSubscribedAtKB;
$scope.data.subscribeLabel = ($scope.data.isSubscribed ? $scope.data.messages.SUBSCRIBED : $scope.data.messages.SUBSCRIBE);
c.createIncidentURL = c.options.create_task_url || ($scope.data.properties && $scope.data.properties.createIncidentURL);
c.createIncidentLabel = c.options.create_task_prompt || $scope.data.messages.CREATE_INCIDENT;
c.showCreateIncident = c.data.isLoggedInUser && c.options.show_create_incident_action != 'false' && c.data.properties && c.data.properties.showKBCreateIncident && c.createIncidentURL;
c.showFlagArticle = c.data.properties && c.data.properties.showKBFlagArticle && c.data.properties.showRatingOptions;
c.showMenu = c.data.properties && (c.showFlagArticle || c.data.properties.isEditable || c.showCreateIncident);
$rootScope.stackUrl = window.location.pathname + '?id=' + c.data.params.sysparm_article_view_page_id + '%26' + (c.data.params.sysparm_article ? 'sysparm_article=' + c.data.params.sysparm_article : 'sys_kb_id=' + c.data.params.sys_kb_id);
c.stackUrl = $rootScope.stackUrl;
c.flagMessage = '';
c.task = {};
c.imageInstance = '';
$scope.data.toggleSubscribed = ($scope.data.isSubscribed ? true : false);
c.reasons = c.data.feedback_reasons;
c.data.reason = '4';
c.imageInstance = '';
c.minImageHeight = parseInt(c.options.min_image_height) || 100;
c.minImageWidth = parseInt(c.options.min_image_width) || 185;
c.readOnly = false;
c.isMobile = spUtil.isMobile() || cabrillo.isNative();
c.isAgentApp = navigator.userAgent.indexOf('Agent') > -1;
c.editUrl = c.data.wordOnlineUrl || 'kb_knowledge.do?sys_id=' + c.data.article_sys_id + '&sysparm_stack=' + c.stackUrl;
//Use KB specific stylic for all portals unless rating style is set
c.KBRatingStyle = c.options.kb_rating_style;
if (c.data.langList && c.data.langList.length > 1) {
for (var lng in c.data.langList) {
if (c.data.langList[lng].selected == true) {
c.selectedLanguage = c.data.langList[lng];
break;
}
}
}
var payload = {};
payload.name = "View Knowledge Article";
payload.data = {};
payload.data["Article Title"] = c.data.shortDesc;
payload.data["Article SysID"] = c.data.article_sys_id;
payload.data["Language"] = c.selectedLanguage || "en";
snAnalytics.addEvent(payload);
populateBreadCrumbURLs();
function populateBreadCrumbURLs() {
if (c.data.breadCrumb) {
if (c.data.breadCrumb[0].type == 'kb_knowledge_base') {
if (c.data.showKbHomeLink && c.data.kb_knowledge_page != 'kb_search') {
c.data.breadCrumb[0].url = '?id=' + c.data.kb_knowledge_page + '&kb_id=' + c.data.breadCrumb[0].values.kb_knowledge_base;
} else {
c.data.breadCrumb[0].url = '?id=kb_search&kb_knowledge_base=' + c.data.breadCrumb[0].values.kb_knowledge_base;
}
}
for (var i = 1; i < c.data.breadCrumb.length; i++) {
if (c.data.breadCrumb[i].type == 'kb_category') {
if (c.data.showKbHomeLink && c.data.kb_knowledge_page != 'kb_search') {
if (c.data.breadCrumb[i].values.kb_category == "NULL_VALUE") {
c.data.breadCrumb.splice(i, 1);
} else {
c.data.breadCrumb[i].url = '?id=kb_category&kb_id=' + c.data.breadCrumb[i].values.kb_knowledge_base + '&kb_category=' + c.data.breadCrumb[i].values.kb_category;
}
} else {
c.data.breadCrumb[i].url = '?id=kb_search&kb_knowledge_base=' + c.data.breadCrumb[i].values.kb_knowledge_base + '&kb_category=' + c.data.breadCrumb[i].values.kb_category;
}
}
}
}
}
var shouldSetTitle = c.data.params.sysparm_language && (c.data.number != c.data.params.sysparm_article);
if (c.options.set_page_title != 'false' || shouldSetTitle) {
if (c.data.page_title) {
// setting default page title for supporting km seo
$window.document.title = c.data.page_title;
var metaTag = $('meta[custom-tag][name="description"]')[0];
if (metaTag)
metaTag.content = c.data.meta_tag;
}
}
c.showVersions = false;
c.toggleVersions = function() {
c.showVersions = !c.showVersions;
};
c.selectLanguage = function(ind) {
var viewAsUser = "";
if (c.data.params.view_as_user.length > 0)
viewAsUser = "&view_as_user=" + c.data.params.view_as_user;
$window.location.replace('?id=' + c.data.params.sysparm_article_view_page_id + '&sys_kb_id=' + c.data.langList[ind].sys_id + viewAsUser);
};
c.showActionMenu = function() {
if (c.showMenu) {
return true;
} else {
if (c.data.properties && c.data.properties.isSubscriptionEnabled && $window.innerWidth < 992)
return true;
else
return false;
}
}
c.toggleSection = function(field) {
field.collapsed = !field.collapsed;
$('#' + field.column).slideToggle("fast");
};
c.handleSubscribeButtonFocus = function() {
if ($scope.data.isSubscribed) {
$scope.data.subscribeLabel = $rootScope.messages.UNSUBSCRIBE;
$scope.data.toggleSubscribed = !$scope.data.toggleSubscribed;
}
};
c.handleSubscribeButtonBlur = function() {
if ($scope.data.isSubscribed) {
$scope.data.subscribeLabel = $rootScope.messages.SUBSCRIBED;
$scope.data.toggleSubscribed = !$scope.data.toggleSubscribed;
}
}
c.closeUnsubscribeModal = function() {
$("#unSubscribeModal").modal('hide');
};
c.handleSubscription = function(confirmation) {
c.data.actionName = null;
if (!$scope.data.isSubscribed) {
c.data.actionName = 'subscribe';
c.data.articleSysId = $scope.data.article_sys_id;
c.data.articleNum = $scope.data.number;
} else {
if ($scope.data.isArticleSubscribed && !$scope.data.isArticleSubscribedAtKB) {
c.data.actionName = "unsubscribe";
c.data.articleSysId = $scope.data.article_sys_id;
c.data.articleNum = $scope.data.number;
c.data.unsubscribeKB = false;
} else if (!confirmation) {
//$("#unSubscribeModal").modal();
var unsubscribeMessage = "<p>" + c.data.messages.UNSUBSCRIBE_CONTENT + "</p><p><b>" + c.data.messages.UNSUBSCRIBE_CONFIRMATION + "</b></p>";
spModal.open({
title: c.data.messages.UNSUBSCRIBE,
buttons: [{
label: c.data.messages.NO,
cancel: true
}, {
label: c.data.messages.YES,
primary: true
}],
message: unsubscribeMessage
}).then(function() {
c.handleSubscription('Y');
}, function() {
c.closeUnsubscribeModal();
});
return;
} else if (confirmation === 'Y') {
c.data.actionName = "unsubscribe";
c.closeUnsubscribeModal();
c.data.articleSysId = $scope.data.article_sys_id;
c.data.kbSysId = $scope.data.kbSysId;
c.data.articleNum = $scope.data.number;
c.data.kbName = $scope.data.kbName;
c.data.unsubscribeKB = true;
}
}
c.server.get({
action: c.data.actionName,
kbSysId: c.data.kbSysId,
kbName: c.data.kbName,
articleSysId: c.data.articleSysId,
articleNum: c.data.articleNum,
unsubscribeKB: c.data.unsubscribeKB,
isArticleSubscribed: c.data.isArticleSubscribed,
isKBSubscribed: c.data.isArticleSubscribedAtKB
}).then(function(resp) {
if (c.data.actionName == 'subscribe') {
$scope.data.isArticleSubscribed = true;
$scope.data.isSubscribed = true;
$scope.data.subscribeLabel = $rootScope.messages.SUBSCRIBED;
} else {
$scope.data.isArticleSubscribed = false;
$scope.data.isSubscribed = false;
$scope.data.isArticleSubscribedAtKB = false;
$scope.data.subscribeLabel = $rootScope.messages.SUBSCRIBE;
}
c.showUIMessage('info', resp.data.responseMessage);
});
};
c.submitFlagComments = function() {
if (!c.data.comment) {
c.flagMessage = "${Please provide a comment to flag the article}";
$("#flagComment").focus();
return false;
} else {
$("#submitFlagComment").attr("disabled", true);
c.server.get({
action: 'saveFlagComment',
article_sys_id: c.data.article_sys_id,
comment: c.data.comment
}).then(function(resp) {
if (resp.data.feedbackSuccess)
c.showUIMessage('info', c.data.messages.ARTICLE_FLAGGED);
else
c.showUIMessage('error', c.data.messages.RATE_LIMIT_REACHED);
});
c.clearComment();
}
};
c.copyPermalink = function() {
var v = document.createElement('textarea');
var permalink = document.location.origin + document.location.pathname + '?id=' + c.data.params.sysparm_article_view_page_id + '&sysparm_article=' + $scope.data.number;
v.innerHTML = permalink;
v.className = "sr-only";
document.body.appendChild(v);
v.select();
var result = true;
try {
result = document.execCommand('copy');
} catch (err) {
result = false;
} finally {
document.body.removeChild(v);
}
if (result === true) {
c.showUIMessage('info', c.data.messages.PERMALINK_COPIED);
} else {
$window.prompt("${Because of a browser limitation the URL can not be placed directly in the clipboard. Please use Ctrl-C to copy the data and escape to dismiss this dialog}", permalink);
}
$('p.kb-permalink button').focus();
};
var modal = null;
c.launchFlagModal = function(e) {
c.clearComment();
var pageRoot = angular.element('.sp-page-root');
modal = $uibModal.open({
title: c.data.messages.FLAG_THIS_ARTICLE,
scope: $scope,
templateUrl: 'kb-flag-article-modal',
keyboard: true,
controller: function($scope) {
$scope.$on('modal.closing', function() {
pageRoot.attr('aria-hidden', 'false');
// Toggle dropdown if not already visible:
if ($('.dropdown').find('.moreActionsMenuList').is(":hidden") && !$("#submitFlagComment").attr("disabled")) {
$('.more-actions-menu').dropdown('toggle');
//Give focus to the flagArticle
$('#flagArticleButton').focus();
}
});
}
});
modal.rendered.then(function() {
//hide the root page headings when modal is active
pageRoot.attr('aria-hidden', 'true');
$("#flagComment").focus();
});
e.stopPropagation();
}
var taskPopUp = $rootScope.$on("sp.kb.feedback.openTaskPopup", function(event, data) {
c.ftask = {};
if (data) {
c.launchFeedbackTaskModal();
c.ftask.feedback_action = data.feedback_data.action;
c.ftask.feedback_rating = data.feedback_data.rating
c.ftask.action = "createFeedbackTask";
}
});
c.launchFeedbackTaskModal = function() {
var pageRoot = angular.element('.sp-page-root');
c.clearFeedbackTask();
modal = $uibModal.open({
title: c.data.messages.FEEDBACK,
windowClass: 'app-modal-window',
scope: $scope,
templateUrl: 'kb-feedback-task-modal',
keyboard: true,
controller: function($scope) {
$scope.$on("modal.closing", function() {
pageRoot.attr('aria-hidden', 'false');
$('#useful_no').focus();
if (!c.submitted) {
c.data.reason = "4";
c.data.details = "";
}
if (c.ftask.action == "createFeedbackTaskWithFlagComment" && !c.submitted)
return;
modal = null;
c.server.get({
action: c.ftask.action,
article_sys_id: c.data.article_sys_id,
reason: c.data.reason,
details: c.data.details,
feedback_action: c.ftask.feedback_action,
rating: c.ftask.feedback_rating
}).then(function(resp) {
if (resp.data.responseMessage) {
if (resp.data.feedbackSuccess) {
c.showUIMessage('info', resp.data.responseMessage);
} else {
c.showUIMessage('error', resp.data.responseMessage);
}
}
});
c.clearFeedbackTask();
});
}
});
modal.rendered.then(function() {
//hide the root page headings when modal is active
pageRoot.attr('aria-hidden', 'true');
$('.type-multiple_choice input[aria-checked="true"]').focus();
});
}
c.clearComment = function(e) {
if (e) {
e.stopPropagation();
e.preventDefault();
}
$scope.data.comment = '';
c.flagMessage = '';
c.closePopup();
}
c.closeTaskPopup = function(e) {
if (e) {
e.stopPropagation();
e.preventDefault();
}
modal.dismiss({
$value: "dismiss"
});
$('#useful_no').focus();
}
c.selectReason = function(e, elem) {
// space keycode to select the radio button
if (e.keyCode == 32) {
$("div.type-multiple_choice").find("input[type=radio]").each(function() {
$(this).attr("checked", false);
$(this).attr("aria-checked", false);
$(this).find("input[type=radio]").attr("checked", false);
$(this).find("input[type=radio]").attr("aria-checked", false);
});
$(e.target).click();
$(e.target).find("input[type=radio]").click();
}
}
c.showUIMessage = function(type, msg) {
if (cabrillo.isNative()) {
cabrillo.message.showMessage(type != 'error' ? cabrillo.message.SUCCESS_MESSAGE_STYLE : cabrillo.message.ERROR_MESSAGE_STYLE, msg);
} else {
if (type == 'error')
spUtil.addErrorMessage(msg);
else
spUtil.addInfoMessage(msg);
}
}
c.closePopup = function() {
if (modal) {
modal.dismiss();
}
}
c.clearFeedbackTask = function() {
c.submitted = false;
c.data.reason = '4';
c.data.details = '';
c.flagMessage = '';
c.ftask = {};
c.closePopup();
}
c.submitFeedbackTask = function() {
if (!c.data.reason) {
c.flagMessage = "${Please provide the mandatory details}";
$("#detailsComment").focus();
return false;
} else {
c.submitted = true;
c.closePopup();
}
}
c.imgModalClose = function() {
c.imageInstance.close();
}
c.getLabelForTemplateField = function(label, isCollapsed) {
if (isCollapsed)
return label + " " + c.data.messages.COLLAPSED_FIELD;
else
return label + " " + c.data.messages.EXPANDED_FIELD;
}
$scope.$on("$destroy", taskPopUp);
$("#flagComment").keydown(function(ev) {
if (ev.which == 13)
$("#flagComment").click();
});
c.handleKeyDown = function(ev) {
if (ev.which == 13)
$(ev.target).click();
}
var favoriteEvent = $rootScope.$on('favorite', function(e, favorite) {
$scope.showFavorite = favorite.showFavorite;
$scope.isFavorite = favorite.isFavorite;
});
$scope.$on("$destroy", favoriteEvent);
$scope.toggleFavorite = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.$broadcast('toggleFavorite');
}
}
Result:
Hope it will help you.
Thanks,
Harsh
