One of the cool additions introduced in Xcelsius 2008 SP3 was a Push Button component. Now, with just a click of a button, you can copy (push) not only a single cell value, but multiple values in the contiguous range of cells to the destination range of the same size. You can also customize the look of a Push Button component to match dashboard requirements.
This tutorial illustrates how to create a custom Push Button by layering it on top of an Image component. To start:
1. Add a Push Button component to the canvas and select its properties.
2. On the General tab clear the text in the Label property and set Source Data and Destination properties as required. For this demonstration I set them correspondingly to the ranges $A$2:$A$6 and $B$2:$B$6.
3. Resize the Push Button dimensions as required by design.
4. Prepare an image file to be combined with the button. To avoid image distortion it should be proportionally similar to the desired dimensions of the Push Button. As an example, I copied from Google images an icon that symbolizes the Select All function.
5. Add an Image component to the canvas and on the General tab click the Import button. Although the label next to the Import button says JPEG or SWF options, Xcelsius also accepts BMP, GIF and PNG files.
6. Import the image file and check Resize Image to Component option.
7. If needed, resize both components to the same dimensions.
8. Place the Push Button on top of the Image component. To assure a proper layering apply Send To Back to the Image component.
9. Select the properties of the Push Button component, go to Appearance section and on the Layout Tab drag the Transparency slider to 100%. Alternatively, we can uncheck Show Button Background option on the same tab.
10. To ease maintenance, select both components and Group them together.
11. To visualize what happens under the hood, add to the canvas a Spreadsheet Table component with its Display Data property pointing to the range $A$1:$B$6.
12. Open Preview and test. It should be similar to the screen shots depicted below:
 |
 |
|
Preview on Load before click on a Push Button. |
Preview after click on a Push Button |
Combining a transparent Push Button component with an Image component underneath allows for a customized look and feel of the dashboard, enriching user experience.
Leonid Koyfman is a BI professional with over 10 years of experience in a database design and development and in delivering reporting solutions using enterprise reporting technologies. He is a big Xcelsius enthusiast passionate about dashboard design and other kinds of data visualization. In his leisure time Leonid enjoys solving mental puzzles and hiking in the Bay Area with his family.