Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 

Last year, we introduced Responsive Lane Pages to SAP Analytics Cloud, enabling the creation of dashboards and Digital Boardrooms that adapt to various screen sizes and devices.

To provide greater design flexibility when creating responsive pages, we are pleased to announce improved lane reflow logic for tablet devices and smaller web browsers coming in the 2018.03 release.


Improved lane reflow logic

Logic for small and large screens remain the same. For large screens, each lane and widget proportionally shrinks. On very small screens, or phone-sized devices, a single widget spans the full page-width, with any additional widgets flowing below.

On medium-size screens (web browser resolutions between 768pm and 1024px, or viewed on medium tablet-sized devices) we have made the following improvements:

  • Medium-size screens now support up to three lanes, side-by-side, with multiple break-point options.

  • In most cases, large lanes (larger than 50% of the screen) reflow to fill the full page-width. Notable exceptions include three-lane layouts where a large center lane has a smaller lane on each side, and six-lane layouts, where instead of a large lane, the page reflows with either two or three lanes per width.

  • Small lanes (anything smaller than 50% of the screen) should never span to fill the full page-width, and are displayed next to one or two other lanes.

  • Tiles (Charts, Tables, Text, Shape…) placed in a lane will stay together and resize proportionally when the screen size is reduced.

  • If a user chooses to disable a widget from displaying on mobile devices, nearby impacted widgets will resize to fill in the missing space.

When choosing the hide the bar chart on mobile view, the time series chart to the right fills in the open space.


Lane reflow examples

While not comprehensive of all layout possibilities, the following examples illustrate how a responsive page may appear when designed on a desktop, versus how it is displayed on a medium-sized screen. For one or two-lane pages, there is no lane reflow for medium-sized screens, and content scales proportionally.

Three Lanes

Four Lanes

Five Lanes

Six Lanes


What will happen to my existing responsive pages?

The improved lane reflow logic will be automatically applied to your existing responsive pages. You can use the  Device Preview Mode (located on the top menu bar) to review how your designs may appear on different screen sizes and devices, and to assess any potential issues.




Bonus Feature! Customizable font sizes per device, screen size

We’re glad you’re still reading, because we have one more very cool responsive feature! For those looking for greater control and accuracy on how their fonts display on different devices and screen sizes, one can now select specific sizes from within the  Device Preview mode. Fonts may be changed per device, per widget, and changes can be made either to all text, or a specific text selection (chart title, subtitle, legend, etc.). We’ve also included a “Reset” button, which appears after a text change has been made, to make it easier to return to default sizes.


Enjoy, and please do let us know of any comments or questions!


Additional Resources:
1 Comment