Simon MarslandJavaScript in the Dashboard – Part 1

JavaScript Tutorial

Difficulty: BASIC

Estimated Completion Time: 15 Mins

Version 1.8+

In this two part tutorial we will show you how to use JavaScript in your dashboard. In part 1 we will focus of inserting a small javascript function into the dashboard and attaching this function to a widget. Part 2 will build on this tutorial by expanding the function to use dashboard variables and also attaching it to multiple widgets. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add a Widget to call the JavaScript

Add a dynamic text box widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. From inside the Dynamic Text Box widget locate and press the edit text icon show below


You will now be presented with a text editor. While inside this editor add the words “click me”  in large H1 font size and save the text.

Note: You can style your text using the FORMAT DROP DOWN in the BOTTOM LEFT CORNER OF THE EDITOR.

 

Step 2 – Add your new JavaScript function

To add JavaScript a new JavaScript function to your dashboard you will need to add the following code snippet to the bottom of the HTML HEAD Includes property of your dashboard. This property is located in the edit dashboard window. To access the Edit dashboard window press the spanner in the top right hand corner of the dashboard builder screen.

[snippet id=”29″]

Scroll to the bottom and press update. You can now close the dialog. That’s all done!. Now view your dashboard and please enjoy your new javascript. Now be sure to continue to Part 2 where we will see how to extend your JavaScript function further!

TIP: Using In-Line JavaScript is for demonstration purposes only

Using In-line JavaScript as shown in this tutorial is for demonstration purposes only. A later tutorial entitled “Using JavaScript on production servers” will show you how to include JavaScript files into your dashboard.
.

For extra information, guidance and troubleshooting consult:

 

Leave a Reply