Creating dynamic and visually engaging dashboards is crucial for effectively presenting financial data in Jedox. One way to add a dynamic visual element to your dashboard is by incorporating a scrolling widget. This guide will walk you through creating a simple marquee widget, which can display important announcements or highlights within your Jedox dashboard.
What is a Marquee?
It is a scrolling text effect that runs across a webpage. Although the HTML tag is outdated and not recommended for modern web development, it is still supported by many browsers and can be used for quick and simple effects like the one we are creating here.
Why Use a Marquee Widget?
Dynamic Content: It adds a dynamic element to your dashboard, making it visually appealing and drawing attention to important information.
Ease of Use: Simple to implement and customize, a marquee widget can be quickly added to any dashboard.
Highlight Important Information: Use a marquee to highlight important announcements, updates, or key financial metrics.
Adding the Marquee to Your Jedox Dashboard
To add this widget to your Jedox dashboard:
- Create a New Web Widget: In Jedox, navigate to the dashboard where you want to add the marquee. Add a new web widget.
- Insert the HTML Code: Copy and paste the bellow HTML code into the widget’s HTML editor.
- Customize: You can modify the message, font, color, and size by altering the HTML and CSS within the code.
HTML Code for the Marquee Widget
Below is a simple HTML code snippet that you can use to create a scrolling effect in your Jedox dashboard:
Jedox Dashboard Marquee
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jedox Dashboard Marquee</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #2C275F;
font-family: Segoe UI;
}
</style>
</head>
<body>
<marquee id="myMarquee" behavior="scroll" direction="left"></marquee>
<script type="text/javascript">
// define the function with your source as parameter
function __exec(params) {
// declare the object "vCont" to which you later want to "assign" the source content
var vCont = document.getElementById('myMarquee'),
// Initialize the output variable "vContCnt" by first setting a line break
vContCnt = ' Here are today stats: ';
for (var param in params) {
if (params[param]) { // Check if params[param] is not empty, null, or undefined
vContCnt = vContCnt.concat(params[param], ' value is ');
}
}
// Call the __exec function and pass an array of values to display in the marquee
__exec(["Hello", "this", "is", "the", "marquee", "content"]);
</script>
</body>
</html>
Note that on our spreadsheet, we set some parameters which will be passed to the widget.
Now, you can mix and match it with the newest capabilities of Canvas and build yourself an amazing interactive dashboard.
An example within the spreadsheet can be found here.