Animating Sisense Title Elements and Widgets Using CSS Animations

[JeremyFriedel]

Animating Sisense Title Elements and Widgets Using CSS Animations

Animating Sisense widget elements and dashboard/widget titles is a possible way to enhance the visual appeal and user experience of a Sisense dashboard or highlight a particular part of a dashboard or widget. Sisense widgets and titles are standard HTML elements, making it possible to apply animation using solely standard CSS stylesheets, much like other HTML elements on non-Sisense pages. Animations can include effects like fading widgets in or out and cyclic changes in the text color of widgets or titles.

For documentation of CSS animation, you can explore the following pages which include many examples:

• Mozilla Developer Documentation on CSS Animation
• CSS Text Animations Examples
• CSS Text Animations Examples
• W3Schools CSS3 Animations

In Sisense, widget and dashboard scripting can be used to add additional CSS stylesheets to the header of the HTML page using Javascript. CSS selector rules can be specific to a widget OID (all widgets have a unique OID, it is visible in the widget editor URL) in the selector string and not apply to any other widgets. Any valid CSS can be added via widget or dashboard scripting.

Here's an example of a widget script that pertains to a text widget and animates the text color:

widget.on('ready', function () {
	
  var style = document.createElement('style');
	
  // Any valid CSS will work in styleString and be appended to the CSS, including any CSS animation, modify as needed
  var styleString = `
  [widgetid='${widget.oid}'] .wd div font {
  	animation: color-animation 10s linear infinite;

  }

  @keyframes color-animation {
  	0% {
  		color: blue
  	}

  	32% {
  		color: red
  	}

  	45% {
  		color: green
  	}

  	55% {
  		color: black
  	}

  	66% {
  		color: blue)
  	}

  	80% {
  		color: grey
  	}

  	100% {
  		color: purple
  	}
  }

  `
  if (style.styleSheet) {
    style.styleSheet.cssText = styleString;
  } else {
    style.appendChild(document.createTextNode(styleString));
  }
  document.getElementsByTagName('head')[0].appendChild(style);

});

Here's another example of CSS animation, in this example a widget is faded in and then out by modifying opacity:

widget.on('ready', function () {

  var style = document.createElement('style');

  // Any valid CSS will work in styleString and be appended to the CSS, including any CSS animation, modify as needed
  var styleString = `
  [widgetid='${widget.oid}'] .wd {
    animation: fadeIn ease 8s infinite;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
  `
  if (style.styleSheet) {
    style.styleSheet.cssText = styleString;
  } else {
    style.appendChild(document.createTextNode(styleString));
  }
  document.getElementsByTagName('head')[0].appendChild(style);


});

It is also possible to animate other HTML elements within a Sisense dashboard, using the same principles.

Share in the comments if this is a code you tried and let us know how it went!