question Re: Add new button to Knowledge view in Developer forum

Add new button to Knowledge view

wchaiwimol — Tue, 31 May 2016 23:27:10 GMT

Is it possible to add a new button for example Create HR Case to the knowledge view? The functionality will be similar to Create Incident. Thanks in advance for your help.

Re: Add new button to Knowledge view

LaurentChicoine — Wed, 01 Jun 2016 00:47:16 GMT

These button are contained inside the "kb_view_common_header_toolbar" UI Macro.

These are not UI Action so you will have to modify the jelly script to add your required buttons and make them do what you want.

Re: Add new button to Knowledge view

wchaiwimol — Thu, 02 Jun 2016 16:37:27 GMT

Thank Laurent. Have you added any custom button on the knowledge article view? I'd like to see how you did it if you have added it before. Thank you!

Re: Add new button to Knowledge view

LaurentChicoine — Thu, 02 Jun 2016 17:07:46 GMT

We added a Print button so unlike yours, it had only client side implication, it was a simple javascript onclick to open a pop-up with the article without the SNOW frame and passing a parameter that calls window.print(). We replicated the behavior of the printer friendly version button that you find in the user preference menu.

Here is what we added following the Edit button

<j:if test="${showUpdateAction}">

   <button id="editArticle" title="${gs.getMessage('Edit content')}" class="btn btn-default navbar-btn snc-article-header-toolbar-button">${gs.getMessage("Edit")}</button>

   </j:if>


   <!-- Custom added to add a print Button when there is the required sysparm -->

   <g:evaluate var="sysparm_media">

   var sysparm_media = RP.getParameterValue("sysparm_media");

   sysparm_media;

   </g:evaluate>


   <j:if test="${sysparm_media!='print'}">

   <button id="printArticle" title="${gs.getMessage('Print Article')}" class="btn navbar-btn btn-primary" style="display:inline-block;" onclick="window.open('/kb_view.do?sys_kb_id=${knowledgeRecord.sys_id}&amp;sysparm_media=print', 'Printer_friendly_format', 'resizable=yes,scrollbars=yes,status=yes,toolbar=no,menubar=yes,location=no')">${gs.getMessage("Print")}</button>

   </j:if>


   <!-- Automatically opens the print option of the browser when the sysparm get passed using the previous button -->

   <j:if test="${sysparm_media=='print'}">

   <script>

   window.print();

   </script>

   </j:if>

However you are saying that you want to do a similar button the the createIncident button which looks like:

<button id="createIncident" title="${gs.getMessage('Create Incident')}" class="btn btn-default navbar-btn snc-article-header-toolbar-button">${gs.getMessage("Create Incident")}</button>

I'm not aware of what handle the click of this button, but you could probably mimic the create incident with a href="your_table.do?sys_id=-1&sysparm_query=field_x=value_you_want_in_that_field"

If you want to share your requirement, I could try to help you with a better example.

Re: Add new button to Knowledge view

wchaiwimol — Thu, 02 Jun 2016 17:20:26 GMT

Thank you very much for sharing that. Our requirement was to add a new button called "Create HR Case" that would open a new HR case form and pre-populate the information similar to the "Create Incident" button does. I'm not familiar with Jelly so it's been a challenge for me. I'm trying to find the function that handle the click of incident so I can replicate it but no luck.

Re: Add new button to Knowledge view

LaurentChicoine — Thu, 02 Jun 2016 22:44:35 GMT

Doing some Developper console exploring, I found that the script that handles the createIncident button reside in the UI Script "KBViewArticle"

So you have: $j('#createIncident').click(this.incidentBtnHandler.bind(this));which handles the click of the button

Then the incidentBtnHandler function uses $j('#createIncidentLinkLocation').val(); to set the location

The #createIncidentLinkLocation refers to an hidden input field which is contained inside "kb_view_hidden_fields" UI Macro.

This createIncidentLinkLocation is based on the System property (sys_properties.list in SNOW navigator). This link looks a lot like what I suggested which is: "incident.do?sys_id=-1&sysparm_query=active=true^comments=(Created after Knowledge search: $[HTML:knowledgeRecord.short_description])&sysparm_stack=knowledge_home_launcher.do"

The important part in the link is the "$[HTML:knowledgeRecord.short_description]" part. Inside "kb_..." UI Macro you have access to knowledgeRecord jelly object which contains all your knowledge fields which you may want to use for your predefined values.You usually can use it in first phase ${knowledgeRecord.field} or in second phase $[knowledgeRecord.field]

So if you want to create your button the same way the create incident is done you would need to customize:

3 UI Macro (kb_view_common_header_toolbar & kb_view_hidden_fields & kb_view_common in which the variable showCreateIncident is initialized based on the fact that the knowledge is in a popup or not)
1 UI Script (KBViewArticle)
Insert a new system property

This has the pro of respecting the actual design but have the con of making a lot of modifications that can be harder to maintain than simply putting a onclick on your button.

Depending on your level of expertise in ServiceNow and with Jelly, I think I gave you enough info to do it yourself, but if you need more help, just ask.

Re: Add new button to Knowledge view

wchaiwimol — Fri, 03 Jun 2016 16:09:43 GMT

Hi Laurent,

Thank you very much for your response. I'll take a stab at it. Your explanation was very helpful. If I get stuck, I'll probably need your help.

Michael

Re: Add new button to Knowledge view

Bhupinder1 — Wed, 11 Jan 2017 21:18:18 GMT

Hi Laurent,

Thanks for the post. I tried adding Print button to the KB article via your method of modifying UI macro. Though I see the Print button on KB Article and also it opens up Printer friendly view of the KB article but it doesn't open the Print window and seems it's not executing window.print() piece of the code. Can you please suggest on it ?

