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:

 

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:

Show hide CSS

Creating a Show / Hide widget button in the dashboard

Difficulty: Intermediate

Estimated Completion Time: 15 Mins

Version: 1.7+

In this topic we will show you how to use CSS and HTML to create a +/- button that will show and hide another widget in the dashboard. For optimum performance the process works by actually moving the widget off screen when the hide (-) button is pressed. When the show (+) button is pressed the widget is moved on screen. Because the widget was already loaded off screen it appears immediately and not data reload is needed. You will first need to Login to the dashboard builder to start the tutorial.

 

Step 1 – Add a Dynamic Text box widget

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 CSS/HTML code snippet. Scroll to the bottom and press update. You can now close the dialog.

[snippet id=”2″]

Step 2 – Add the second Dynamic Text box widget

Add another Dynamic Text box widget and like in Step 1 paste the following code into the Chart Template section. Once again scroll to the bottom and press the update button. You can now close the dialog.

[snippet id=”3″]

Step 3 – Add the widget you want to show/hide

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 is used in the following CSS code which needs to be added to the bottom of the CSS Style sheet property. This is located in the edit dashboard window. To access the Edit dashboard dialog press the spanner in the top right hand corner of the dashboard builder screen.

[snippet id=”4″]

That’s all done. Please enjoy your show/hide buttons! 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 hiding multiple widgets or even changing their position on the screen when you press the show/hide buttons.

For extra information, guidance and troubleshooting consult: