Spotfire: How to create hyperlinks in Cross Tables

A known restriction of Spotfire is that URL or hyperlinks can be applied within a flat table but not in a Cross Table. Generally, once a table is transformed to a Cross Table  visualization, hyperlinks will be presented as text, not as links.

There is a way to convert the text in a cross table to hyperlinks using some JavaScript.

The main prerequisite is only one table per page, and that you pre-load JQuery, as described in this article:

https://community.spotfire.com/articles/spotfire/how-to-include-your-own-instances-of-jquery-and-jqueryui-in-text-areas/ 

In order to use JavaScript code, you need to create a text area. You can move it very far from the cross table and make it very small in order not to consume the report space. Then attach the following JS script to the text area.

The main idea is to loop over cross-table cell values using jQuery and if the value contains "https" then the href attribute is applied. The listener is used to catch changes in div element as the script is launched before the cross table is loaded.

Note: this solution includes Javascript code to reflect current web browser requirements (as of 2024) and is different from the code provided by Spotfire in this article:
https://community.spotfire.com/articles/spotfire/how-create-hyperlinks-cross-table/

var userSelection = document.getElementsByClassName("sf-element-tabular-content");

function getParameterValue(url, parameterName) {
  const urlSearchParams = new URLSearchParams(new URL(url).search);
  return urlSearchParams.get(parameterName);
}

function changeListener(mutationsList, observer) {
  mutationsList.forEach(function(mutation) {
    if (mutation.type === 'childList') {
    console.log('A child node has been added or removed.');
    // Handle the change here (e.g., update UI, etc.)
      $(".sf-element-tabular-content div.sf-element-table-cell div.cell-text").each(function ()
      {
        var cell_text = $(this).text();
        if (cell_text.includes("https") > 0)
        { console.log('cell text value is: '+cell_text);
        $(this).replaceWith('<a href="' + cell_text + '" target="_blank"> ' + getParameterValue(cell_text, "rid") + "</a>");
        }
      });
    }
  });
}

for (var i = 0; i < userSelection.length; i++) {
  var element = userSelection[i];
  var observer = new MutationObserver(changeListener);
  var config = { childList: true, subtree: true };
  observer.observe(element, config);
}

Result: