Set Up a Navigational Image Button

This applies to: Managed Dashboards, Managed Reports

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

Create Your Dashboards and Button

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.

Create a source dashboard

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

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

Set up the navigation

With the button selected on the canvas, go to the toolbar and select 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.

Add an Image to the Button

You can use the image brush option to add an image to your button. For example:

1. Add an image resource to your project by dragging a PNG, GIF or JPEG image file from Windows Explorer or Finder to the Explore window. The image is added to the Images folder.

2. Select the button on the canvas, open the Properties window, and expand Lines & Fills.

3. Open the Rest Background property options and set the Brush type to Image.

4. Click the Select button and choose the PNG image from the Images folder in the dialog that opens.

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

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.

Test the Navigation

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

For more information, see:

• Using Image Brushes

• Set Up a Navigate Interaction