Adam Smith

Using the radio button widget – Part 2

Widget Tutorial

Difficulty: INTERMEDIATE

Estimated Completion Time: 10 Mins

Version 1.8+

Using the Radio Button to drive other widgets - Part 1

In part 2 of this tutorial we will show you how to use the radio buttons to dynamically change which web page is displayed to the user. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial and load up your dashboard from part one of the tutorial.

Step 1 – Add a Web Page widget to your dashboard

Start by editing the dashboard you created in Step 1 of this tutorial as we will now build on this first tutorial by connecting a second widget to our radio buttons. Add a Web Page widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. From inside the Web Page widget locate and press the spanner icon shown below:

We are going to update the properties of the web page widget so that when a radio button is clicked by the user this widget will obtain the selected option and automatically use the value as input for the website to display. Once inside the widget properties panel you will need to change the following properties:

 

  • Overwrite the “Chart Data Source” to “http://www.bbc.com”.

This setting tells the web page widget to display the BBC website by default

  • Set the “Selection Source” to “widget1“.

This setting tells the web page widget to accept input from widget1

  • Set the “URL Converter” to “replaceURL“.

This setting tells the web page widget to use the input from widget1 to replace the default website to display.

 

Then click “Update” at the bottom of the properties panel. You have now created a dashboard which changes a Dynamic Text Box and a Web Page widget using values stored in a Radio Button!. Please view you dashboard to see how it works. You are now finished Part 2 of the radio button widget tutorial!

TIP: Radio button can be used to drive many different widgets in the dashboard.

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:

 

Working with alerts – Part2

Alerts Tutorial

Difficulty: Advanced

Estimated Completion Time: 20 Mins

Version 1.7+

In part2 of this tutorial we will be performing some analysis of the alerts data that has been returned by the web service to help decide what styles and formatting should be applied to the alerts before displaying them. So let’s get started! You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Style the alerts table with CSS

Once again locate and press the spanner icon for the Dynamic Text widget and locate the Chart Template property. In this property insert the following code snippet at the top of the window before all the existing code. This CSS will apply styling to the the table. Now scroll to the bottom and press update and then close the dialog.

Note: you may need to drag and expand the Dynamic text box widget to accommodate the new styling

[snippet id=”24″]

 

Step 2 – Check & Set the state colour

Once again locate and press the spanner icon for the Dynamic Text widget and locate the Chart Template property. In this property insert the following code snippet at the top of the window before all the existing code. This is a function to check the state field and return a colour depending on its value. We will use this function in the next step of the tutorial to style this column of the table dynamically.

[snippet id=”25″]

Step3 – Call the function to set the colour of the state field

Scroll down through the code in the Chart Template section until you reach the bottom where the code to populate the table is located. Now replace the entire line that reads <td class=’c4′>${a.ServiceState[0]!}…… with the following code snippet. This is a revised version of the previous line of code that incorporates the function to check the state and assign the correct colour.

[snippet id=”26″]

Step4 – Assign CSS style to State column

Now replace the entire line that reads <td class=’c7′>${a.ObjectState[0]!}….. with the following code snippet. This is a revised version of the previous line of code that checks the Obectstate and assigns it to the CSS class “error” if its is “unavailable”. This CSS class will cause the field to display in red. Finally set the “Refresh Interval” property to a value of 4 so that you alerts table keeps updating regularly. Now scroll to the bottom and press update and then close the dialog.

[snippet id=”27″]

That’s all done!.Please enjoy your improved alert table Advanced users should check out the resources below where you will find a link to the Freemarker Template’s documentation.

TIP: You can use Freemarker Templates in the Chart Data Source too!

Freemarker templating can also be used in the Chart Data Source of the edit properties dialog, not just on the Chart Template section.

For extra information, guidance and troubleshooting consult:

 

Working with alerts – Part1

Alerts Tutorial

Difficulty: Advanced

Estimated Completion Time: 20 Mins

Version 1.7+

In this two part tutorial we will show you how to read and manipulate alerts from the dashboards testing data service. This service can aid development by providing simulated alert data to design and develop you solution with. Once you have finished development switching to a live data feed is usually quick and easy to do. In part 1 we will focus of connecting to the alert data and displaying it on the screen. Part 2 will build on this tutorial by performing analysis and formatting of the alerts before displaying them. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Connect to the alerts service

Add a dynamic text box widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. Locate and press the spanner icon to edit the widget. While inside the edit properties dialog locate the Chart Data Source property and paste the following code snippet into the property box. While still inside the edit properties dialog locate the Data Source Type drop down and assign it to XML.

Note: we are fetching only 15 alerts.

[snippet id=”19″]

 

Step 2 – Display the Title Text

Continue to scroll down and locate the Chart Template property. In this property paste the following code snippet to display the title text. Now scroll down and press update to save and close the dialog to see the results.

[snippet id=”20″]

Step 3 – Create a table for the Alerts

Once again locate and press the spanner icon for the Dynamic Text widget and locate the Chart Template property. In this property append the following code snippet at the bottom after the snippet from Step 2. This will create the table for the the alerts. Note: Each “th” line in the code adds a new column to the table. The classes c1-c7 can be used later to style the table. Now scroll to the bottom and press update and then close the dialog.

