Add new button to Knowledge view

wchaiwimol · ‎05-31-2016

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.

LaurentChicoine · ‎06-02-2016

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.

View solution in original post

LaurentChicoine · ‎05-31-2016

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.

wchaiwimol · ‎06-02-2016

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!

LaurentChicoine · ‎06-02-2016

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.

wchaiwimol · ‎06-02-2016

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.