David Harwood

Changing the Styling of a Widget

Reporting Gauge Tutorial

Difficulty: BASIC

Estimated Completion Time: 5 Mins

Version 1.8+

For each widget there is a “Chart Template” property, this can be altered to change the look and feel of any widget. In this tutorial we will show you some basic styling tips to change the appearance of the Angular Gauge widget. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add an ‘Angular Gauge’ Widget to your Dashboard

Add a Angular Guage widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. Open the Angular Guage widget properties menu by clicking on the spanner button in the top right hand corner of the widget.

Once you have opened the Properties menu, scroll down to find the ‘Chart Template’ field.

Step 2 – Increasing the amount of ‘segments’ on the gauge

When you first load the Angular Gauge widget there will be three different segments on the gauge, one from 0-75, one from 75-90 and one from 90-100. For this example we will create another segment, so we have four equally sized segments. To do this in the Chart Template field locate the <colourRange> tag and replace it with the following:

[snippet id=”35″]

Step 3 – Changing the colour of the gauge

In the previous step we created four segments for the gauge, in this step we will assign them different colours. The colour can be changed by changeing the ‘code’ values in the <colourRange> tag, this code is a hexadecimal code and they can be found on a range of different websites. For this example we will change the colours to light blue, slate blue, beet and maroon:

[snippet id=”36″]

Step 4 – Configuring the gauges start and end angles

By default the Angular Gauge spans 180 degrees, it is possible to change this so you can draw the gauge from virtually any start angle to any end angle. At the very top of the Chart Template field there are two parameters (gaugeStartAngle=’180′ gaugeEndAngle=’0′). These two values signify where the gauge will start and end. Below are some images which depict how the Angular guage comprehends angles:

gaugeangles

In this example we are going to make the gauge a full circle. This can be done in a number of ways (for example setting the gaugeStartAngle to 0 and the gaugeEndAngle to 360), however for this example we will set it so the start and end point of the gauge is on the left side of the widget. By following the image as a guide, to do this we will need to set the gaugeStartAngle value to 180 and set the gaugeEndAngle to -180.

Once you are finished, scroll to the bottom of the properties and press update. You can now close this dialog. This tutorial is now done. You can now view your dashbaord and you will have a differently styled angular gauge!

For extra information, guidance and troubleshooting consult:

 

Matthew Sweeney

Connecting to a Data Source Part 1

Connecting Data Tutorial

Difficulty: BASIC

Estimated Completion Time: 5 Mins

Version 1.8+

In this three part tutorial we will show you how to connect a widget in your dashboard to a data source. Each widget has a “Chart Data Source” property which must be set to the URI of the web service (or file) that provides the widget’s data. In part 1 we will focus on configuring an ‘Absolute URI’, which can be used when the web service will always be at the same location e.g. an RSS feed. Part 2 will build on this tutorial by configuring a ‘Relative URI’, used when the web service is local to the server that the dashboard is running on. The final part of the tutorial will look at connecting a widget to the dashboard’s own built-in test data generator. So let’s get started with part 1. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add a ‘Web Page’ Widget to your Dashboard

Add a Web Page widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. Open the Web Page widget properties menu by clicking on the spanner button in the top right hand corner of the widget.

Once you have opened the Properties menu, scroll down to find the ‘Chart Data Source’ field.

Step 2 – Add your Absolute URI to the Chart Data Source field

Once you have located the ‘Chart Data Source’ field in the widget properties menu, you can now enter the URI of your data source. You can simply copy and paste your URI into the field e.g.

Now scroll to the bottom and press ‘Update’. You can now close the properties menu. That’s all done! Now view your dashboard and you should now be able to access your URI data source through your dashboard. Please continue to Part 2 where we will see how we can connect widgets to a Relative URI!

For extra information, guidance and troubleshooting consult:

 

Adam Smith

Using the radio button widget – Part 1

Widget Tutorial

Difficulty: BASIC

Estimated Completion Time: 10 Mins

Version 1.8+

Using the Radio Button to drive other widgets - Part 1

In this two part tutorial we will show you how to use the radio button to drive other widgets in your dashboard. In part 1 we will focus on changing the text in a dynamic text box. Part 2 will build on this tutorial by changing the web page address on a web page widget. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add a radio button widget to your dashboard

Add a Radio Button widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. From inside the Radio Button widget locate and press the spanner icon shown below:

You will now be presented with the properties of the widget. While inside the properties, overwrite the contents of the Chart Template box with the following html:

 

[snippet id=”32″]

 

Also set the “Data Source Type” to “Text / HTML”. Then click “Update” at the bottom of the properties panel.

Step 2 – Add a  Dynamic Text Box to your dashboard

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 shown below:


You will now be presented with the properties of the widget. While inside the properties, overwrite the contents of the Chart Template box with the following html:

[snippet id=”33″]

 

Also set the “Selection Source” to “widget1″. Then click “Update” at the bottom of the properties panel. Congratulations you’ve finished Part 1. Change to view mode and you should then be able to click on the different radio buttons and see the values populate the Dynamic Text Box widget!
&ncsp;

NOTE:The snippet of code above uses Freemarker template language to display the selection from the radio button using a variable. It will display “http://www.bbc.co.uk” by default.

 

In Part 2, you can learn how we use the Radio Button widget to switch between web pages dynamically.

For extra information, guidance and troubleshooting consult:

 

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:

 

Adam Smith

Using CSS with Widgets

Setting the background colour of a Widget

Difficulty: BASIC

Estimated Completion Time: 5 Mins

Version 1.8+

Setting the background colour of a Widget

In this simple tutorial, you will learn how to set the background colour of a widget using CSS. CSS can be used to style the widgets appearance in many different ways and this tutorial is designed to introduce you to the concepts and show how to get them working. 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 change the background colour

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 “Change My Color”  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 CSS to change the colour of the widget

To change the colour of the widget you will need to add the following code snippet in to the CSS Style Sheet 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=”30″]

 

Scroll to the bottom and press update. You can now close the dialog. That’s all done! Now view your dashboard and see that the widget has changed colour!

 

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:

 

Centering content css

Centering content in the browser

Difficulty: Easy

Estimated Completion Time: 5 Mins

Version: 1.7+

In this tutorial we follow on from an earlier tutorial entitled tab-menus. We will build on this example by now centering the logo and menu system using CSS. You will first need to Login to the dashboard builder to start the tutorial.

Step1 – task is to assign both the widgets we want to center an equal width.

To do this first edit the dashboard from the earlier tutorial by locating it in the dashboard list. Once inside the edit session now locate and press the spanner icon for the logo widget [#widget1) and the tab menu widget (#widget2). While inside the edit properties dialog locate the width property and set its value to 1000. Now just press enter to save and close the dialog. Advanced users could also assign the width using CSS as follows.

[snippet id=”12″]

Step 2 – Now for the magic CSS!

To center the logo and menu system add the following code snippet to the bottom of the CSS Style sheet property. 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=”11″]

That’s all done. Please enjoy your new menu system! View the dashboard using the View dashboard button located in the top right section of the dashboard builder. Try and resize the screen or access it from a different device like a mobile and you will notice everything remains central. The trick is to set the left margin property of the widget to half it’s overall width.

TIP

You can check the widget id of any widget on your dashboard by simply hovering the mouse over the widget you want to know the if of. You will notice the id and co-ordinates of the widget appear in the bottom right hand corner of the dashboard builder screen.

For extra information, guidance and troubleshooting consult: