Set up a navigational image button

Contents[Hide]

1. Overview

This article shows you how to configure a button component to display an image and perform a navigate action when clicked.

2. Steps

2.1. Create a target dashboard

First, create a new dashboard from the main menu and have it display a simple chart.

This will be the dashboard (Dashboard1) to navigate to.

2.2. Create a source dashboard

Create a second dashboard (Dashboard2) which will contain the navigational image button.

Go to the toolbar, click Components, and then select Button to add a button component to the canvas.

2.3. Set up the navigation

With the button selected on the canvas, go to the toolbar and click Navigate When Pressed.

Click Navigate When Pressed
Click Navigate When Pressed

In the Set up a Navigation dialog, choose a Navigate option from the following:

  • To a different view - This is the default. Use this option for this example.
  • To a URL
  • Back - This is for navigating back. You use this on a target dashboard to go back to the source dashboard.
  • To this same view

Next, choose the Open option:

  • In the same window - This is the default. Use this option for this example.
  • In a new window

Finally, select the target dashboard to navigate to.

Set up the navigation
Set up the navigation

2.4. Add an image to the button

Add an image resource to your project by dragging a PNG, GIF or JPEG image file from Windows Explorer or Finder to the Dundas BI Explore window.

The image will appear under the Images folder in Explore.

Select the button on the canvas and open the Properties window. Click the Look tab.

Expand the Rest Background property and set the Brush type to Image. Click the Select Image link and choose the PNG image from the Images folder.

Use an image brush for the button
Use an image brush for the button

Repeat the above steps for the Hover and Down states of the button using the same image or different images.

2.5. Adjust the button text

If you would still like to display text in the button go to its Text properties. There are a number of properties for setting the text, overflow, text alignment, and vertical text alignment which you can use to position the text below the image, for example.

Button text properties
Button text properties

2.6. Test the navigation

Switch to View mode and click the button to test the navigation.

3. See also

Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri