Need to display a URL field as a clickable hyperlink with custom text (e.g., 'Click here') In MRVS

[ArshadHussA]

Requirement:
I have a RITM (Request Item) with a MRV (Multi-Row Variable) that contains a field named "link" with type "URL". Instead of displaying the raw URL in the RITM, I want to display it as clickable text that says "Click here" (or similar custom text).
As we can't use HTML in MRVS in Servicenow

Current Behavior:

• The URL field stores values like: www.google.com
• When viewing the RITM, the field displays as plain text or as-is
• Users see the full URL displayed

Desired Behavior:

• The field should display as a clickable hyperlink with custom text like: [Click here]
• Clicking it should open the URL in a new tab/window
• The actual URL should be hidden behind the link text

Additional Context:

• This needs to work in a Multi-Row Variable (MRV) in a Request Item
• The URL may not always have the protocol prefix (e.g., www.google.com instead of https://www.google.com)

Question:
What is the best approach to achieve this? Should I use:

[hoathong99]

Well, not OOTB recomend but you can try my script, just need to change the table selector ('table.table-bordered.table-striped.m-b-xs') and the column name ('url') and it should work.

function onLoad() {
  function activateMRVSLinkWatcher() {
    var checkInterval = setInterval(function() {
      var table = this.document.querySelector('.table.table-bordered.table-striped.m-b-xs');
      if (!table) return;

      var tbody = table.querySelector('tbody');
      if (!tbody) return;

      clearInterval(checkInterval);

      // Find the URL column index from <th> headers
      var urlColIndex = -1;
      table.querySelectorAll('thead th').forEach(function(th, i) {
        if (th.textContent.trim().toLowerCase() === 'url') {
          urlColIndex = i;
        }
      });

      if (urlColIndex === -1) return;

      function linkifyRow(row) {
        var cells = row.querySelectorAll('td');
        var cell = cells[urlColIndex];
        if (!cell) return;

        var url = cell.textContent.trim();
        if (url && /^https?:\/\//.test(url) && !cell.querySelector('a')) {
          cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer">' + url + '</a>';
        }
      }

      // Handle any rows already present
    //   tbody.querySelectorAll('tr').forEach(linkifyRow);

      // Watch for new rows added by the user
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1 && node.tagName === 'TR') {
              linkifyRow(node);
            }
          });
        });
      });

      observer.observe(tbody, { childList: true });

    }, 500);
  }

  activateMRVSLinkWatcher();
}

[hoathong99]

Well, not OOTB recomend but you can try my script, just need to change the table selector ('table.table-bordered.table-striped.m-b-xs') and the column name ('url') and it should work.

This one is an onload script that refresh when a new row is added to the table

function onLoad() {
  function activateMRVSLinkWatcher() {
    var checkInterval = setInterval(function() {
      var table = this.document.querySelector('.table.table-bordered.table-striped.m-b-xs');
      if (!table) return;

      var tbody = table.querySelector('tbody');
      if (!tbody) return;

      clearInterval(checkInterval);

      // Find the URL column index from <th> headers
      var urlColIndex = -1;
      table.querySelectorAll('thead th').forEach(function(th, i) {
        if (th.textContent.trim().toLowerCase() === 'url') {
          urlColIndex = i;
        }
      });

      if (urlColIndex === -1) return;

      function linkifyRow(row) {
        var cells = row.querySelectorAll('td');
        var cell = cells[urlColIndex];
        if (!cell) return;

        var url = cell.textContent.trim();
        if (url && /^https?:\/\//.test(url) && !cell.querySelector('a')) {
          cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer">' + url + '</a>';
        }
      }

      // Handle any rows already present
      tbody.querySelectorAll('tr').forEach(linkifyRow);

      // Watch for new rows added by the user
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1 && node.tagName === 'TR') {
              linkifyRow(node);
            }
          });
        });
      });

      observer.observe(tbody, { childList: true });

    }, 500);
  }

  activateMRVSLinkWatcher();
}