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)

Amount_Image_Component.jpg

units_Image_Component.jpg

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

Slider_General_Properties.jpg

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

Slider_Behaviour_Properties.jpg

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

slider_Appearance_Properties.jpg

slider_Appearance_Properties_2.jpg

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.

Image_Properties.jpg

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

Object_Browser.jpg

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

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Prasanna Pathade

    Nice trick. The overall component can be used instead of the traditional radio button. As radio button has a tiny clickable area, users find it tedious to click radio button. Instead, your idea can be used as the users may find it click-friendly.

    (0) 

Leave a Reply