Profile photo of adamsmith

About adamsmith

Work at NetNow as a IT Consultant, Pre-Sales Engineer and Trainer. In my spare time I keen runner, swimmer and triathlete.
Email Address
adam.smith@netnow.co
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:

 

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: