Configure the color of links in jump to dashboard (Linux)

[JeremyFriedel]

Configure the color of links in jump to dashboard

Introduction

When using the Jump to Dashboard feature in a widget, you may want to customize the color of links or clickable elements that open the modal dashboard. This can be done with a few modifications to the JTD plugin.

 [ALT TEXT: A table displaying data on the number of unique brands for various age ranges over a series of years. The age ranges are categorized as 0-18, 19-24, and 25-34. Each row lists the specific year from 2009 to 2013 and the corresponding number of unique brands for each age group, with values increasing over the years.]

Step-by-Step Guide

The two files that can be modified for this functionality are :

• The color attribute in the styles.css stylesheet file, where the color attribute can be set for the color attribute for the selector:

div.fake-link​

[ALT TEXT:  A screenshot of a code editor displaying a section of CSS code. The code includes styles for mobile navigation elements, with properties such as width, display, text overflow, and color. Specific styles are highlighted for a mobile jump menu list and a fake link, showing values like width set to 360px and color set to red. The interface is dark-themed with highlighted syntax.]

• The parameter in the Javascript file

./js/services/displayAndGetDashboardsFunctions.js

in the function

modifyPivot2Cells

in the variable

jtdStyles

the parameter changed being 

color

[ALT TEXT: A screenshot of a code editor displaying JavaScript code. The code includes functions such as `this.checkIfJumpable` and `function modifyPivot2Cells`, with syntax highlighting for keywords and strings. The editor window shows file paths for JavaScript and CSS files at the top.]

[ALT TEXT: A table displaying data on the number of unique brands by age range and year. The age ranges are 0-18, 19-24, and 25-34. The years listed are from 2009 to 2013, along with corresponding counts of unique brands for each range and year. The table shows increasing trends in the number of unique brands from 2009 to 2013 across all age ranges.]

In most cases the same color code would be used for both. Any valid HTML color name or HTML color code can be used.

Additionally, if you expect to change the color in the future, you can add an additional parameter to the appConfig variable in the

config.js

file, you can call this new parameter

linkColor

, and import it into the 

displayAndGetDashboardsFunctions.js

file, using this parameter the color can be changed via the config file in the future.

[ALT TEXT: Screenshot of a code editor displaying a JavaScript file named "config.js." The code includes various configuration settings related to dashboard navigation and display options, such as `globalIcon`, `dashboardId`, and `linkColor`. The editor indicates "No results" at the top right.]

[ALT TEXT: Screenshot of a code editor displaying JavaScript and CSS files. In the visible code, there are functions and variable declarations related to managing dashboards and styling cells. Syntax highlighting shows different colors for keywords, strings, and comments.]

[ALT TEXT: The image shows a table with three columns. The first column lists age ranges, including "0-18," "19-24," "25-34," and "35-44." The second column indicates the years in which data was collected, spanning from 2009 to 2013. The third column shows the number of unique brands for each age range by year. The values vary, with notable counts for the age group 25-34 in the years 2012 and 2013, showing 887 and 593 unique brands, respectively.]

Attached is a zip file copy of JTD with those changes, this zip will not automatically update to match the latest version of JTD so this should be used as a template of this changes, and do not overwrite the existing version of the  JTD plugin on your server.

Conclusion

By following these steps, you can successfully customize the link colors for the Jump to Dashboard feature. Whether you modify the styles.css file, update the JavaScript function, or introduce a configurable option in config.js, these changes provide greater flexibility in styling.

For long-term maintainability, consider implementing the config.js approach, as it allows for easy updates without modifying the core plugin files. The attached JTD zip file serves as a template for these modifications but should not replace the existing JTD plugin on your server.

Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this please let us know.