[snippet id=”21″]

Step 4 – Populate the table with the alerts

Finally you need to paste this code snippet after the snippet entered in step 3. Each “td” line in the code adds data to the table. The code snippet uses Freemarker templating language to store the alerts in a variable called “a”. It then loops all the data adding a row to the table for each of the alerts. We cover more on how to use freemarker templating in later tutorials. Again save by pressing update and close the to see the results.

[snippet id=”22″]

That’s all done!.Please enjoy your alert table. Now be sure to continue to Part 2 where we will see how to apply some nice formatting to our alerts table!

TIP: You can see the raw XML testing alert data

Advanced users can may want to access the test alert web service directly from the NetNow home menu system. Look under Web Services -> TestAlert you where you can browse the raw XML data that gets return to the dashboard from the web services.

For extra information, guidance and troubleshooting consult:

 

Using the test data services

Test data services

Difficulty: Advanced

Estimated Completion Time: 20 Mins

Version 1.7+

In this tutorial we will show you how to attach a widget to the dashboards testing data via the testing data web services. The testing data services provide three main types of data – random text, random numbers and test alerts. In this tutorial we will focus of the first 2 types, text and numbers, test alerts in covered in a later tutorial. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step1 – Add two dynamic text box widgets to the dashboard.

Using the new widget button in the bottom left hand corner of the dashboard builder screen add two Dynamic text box widgets to the dashboard. Now position the widgets in the centre of the screen one below the other.

Step2 – Assign the random text datasource

Locate and press the spanner icon for the first dynamic text widget [#widget1). While inside the edit properties dialog locate the Chart Data Source property and paste the following code snippet into the property box. Now just press enter to save and close the dialog. This code snippet points the widget at a web service that generates random text.

[snippet id=”13″]

Step3 – Assign the random number datasource

Locate and press the spanner icon for the second dynamic text widget [#widget2). While inside the edit properties dialog locate the Chart Data Source property and paste the following code snippet into the property box. Now just press enter to save and close the dialog. This code snippet points the widget at a web service that generates random numbers between 20 and 95.

[snippet id=”14″]

Step4 – Display the random Text

Locate and press the spanner icon for the first dynamic text widget [#widget1). While inside the edit properties dialog locate the Data Source Type drop down and assign it to XML. Continue to scroll down the properties dialog and locate the Chart Template property. In this property paste the following code snippet to display the random text. Now just press enter to save and close the dialog.

[snippet id=”15″]

Step5 – Display the random Number

Locate and press the spanner icon for the second dynamic text widget [#widget2). While inside the edit properties dialog locate the Data Source Type drop down and assign it to XML. Continue to scroll down the properties dialog and locate the Chart Template property. In this property paste the following code snippet to display the random number. Now just press enter to save and close the dialog.

[snippet id=”16″]

That’s all done. Please enjoy your new menu random data widgets! View the dashboard using the View dashboard button located in the top right section of the dashboard builder. You should have already noticed the random data appear.

TIP

You can set the “Refresh Interval” interval property and have the widget go and collect random data at timed intervals. To try this locate and press the spanner icon for the either dynamic text widget. While inside the edit properties dialog locate the refresh interval property and assign it a value greater than 0. This property defined the number of seconds to wait before fetching a new random value. Setting the value to 0 means the widget will only fetch one value at load time. Now just press enter to save and close the dialog.

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:

Tabbed menu bar

Creating a tabbed menu bar in the dashboard

Difficulty: Intermediate

Estimated Completion Time: 15 Mins

Version: 1.7+

In this tutorial we will show you how to use this HTML and CSS to create a tab based menu system. Each menu item provides a new tab section where different widgets can be placed increasing the amount of space available for widgets. You will first need to Login to the dashboard builder to start the tutorial.

 

Step1 – Let’s add a Logo to the dashboard using an image

Add a Dynamic Text box widget using the new widget button in the bottom left hand corner of the dashboard builder. Now edit the properties using the spanner. In the Chart Template section paste the following HTML code snippet. Scroll to the bottom and press update. You can now close the dialog [snippet id=”7″]

Step 2 – Now we will add the menu bar using a tab widget

Now we will add the menu bar using a tab widget. Add a tab widget using the new widget button and like in Step 1 paste the following code into the Chart Template section. This widget should be assigned id (#widget2) by default. This id will be used later on in the tutorial to style the menu system when we will assign background color and font. Once again scroll to the bottom and press the update button. You can now close the dialog. Now drag the tab widget and locate it in the centre of your screen. You can also move the logo widget from step 1 to the top [snippet id=”8″]

Step 3 – Add any other widget you like

Add any other widget you like using the new widget button in the bottom left hand corner of the dashboard builder. This widget should be assigned id (#widget3) by default. This id will not be used in this tutorial. The new widget is now going to be placed on to the “Menu Item 1″ tab section of your tab page widget. To do this simply drag the new widget and drop it in the center of the tab widget. Finnaly we will style the menu. To apply the style to the 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=”9″] Don’t worry that there is a lot of code! This code snippet is applying CSS rules which we cover in another tutorial – Diving into CSS. 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 screen.

TIP:

You can get fancy by using multiple menus or even combine them with a show/hide button – see the following tutorial for further details.

For extra information, guidance and troubleshooting consult: