Rob Bradbury

JavaScript in the Dashboard – Part 2

JavaScript Tutorial

Difficulty: BASIC

Estimated Completion Time: 15 Mins

Version 1.8+

In part 2 we will be building on our previous Dashboard 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 more Widgets to your Dashboard to call the JavaScript

Add another dynamic text box widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. As before click the edit text button.


You will now be presented with a text editor. While inside this editor add the words “Click Me – Part 2″  in large H1 font size and save the text.

 

Add a “HTML Feed” widget from the Widget Gallery by clicking the new widget button in the bottom left, finding the widget in the list and then clicking on its name.

NOTE:THE WIDGET GALLERY CAN STAY PRESENT ON YOUR SCREEN UNTIL YOU CLOSE IT. THIS IS PARTICULARLY USEFUL IF YOU WISH TO ADD MULTIPLE WIDGETS TO YOUR DASHBOARD

 

Step 2 – Modify your JavaScript function

To progress from the previous part to this tutorial, the JavaScript will need modifying so several widgets can use the same function. Access the Edit Dashboard window as you did in Part 1 (press the spanner in the top right hand corner of the dashboard builder screen). Change the JavaScript to the following

[snippet id=”31″]

 

Notice here, we have substituted ‘#widget1′ for ‘.clickme’. This enables us the call the function from several widgets within the Dashboard. Scroll to the bottom and press update. You can now close the dialog.

 

Step 3 – Adding the Function to your Widgets

Now we need to add the ‘clickme’ function to our new widgets. To do this, click the spanner icon on the first Dynamic Text Box widget.

Scroll down the the CSS Classes parameter and enter clickme into the text box. Scroll all the way to the bottom and click Update. Repeat this for the other 2 Widgets and then view your dashboard. Clicking on the widgets should now show a popup box with “Hello World” in there!

TIP:You can press the Enter or return keys instead of scrolling to the bottom of the properties to update the widget.

 

For extra information, guidance and troubleshooting consult:

 

Simon Marsland

JavaScript 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: