SAP Dashboards, Xcelsius – iOS theme slider implementation

[former_member186809]

Those of you creating beautiful dashboards for iOS platform using SAP Dashboards (Xcelsius) should have come across the common requirement to provide iOS style slider/ switch rather than using the mundane toggle button or check box to toggle between two values.

Below I will demonstrate a workaround we did for a recent project, which have the similar functionality, look and feel.

Requirement:

Let’s say you need a slider to switch between ‘Unit’ and ‘Value’ of a product.

Pre-Requisites:

To start off, let’s list down the components we would need to achieve this-

1. Two appropriate images, with rounded corners
   which would resemble an iOS like switch – one each for Unit and Value (image
   with transparent background)

b. Horizontal slider component available in Xcelsius

  Implementation:

1. Drag and drop a horizontal slider onto the
   canvas
2. Place the two image components listed above, on
   top of the slider, one above the other so that the slider is not visible
3. In the General properties of the slider, set
   manual scale with minimum limit as 0 and maximum limit as 1
4. Map the data property of the slider to an excel
   cell, say C3. Now when the slider is in the left most position, C1 will contain
   the value 0 and on the right most position, C1 will contain the value 1

5. In Behavior tab of the slider component, set the slider movement property to increment by 1 and set the maximum and minimum limit as fixed

6. In the appearance tab of the slider component, disable the ticks and deselect the Title, Value and Limits property

7. Now set the dynamic visibility of the image components so that ‘Units’ image is visible when cell C1 is 0 and ‘Amount’ image is visible when cell C1 is 1.

8. For both the image components, make sure ‘Block Mouse Events’ property is unchecked.

9. In the object browser, your components should be ordered like shown below, so that the slider component is not visible to the user

Now based on the value of cell C1, you may display different charts for Units and Amount and you will get the look and feel of an iOS platform switch.

Have fun!!!

--END