Tip 122 - Homemade JavaScript Library

If you spend a lot of time scripting in Dundas BI, we have a tool that can make your life easy! Building a script library is a simple way to have quick and easy access to your scripts right at your fingertips!

To build a script library, simply create functions in the JavaScript Resource entry, located inside of Admin -> Setup -> App Styling.


When editing the JavaScript Resource, you’ll be able to enter (or copy and paste) the functions that you want to include. Once saved, these methods will be available throughout the application, letting you access them when needed.

Script being added

Example of the window.TipsAndTricks.celebration() method being executed from the browsers Developer Tools

1 Like

For those interested in what the scripts doing (since the screenshot isn’t doing it justice), it creates a set of circles of various sizes and animates them falling from the top of the screen to the bottom, where they fade out.

Pretty neat.

Want to try it out for yourself? See the script below :smiley:

window.TipsAndTricks = {
    // Creates a fun animation of colourful circles floating down the screen for a limited period of time
    celebration: function(){
        var colors = ["#ff5f5f", "#34c981", "dodgerBlue", "pink", "purple"];
        var numberOfShapes = 50;
        var generateShapeSize = function(){
            var smallestSize = 50;
            var biggestSize = 200;
            return Math.floor((Math.random() * (biggestSize - smallestSize + 1)) + biggestSize);
        var generateFallSpeed = function(){
            var fastestSpeed = 1500; //MS
            var slowestSpeed = 3500; //MS
            return Math.floor((Math.random() * (slowestSpeed - fastestSpeed + 1)) + fastestSpeed);
        var getLeft= function(){
            return Math.floor(Math.random() * $("#application").width());
        var getTop = function(){
            return Math.floor(Math.random() * 100) * -1;
        var createShape = function(size, color){
            var shape = document.createElement("div");
                width: size,
                "background-color": color,
                zIndex: 99999999,
                opacity: 0.8,
                left: getLeft(),
                "border-radius": 180,
            $(shape).animate({ top: $("#application").height() - size}, generateFallSpeed(), "linear", function(){
                $(this).animate({opacity: 0}, 100, "linear", function(){
        var colorCounter = 0;
        for(var i = 0; i < numberOfShapes; i++){
            createShape(generateShapeSize(), colors[colorCounter++]);
            if( colorCounter > colors.length){ colorCounter = 0; }