Dynamic Hyperlinks in Catalog Items with Help Text - ben-vargas/servicenow-wiki GitHub Wiki

This article explains how to create a dynamic hyperlink in a ServiceNow Service Catalog item, where the URL is determined by the value of another variable. The solution also automatically expands help text associated with the variable, providing a more user-friendly experience.

You might need to display a hyperlink in a catalog item that depends on user input or other dynamic data. Simply adding static HTML in a help text is not enough because you cannot update the href dynamically without client-side scripting.

Imagine a scenario where a user needs to access a specific external resource, and the URL to that resource is provided as part of the request. Instead of requiring users to copy and paste this URL, you can display a clickable link that automatically updates with the correct URL when the field is populated. For example, you might want to provide a link to a certificate renewal page where the URL depends on a certificate ID entered in the catalog form.

This solution involves adding HTML to the help text of a catalog variable to display the link. Then, a client script is used to dynamically set the href attribute of the link based on the value of another variable, and automatically expand the help text for the users.

1. Add HTML to Variable Help Text: Add the following HTML code to the help text of the variable where you want the link to appear (e.g., a display-only variable).

   <a href="" id="dynamicURL" target="_blank">Click to Open URL in a New Tab</a>

   • <a> tag creates the hyperlink.
   • href="" initially sets the link to an empty string.
   • id="dynamicURL" provides a unique ID for the script to reference the link.
   • target="_blank" opens the link in a new tab.
   • The text "Click to Open URL in a New Tab" is displayed on the form.

2. Create an onLoad Client Script: Create a new onLoad client script that sets the href for the link and automatically expands the help text on load. Use this code:

   function onLoad() {
     // Build and set the href for the dynamic URL.
     var url = g_form.getValue('variable_name_with_url'); // Replace with your URL variable name
     if(url) {
       $('dynamicURL').href = url;
     }
   
     // Default the help text/annotation open; only click if the id exists - id changes in catalog vs RITM/Task
     // The help text toggle ID will change in the Catalog vs. the RITM/Task. So we need to account for both.
      var catalogToggle = $('question_help_IO_VARIABLE_SYS_ID_toggle'); // replace with correct sys_id
      var ritmToggle = $('question_help_ni_VARIABLE_SYS_ID_toggle'); //replace with correct sys_id
   
      if(catalogToggle) {
       catalogToggle.click();
     } else if (ritmToggle) {
       ritmToggle.click();
      }
   }

   • Replace 'variable_name_with_url' with the actual variable name that contains the URL.
   • Replace 'IO_VARIABLE_SYS_ID' and 'ni_VARIABLE_SYS_ID' with the correct sys_id for the variable from the catalog item and the RITM or Task forms.
   • This script retrieves the URL from the specified variable using g_form.getValue(). It populates the href attribute for the link using $('dynamicURL').href = url;.
   • It finds the help text by its ID and automatically expands it using click() method.

3. Create an onChange Client Script: Create a new onChange client script, triggered by the variable that contains the URL. This will update the link if the variable changes after the form is loaded.

   function onChange(control, oldValue, newValue, isLoading) {
       if (isLoading || newValue == '') {
          return;
      }
     // Build and set the href for the dynamic URL.
     var url = g_form.getValue('variable_name_with_url'); // Replace with your URL variable name
     if(url) {
        $('dynamicURL').href = url;
     }
   
   
       // Default the help text/annotation open; only click if the id exists - id changes in catalog vs RITM/Task
       var catalogToggle = $('question_help_IO_VARIABLE_SYS_ID_toggle'); // replace with correct sys_id
       var ritmToggle = $('question_help_ni_VARIABLE_SYS_ID_toggle'); //replace with correct sys_id
   
       if(catalogToggle) {
         catalogToggle.click();
       } else if (ritmToggle) {
          ritmToggle.click();
      }
   }

   • This script is the same as the onLoad script, and will run on change of your URL variable, setting the link and opening the help text on the page.

Explanation:

• onLoad() Function: This client script runs when the catalog item form initially loads. It gets the value of the variable specified, sets the dynamic url value, and opens the help text.
• onChange() Function: This client script is triggered when the variable containing the URL is changed. It ensures the dynamic link gets updated when the URL value changes. The help text is also updated and opened if the variable is changed.
• g_form.getValue('variable_name_with_url'): This line gets the value from the catalog variable where the URL will be added by the user.
• $('dynamicURL').href = url;: This line updates the href attribute of the anchor tag dynamically.
• $('question_help_IO_VARIABLE_SYS_ID_toggle').click() and $('question_help_ni_VARIABLE_SYS_ID_toggle').click();: These lines find the help text toggle and trigger a click event, causing it to expand. The IDs will be different on the form depending on if it is a catalog item or a RITM.

The question_help_IO_VARIABLE_SYS_ID_toggle and question_help_ni_VARIABLE_SYS_ID_toggle IDs are dynamic and based on the variable. You can get them by inspecting the HTML of the page when the help text is expanded. You will need to get both versions as one is used in the catalog item, and the other is used in the RITM or catalog task view.

1. Open your catalog item form.
2. Right-click the help text for your link and click "Inspect" or "Inspect Element" in your browser.
3. Locate the <span> or <a> element that contains the toggle arrow (this is usually next to the help text label).
4. The ID of this element will be similar to question_help_IO_VARIABLE_SYS_ID_toggle for catalog items, and question_help_ni_VARIABLE_SYS_ID_toggle for RITM/Tasks. Copy this ID and use it in your client scripts.

• Replace Placeholders: Ensure to replace the variable names, and ID's in the script with your actual variable and toggle ID's.
• Error Handling: It's good practice to add error handling in your scripts. Check to see if the url variable contains a value and if the element with the dynamicURL exists before interacting with it.
• Naming Conventions: Use descriptive variable names for better code readability.
• Comments: Add comments in your code for future maintainability.
• Test Thoroughly: Test your client scripts on all relevant forms to verify that they work as expected and do not cause performance issues.
• CSS Styling: To improve the look and feel of your link, you can also add CSS styling to the help text field.

• UI Macro: If you need more complex or reusable dynamic content, consider using a UI Macro.
• Server-Side Scripting: In more complex scenarios where client-side logic isn't suitable, you might need to use a server-side script (e.g., a Business Rule or Script Include) and then populate a variable on the form.

This approach provides a flexible solution for creating dynamic hyperlinks in your catalog items that are based on other fields, and also automatically expanding the help text on the page for a seamless user experience. By using client-side scripting to manipulate the href attribute, you can keep your forms user-friendly and provide dynamic links based on your specific needs. Remember to test all changes thoroughly in a non-production instance before deploying to production.