Drag & Drop Components in Xcelsius (in 3 steps!) [Bonus: Invisible Objects!]
Wouldn’t it be great if you could drag and drop a component on the screen? For example, moving a divider left and right? Well now you can with these simple steps.
As a bonus, this tutorial will also teach you how to make objects invisible even if they don’t have a “transparency” property in Xcelsius (or adjust the transparency dynamically within the dashboard)!
So read on…
The logic relies on my previous post for dynamic objects (http://scn.sap.com/docs/DOC-43390), so be sure to read that post first. There will be 2 components: an icon component (which will move left and right when dragged) and a horizontal slider (which will be invisible, but which will control the drag & drop)
1. Add element to drag & drop
First prepare these spreadsheet formulas:
a. Prepare Spreadsheet
A1 = “Minimum”
A2 = “Maximum”
A3 = “Value”
A4 = “Pixel”
B1 = 0
B2 = 1000
B3 = 500
We’ll fill B4 later: it will be an equation to translate the value of the slider (in B3) into the pixel number where we want the icon to be (B4).
b. Icon Component
Now add the Icon component which we’ll move around. Assign the dynamic visibility to $B$4 – like in the previous post (LINK), we’ll edit the XML file by hand to change ‘dynamic visibility’ to ‘x-position’
Dynamic Visibility Display Value: $B$4
c. Horizontal Slider
This will control the position of the Icon component. Don’t worry if it looks ugly – the slider will be <b>invisible</b> by the time we’re done
Minimum Value: $B$1
Maximum Value: $B$2
Here’s what all of this looks like:
2) Setup bindings
Now let’s go and edit the XML file manually as in this post (LINK)
a) Bind x-position of Icon to B4
Search for “displayStatus” in the XML file and replace it with “x”. Now the x-position of the icon is linked with the cell $B$4 (which will be linked to the horizontal slider when we put its equation in)
b) Make slider invisible
In the paragraph about the slider, add the alpha=0 property (this sets the opacity to zero) as in the following image by adding the lines
3) Adjust pixel scale (cell $B$4)
Now that everything is ready, save the XML file, clean up the .xlf file and re-open it with Xcelsius. We still need to adjust the value of cell $B$4. To this by trial and error until the icon lines up with the drag & dropping when you pull on the *invisible* slider.
So you’ll need to write something like B4 = 400 + B3 * 2
where the numbers (400) and (2) need to be adjusted, and depend on where you placed the horizontal slider, and how big you’ve made it. I’ll let you play with it as it’s a great learning experience.
And you’re done
Just drag and drop the invisible slider, and the icon will move left and right.
As in my other tutorials, this in itself is not particularly amazing (a drag & drop green circle isn’t the most useful dashboard tool) but hopefully you’ve learned a bit more about Xcelsius and how to edit its XML file. And now you know how to use dynamic positioning AND can dynamically adjust an object’s transparency!