Creating Hyperlinks in ServiceNow Forms Using UI Formatter and UI Macros
Overview of Use Case:
This article explains how to create a custom hyperlink within ServiceNow forms using UI Formatters and UI Macros. For my specific use case, I’ve used this technique to display a hyperlink to a Knowledge Base (KB) article directly within the CMDB CI table. The cool part is that there’s a parent-child relationship between the CMDB CI table and the KB_Knowledge table, which we can leverage to dynamically generate the hyperlink. Instead of using a regular related list or UI action to display the KB article, we’ll take a more customized approach that offers greater flexibility and control.
Addressing Alternative Solutions:
Now, you might be wondering: Why not just use a related knowledge-related list or a UI Action for this task? Those are definitely good alternatives and might be what you’ve used in the past. However, for my specific use case, I wanted to explore a more advanced solution by customizing the functionality using a UI Macro. In this article, I will walk you through this approach, which allows for more control and customizability than standard configurations.
Why UI Macros?
A UI Macro allows us to insert custom HTML, JavaScript, and other elements directly into ServiceNow forms, offering more flexibility than typical out-of-the-box configurations. This approach is perfect when you want to create dynamic, customized elements like hyperlinks, buttons, or other controls that go beyond basic field types. Let’s take a closer look at how to use UI Macros to achieve this.
Demonstrating the Steps
Step 1: Creating a New UI Macro
To get started, navigate to System UI > UI Macros in your ServiceNow instance. Click New to create a new UI Macro. In this macro, we’ll define the HTML and logic required to generate a hyperlink to the KB article:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!-- Container for the button -->
<div style="text-align: left; padding-left: 10px; padding-right: 10px;">
<button style="background: #ffffff; border: none; color: #007bff; height:33px; width:auto; display:inline-block; margin-left: 265px; padding-left:10px; padding-right:10px;"
onclick="openKBarticle(event)">
<b>View KB Article</b>
</button>
<!-- This is where the KB article link will appear inline next to the button -->
<div id="kbArticleLink" style="display: inline-block; margin-left: 10px;"></div>
</div>
<script>
function openKBarticle(event) {
event.preventDefault(); // Prevent default button action, avoiding form submission/redirect
var appSysID = g_form.getUniqueValue(); // Get the sys_id of the current record
// Get the name field from the form
if (!appSysID) {
alert("Unable to fetch application details. Please check the form fields.");
return; // Stop further execution if the necessary fields are missing
}
var kbGR = new GlideRecord('kb_knowledge');
// Query for the related Knowledge Article
kbGR.addQuery('cmdb_ci.sys_id', appSysID);
kbGR.addQuery('short_description', 'Jira server Base URL health check fails' );
kbGR.query();
if (kbGR.next()) {
var kbNumber = kbGR.number; // Retrieve the KB article number
var kbSysid = kbGR.sys_id; // Get the sys_id of the KB article
// Manually encode '?' as %3F and '=' as %3D
var baseURL = 'https://dev197363.service-now.com/now/nav/ui/classic/params/target/kb_view.do';
var url = baseURL +
'%3Fsys_kb_id%3D' + encodeURIComponent(kbSysid) + '%26' +
'preview_article%3Dtrue'; // Using %3F and %3D instead of '?' and '='
// Display the KB article number inline next to the button
var linkHTML = '<a target="_blank" href="' + url + '">' + kbNumber + '</a>';
document.getElementById('kbArticleLink').innerHTML = linkHTML;
} else {
// Optionally handle the case where no KB article is found
alert("No knowledge article found for this application.");
}
}
</script>
</j:jelly>
In this macro, we are dynamically pulling the sys_id and title from the related KB_Knowledge table, creating a clickable link to the KB article.
Step 2: Creating a UI Formatter to Link the Macro
After creating the UI Macro, we can associate it with the CMDB CI table by creating a UI Formatter. A UI Formatter lets you display custom content in a form, without modifying the underlying data structure.
To set this up:
- Navigate to System UI > UI Formatters and click New.
- In the Table field, select cmdb_ci (the CI table).
- In the Formatter field, select the UI Macro you created earlier and end it with .xml
This UI Formatter will dynamically pull data from the KB_Knowledge table, and the hyperlink to the KB article will be displayed on the CMDB CI form.
Step 3: Adding the UI formatter to the Form
Now that the UI Macro is linked to the CMDB CI table, you can display the hyperlink directly within the form. When a user opens a CI record, they will see the clickable link pointing to the associated KB article.
- Navigate to Form> Configure and click Form Design.
- Move the newly created Formatter to the form by drag and drop
- Go back to the form to test it.
Step 4: Testing the UI formatter
Flexibility of UI Macros:
What makes this method so powerful is that it’s not limited to just displaying KB article links. Once you understand the process, you can apply this technique to a variety of use cases, such as:
- Displaying custom data dynamically in forms
- Creating links to external systems or web pages
- Integrating other systems or tools directly into your forms
- Customizing UI elements to meet specific business requirements
The flexibility of UI Macros allows you to extend ServiceNow forms in ways that standard configurations can’t.
Conclusion
This article explained how to use UI Macros to create custom UI Formatters in ServiceNow. The process is straightforward but offers a lot of flexibility, allowing you to integrate dynamic elements like hyperlinks or other custom data into your forms. I hope you now have a better understanding of how to implement this technique and how it can be used for various purposes. I encourage you to explore this approach in your own ServiceNow instance and get creative with it!
For a detailed explanation of this topic and other related content, please check out our YouTube channel for more videos!
Happy customizing!
If you believe the solution provided has adequately addressed your query, could you please mark it as 'Helpful'? This will help other community members who might have the same question find the answer more easily.
Thank you for your consideration,
Selva Arun
