Skip to Content
Author's profile photo Former Member

Mobile-Adaptable SAP Dashboards


Expanding on this Blog ,

How to identify Xcelsius dashboard is running on Desktop or Mobile device?

SAP Dashboards has expanded beyond desktops to deliver HTML based mobile dashboards, albeit with some limitations. This poses some challenges, in terms of creating a dashboard, for both iPad and desktop, since some components compatible with desktop are rendered incompatible on the iPad.

Henceforth, it’s essential to learn to create mobile-compatible dashboards that can seamlessly be viewed on the desktop as well.

Identify the device platform

First, it is important to identify the device platform on which the dashboard is executed. This can be accomplished with the help of Source Data component.

Step 1:

Insert the following contents on the SAP Dashboards worksheet and add the Source Data component. Source Data component, on execution of the dashboard, simply copies what is given in the Source cell to the Destination cell.

source-data-component1.png (322×114)

Step 2:

Map the Source Data component as shown below,

map-source-data-component.png (606×198)

Step 3:

Map a Scorecard and preview the Source Data component functionality in desktop and mobile mode.

source-data-component-functionality-in-desktop-and-mobile-mode.png (631×232)

As you can see in the image above, the Destination cell in the mobile version shows nothing. The Data transfer does not occur from the Source to Destination, because the Source Data component is mobile incompatible. 

You can use this limitation to your advantage and develop adaptable dashboards as explained below.

Develop adaptable dashboards

Since, the Destination cell gets filled only on Desktop and not on iPad; we can map this cell to control the Dynamic Visibility of the components.

Let us assume a Business scenario, if a dashboard requires date selection functionality, you can include calendar component(which is not mobile compatible) and set of combo boxes for the desktop and mobile versions respectively. Then link the corresponding component’s dynamic visibility option to a cell whose contents are populated by the Source Data component, as explained in detail below.

Step 1:

Add a row to the existing worksheet and fill cell B4 with the below formula

= IF (B3=1, 1, 0),

data-insertion-in-source-data-component.png (606×510)

Step 2:

Add the calendar and combo box components to the dashboard. Subsequently, map their dynamic visibility as shown in figure below. Enter dynamic visibility key as 1 for the calendar component and 0 for combo boxes.

calendar-and-combo-box-components.png (563×494)

dynamic-visibility-of-combo-box.png (572×485)

Step 3:

Preview the dashboard in desktop and mobile node. Notice how the dashboard adapts to the device platform automatically by displaying the calendar component on desktop and combo boxes on mobile.

calendar-component-on-desktop-and-combo-boxes-on-mobile.png (676×257)


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Usefull document. Thanks

      Irshad M

      Author's profile photo Keith Fisher
      Keith Fisher

      thanks, this could be quite useful