Resolving Color Coding Issues After Upgrading Spotfire from 11.4.6 to 14.0.4 in Text Area

Keywords:

Spotfire, jQuery, Conditional Formatting, Color Coding, Upgrade, Deprecated Events, JavaScript, Migration, Dashboard, Text Area.

Description:

When upgrading Spotfire from version 11.4.6 to 14.0.4, dashboards using jQuery for conditional color coding may experience issues where elements no longer change colors as expected. This occurs because certain jQuery methods and events used in older versions are deprecated in modern browsers.

Symptoms:

• Elements that should change color based on conditions remain at their default color (often blue)
• Console warnings about deprecated events like 'DOMSubtreeModified'
• jQuery-based color coding functionality stops working after upgrade

Solution:

Replace deprecated jQuery event listeners with modern JavaScript approaches. Instead of using 'DOMSubtreeModified' events, implement a solution that:

1. Creates a function to check and update element styles based on conditions
2. Calls this function initially when the page loads
3. Uses setInterval to periodically check for changes

Example Implementation:

function updateElementStyle() {
  var value = $("#ValueElement").text().trim();
  var targetElement = document.getElementById('TargetElement');

  if (value === "Completed") {
    targetElement.style.backgroundColor = '#028669';
    targetElement.style.borderColor = '#028669';
    if (targetElement.style.color === '#484848') {
      targetElement.style.color = '';
    }
  } else if (value === "Not Completed") {
    targetElement.style.backgroundColor = '#ffffff';
    targetElement.style.borderColor = '#484848';
    targetElement.style.color = '#484848';
  }
  // Add additional conditions as needed
}

// Initial call
updateElementStyle();

// Periodically check for changes (every 200ms)
setInterval(updateElementStyle, 200);