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.

Adam SmithUsing 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:

 

Leave a Reply