Mar
16

Customizing a Push Button component in Xcelsius

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.

Tags: , , , , ,

8 Responses to “Customizing a Push Button component in Xcelsius”

  1. Ken J says:

    Great technique that I have used for my models too. A couple of things I have used (and wished for) in conjunction.
    1) I often push a toggle value. You can should use “push” instead of “toggle” buttons because I give the the user several buttons to turn “off” or “on” a feature – like a pop up box. For example pressing the push button1 make s the pop up box visibible. Pressing the push button1 or another pushbutton 2 (shaped like an X -close button), will close the pop up. The toggle value in A1 uses a formula for a source : =if(a2=1,0,1) . This toggle value will get pushed into A2 – thereby flipping the toggle value in A1. Very simple but surprisingly useful in what I do.
    2) Your resizing of graphics images mention raises the following question, why is there not a resize technique that keeps images in proportion?? I have tried cntl, cntl alt, and all sorts of comibinations to no avail. Can’t they put a check box on the image component that says “keep in proportion”?

  2. Leonid says:

    –Ken
    I also often use pushing inverted values for toggling as in your example.
    In my coming posts about dynamic selection of check boxes I’ll show some practical applications of this potent technique.
    But instead of =if(a2=1,0,1) I prefer to use =(1-A2). It avoids logical branching and runs quicker.

  3. Ken J says:

    Yes. Great point. Anything to run faster. Looking forward to check boxes. I know some people think this may be “basic” stuff, but powerfully using the frequently used “basic” stuff is so much more important than the arcane.

  4. [...] two Check Box components to a canvas. We are going to extend the methods described in another post, Customizing a Push Button and combine check boxes and a push button into one custom push button. We also can use the Image [...]

  5. Peter says:

    Hi everyone,

    we develop several BI applications looking like websites or native programs and especially the push button helps a lot when switching different “windows” to the canvas. The push button itself would be always hidden (not visible) as the underlaying image shows something like a button to improve the usability for non-IT people. But the label of the push button should be shown as a “bubble help” everytime someone moves the mouse cursor to the button (without pressing it). In many cases that works fine, but some other cases do not show the label text. Has anybody an idea why and how to fix that issue?

    Thanks in advance, if you’re interested you may visit our website at http://www.office4ArchiNeers.de and press the demo button to see one of our xcelsius applications …

    Regards,
    Peter

  6. Peter says:

    … i forgot, you need to logon, just use “testuser” and “user4711″ for testing the application …

    Regards,
    Peter

  7. [...] the cells in the column G in the same row. 5. Make the push buttons transparent as explained in my Custom Push Buttons post. 6. Set the Item property of one of the check boxes in each set as a Checked and the other one [...]

  8. [...] Custom push buttons are created as described in Customizing a Push Button component in Xcelsius. [...]

Leave a Reply