Adding "Copy Permalink" to the top of your Knowledge Base Article view (kb_view)

I was recently browsing the Idea Portal on this Community (you did know we had this, didn't you?) to see what our customers have been suggesting we add to the platform, and I came across some really good ideas that are actually quite easy to customize by yourself. In today's blog post I will show how to squash two bugs ideas in one go:

• How to move or add the "Copy Permalink" option to the top of your kb_view.
• Change the name of that link to something more descriptive for your users.

Both these issues were expressed by Community user @georgiamali in her idea Knowledge articles: Rename "Copy Permalink".

We will be creating one new UI Macro, and copying two existing ones which we will adapt to our needs. This is the recommended way to customize out-of-box functionality because it won't interfere in future upgrades. Just remember to follow our development best practices.

Preparing the terrain

Before doing any modifications I suggest making a copy of the following UI Macros (for example by using Insert and Stay from the context menu on the form). We will be modifying these later.

• kb_view_common_header_banner_image
• • /nav_to.do?uri=sys_ui_macro.do?sys_id=b74cff91c30031000096dfdc64d3ae65
• kb_view_common_footer_metadata_fields (only if you want to remove the link from the footer of the kb_view)
• • /nav_to.do?uri=sys_ui_macro.do?sys_id=3783deb1d70031004792a1737e610391

You should deactivate the original ones so the system uses your new macros.

Now you can go ahead and create a new UI Macro, I named it kb_view_permalink, and copied the following piece of code from kb_view_common_footer_metadata_fields with some modifications:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<j2:if test="$[sysparm_media != 'print']">
	$[SP]<a href="#" id="permalink" aria-label="${gs.getMessage('Copy Permalink')}">${gs.getMessage('Copy Permalink')}</a>
	<script language="javascript">
		$j('#permalink').click(
			function(){
				//generate direct url to this article, by getting the domain and adding sysparm_article=NUMBER_OF_ARTICLE
				copyToClipboard(window.location.origin + '${permalink}');
				return false;
			}
		);
	</script>
	</j2:if>
</j:jelly>

This code will add a space ($[SP]) and a link labeled "Copy Permalink". This is where you can change the text for that link if you prefer to do so; I've seen "Copy link" or simply "Copy" used for this.

You can now add this macro into your version of kb_view_common_header_banner_image where you want the link to appear. I have added it right next to the KB number and Latest version link, in my instance this is right after line 47:

  </j:if>
  <j:if test="${state!=''}">$[HTML:state]</j:if>
  <!-- Added by Lucas Vieites 20200320 -->
  <g:inline template="kb_view_permalink" />    <===== This is the line you need to add
  <!-- END of Lucas Vieites 20200320 -->
</div>

 Save this UI Macro, and you are done. Check that the link actually appears at the top of your kb_view, it should look like this:

Now you can go ahead and remove the link from the footer. I suggest commenting out the HTML tag that shows it there, just to keep it available if you should change your mind later on. You will need to use the HTML comment tags <!--  and --> like this:

<!-- <a href="#" id="permalink" aria-label="${gs.getMessage('Copy Permalink')}">${gs.getMessage('Copy Permalink')}</a> -->

One last disclaimer: please remember to do all your tests in a pre-production environment before you deploy it on your live system.

[UPDATE 2020/04/29] I have now published another post with some guidelines to do the same on Service Portal/Knowledge Portal: Moving "Copy Permalink" to the top of your Service Portal and Knowledge Portal Article views