SAP Design Studio - Collapsible panels for richer user experience

[Former Member]

Introduction:

Reporting needs often require presence of multiple components in the layout along with a selector panel, but sometimes having it as a part of the layout makes it little cramped for space. Hence optimizing the screen space by toggling the visibility of the selector panel could come in really handy.

Collapsible panels for richer user experience:

Consider the following Design Studio application:

The application has a selector panel and a main panel. Selector panel contains a radio button, date selector, and two list boxes and the main panel contains a Grid Layout within which the charts and a cross tab are placed. The visibility of the selector panel is controlled by a filter icon image placed right above the panel. Using this, the selector panel is made to appear or disappear. This is achieved using BIAL (BI Action Language) scripts written in the on-click event of the image. Following is the script that was used to achieve this:

Here, 'FILTER' refers to the selection panel on the left and 'BODY' refers to the main panel.

Here's how it's done:

This functionality is achieved by resizing the main panel based on the visibility of the selector panel. Initially the application looks like this:

The left margin of the main panel is set at 0px. On clicking the filter icon, the selector panel appears and the main panel re-sizes itself and the left margin is now at 167px.

2. When the filter icon is clicked again the selector panel disappears and the margin of the main panel is set back to the original 0px.

Placing the charts inside a Grid Layout makes the code simpler as the Grid automatically re-sizes the components.

This method proves to be a space saver when there are lots of components to be displayed or when the components' size has to be bigger. This is really efficient especially while viewing the application on an iPad.