Thanks

Bhupinder

Re: Add new button to Knowledge view

LaurentChicoine — Wed, 11 Jan 2017 21:58:46 GMT

Hi Bhupinder,

Is the Print button still available in your printer friendly view?

Also could you make sure that the opened window contains "&sysparm_media=print" inside the URL?

If the print button is not displayed, then could you make sure the <script> tag is being executed by adding this line to the first line of the script block:

alert("this script is running");

So you can see if the script is called at call

Re: Add new button to Knowledge view

Bhupinder1 — Wed, 11 Jan 2017 22:34:25 GMT

Yes, the Print button is added to the KB article as below-

When I hit the print button it opens the KB Article in new window with "&sysparm_media=print" parameter as below-

But after this it does not automatically opens the print button. I added the alert in script tag but no message was displayed.

Re: Add new button to Knowledge view

LaurentChicoine — Thu, 12 Jan 2017 01:20:20 GMT

I just looked into our code and found out that we had to change it following our upgrade from Fuji to Helsinki.

What we have done is to put the custom print button of "kb_view_common_header_toolbar" inside the new <j2:if test=...> that is there OOTB and to add the script inside a custom <j2:if test=...> at the end of the script. I've ommited the main part of the code to reduce the length of the code posted, but I could put it as a whole if you need it.

Here is what it looks like:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <!--A Heisenberg page header as specified in our style guide-->

       <g:evaluate var="jvar_is_kb_languages_new_ui" jelly='true'>

               var isActive = GlidePluginManager.isActive('com.glideapp.knowledge.i18n2');

               isActive;

       </g:evaluate>

       <j2:if test="$[sysparm_media != 'print']">

       <div class="navbar navbar-default snc-article-header-toolbar" role="navigation">

             ...


                               <j:if test="${showUpdateAction}">

                                       <button id="editArticle" title="${gs.getMessage('Edit content')}" class="btn btn-default navbar-btn snc-article-header-toolbar-button">${gs.getMessage("Edit")}</button>

                               </j:if>

                               <!-- Custom added to add a print Button when there is the required sysparm -->

                               <button id="printArticle" title="${gs.getMessage('Print Article')}" class="btn navbar-btn btn-primary" style="display:inline-block;" onclick="window.open('/kb_view.do?sys_kb_id=${knowledgeRecord.sys_id}&amp;sysparm_media=print', 'Printer_friendly_format', 'resizable=yes,scrollbars=yes,status=yes,toolbar=no,menubar=yes,location=no')">${gs.getMessage("Print")}</button>

                       </div>

               </j:if>

       </div>


       ...

       </j2:if>

       

       <!-- Automatically opens the print option of the browser when the sysparm get passed using the previous button -->

       <j2:if test="$[sysparm_media == 'print']">

               <script>

                       window.print();

               </script>

       </j2:if>

</j:jelly>

Re: Add new button to Knowledge view

Bhupinder1 — Thu, 12 Jan 2017 16:28:11 GMT

Hello Laurent,

It did the trick and it's working. Thanks a lot for help !!

Now, I would try that on ServicePortal

Thanks

Bhupinder

Re: Add new button to Knowledge view

drasamsetti — Mon, 13 Mar 2017 18:15:28 GMT

Hello All,

Is it Possible to create a button on Knowledge Management V3 Homepage, as we have 3 buttons OOB "Import Articles" , "Create an Articel" or "Post a Question"?

If yes, how complex is the effort.?

Re: Add new button to Knowledge view

Rushikesh Mandh — Fri, 31 Mar 2017 15:17:32 GMT

Hi laurentchicoine, I want to add a "Subscribe" button there. When clicked, a record should be entered in a custom table which will store knowledge article & Subscribers linking. And if anybody has subscribed already, he should see "Unsubscribe" button, when clicked record should be deleted from that table. Is it possible to do this all in just "kb_view_common_header_toolbar" macro? If yes, how?

Re: Add new button to Knowledge view

LaurentChicoine — Fri, 31 Mar 2017 15:45:15 GMT

Hi Rushikesh,

I wouldn't implement that if it is not urgent to you. I've heard (unconfirmed) that this functionality would be added in the J release.

Re: Add new button to Knowledge view

Rushikesh Mandh — Tue, 04 Apr 2017 07:17:08 GMT

Thanks laurentchicoine. We have confirmed this from ServiceNow.

Re: Add new button to Knowledge view

Anna-Kaisa — Fri, 05 May 2017 09:22:40 GMT

Hi Laurent!

Im really in a need to get this button in to our environment, especially in to our 1st level supporters knowledge base.

What do you mean by the "J release" ? Is that code name for Istanbul or what?

Thanks for reply!

br. Anna

Re: Add new button to Knowledge view

LaurentChicoine — Fri, 05 May 2017 13:04:07 GMT

J release is the Jakarta release that is following Istanbul.

It will be announced at Knowledge17 which is next week.

So unless this is really urgent to you, I would recommend to wait for your upgrade to that version.

Re: Add new button to Knowledge view

Anna-Kaisa — Mon, 08 May 2017 05:01:37 GMT

Yeah of course it is Jakarta..how stupid of me.
It is just that according to our dev team we are gonna update to Istanbul approx in Sep 2017, so i assume we will be waiting for the J for at least over a year from now

Re: Add new button to Knowledge view

Arindam Ghosh — Mon, 10 Jul 2017 20:09:40 GMT

Hi Laurent,

Can you help me out regarding this below Question. Thanks in Advance!

https://community.servicenow.com/thread/273301

Thanks,

Arindam