Set up a navigational image button
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.
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.
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.
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.
2.6. Test the navigation
Switch to View mode and click the button to test the navigation.