Rob BradburyJavaScript 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:

 

Leave a Reply