SAP Analytics Cloud: Canvas & Responsive layout design

Responsive, canvas, applications, story, optimised design experience (ODE) - reporting in the SAP Analytics Cloud (SAC) offers a wide range of options and layouts for creating stylish dashboards. But sometimes it's not so easy to understand the differences and effects of the various options. So let's take a look at how the individual options differ from each other and what advantages or disadvantages they offer.

Story in Optimised Design Experience, the chosen one

Basically, there is a choice between applications and stories and, within the stories, between story ODE and classic story. However, on closer inspection, this selection is no longer necessary. Essentially, all application functions were already integrated into the Stories ODE in mid-2023. Even if not everything went smoothly at the beginning, there is no longer any reason to rely on applications. The verdict on classic stories is even more damning. SAP has announced that there will be no complete functional parity, while at the same time announcing, that it will not be possible to create classic stories from 2025 onwards.

PopUp dialogue when creating a new story

But don't worry, classic stories can still be opened and converted. No date has been set for a complete turn-off of classic stories and is still a long way off, at least in 2024.

These are already good arguments for using the new stories, but the most important one may be that only Stories ODE will be further developed by SAP and all new reporting and dashboarding functions will only be available in these stories. The lack of complete functional parity can also be accepted since, with the Q3 update 2024, as the last major missing function - data blending - was added.

Responsive, canvas, grid... spoilt for choice

As soon as you want to create a story, you have the choice between a responsive, a canvas and a grid design. However, this is only half right, as the grid design is reserved exclusively for classic stories.

Grid design

The grid design is reminiscent of an Excel sheet with a very limited range of functions. Not only in direct comparison with Excel, but also with the other story designs.

The grid design is based on rows and columns, which create cells similar to those in Excel. The design mostly supports tables.

Classic story in grid design

Even if the new stories do not support a grid design, there are a few alternatives. The first would be to open a data source in the Data Analyser and save the desired drilldowns as Insight. If you prefer the look and feel of Excel, you can use either the new or old Excel plugin, depending on the data source. We have compared both Excel plugins in detail in this blog article. Last but not least, there is of course the option of linking a table in a new story.

Canvas design

The canvas design is versatile and complex. Basically, the name says it all: you start on a white page without any specifications. It is the most popular method of creating dashboards among design-loving developers. Whether dynamically scalable or with a pixel perfect look, the canvas design makes it possible. Of course, this freedom comes at a price - the perfect canvas dashboard is a lot of work. The complexity increases significantly, especially if the user group consumes the dashboard on different devices.

Fit to device...

...is the standard setting in canvas design and also the cornerstone for scalable dashboards. With this setting, the canvas, i.e. the visible dashboard area, is always aligned with the browser window or the mobile app. In principle, almost all widgets have the input fields Width, Left, Right and Height, Top, Bottom in the layout options under Size and Position. The value can be entered in pixels (px) or percent (%), whereby one of the three values is always set to automatic.

Layout options Size and position for widgets in the canvas design

Height & width

• always refers directly to the widget
• independent of other widgets

Left, Right & Top, Bottom

• always refers to the distance of the widget to the overarching element
• The overarching element can be the canvas in general or a container, such as a pagebook widget

Dashboarding with SAP Analytics Cloud -
Download the Whitepaper here! 

Pixel Perfect

In the canvas design, it is possible to position the dashboard size as well as the size and position of all elements pixel-perfectly. The emphasis here is on position, as the individual elements in the widgets such as chart bars or texts continue to adapt dynamically based on the data and are only partially controllable. However, nowadays pixel perfect dashboards have become a rarity and no longer offer the user a contemporary reporting experience.

Responsive design

Responsive design offers less freedom, but the realisation of dashboards is much easier. At first glance, it looks very similar to canvas design, but in the background there is a grid layout that scales with the available browser or app area. As a result, all widgets placed on the grid also adapt to the new size.

Responsive design with displayed grid

However, two important factors must be taken into account when scaling in responsive design:

• The individual fields in the grid change in width and height. This means that the widgets also change in width and height. However, the change is not always proportional, so it can happen that the widgets are displayed a bit more elongated or compressed depending on the resolution.
• The size of the fields in the grid depends on the available width. The available height has no effect and if there is not enough vertical space, scroll bars are simply displayed.

In addition to the scaling, there are other differences to the canvas design. The size and spacing of the widgets placed on the grid cannot be specified in pixels and per cent. Instead, only width, left and height, top with grid positions are assigned.

Layout options size and position for widgets in responsive design

However, this only applies to widgets on the grid design; if a container widget such as a tabstrip or panel is used, the widgets placed in it are again defined via the pixel and percentage specifications.

Layout options of a KPI widget within a container widget

Lanes are another special feature of responsive design. Even if a newly created story initially only has one lane, further lanes can be added vertically or horizontally. Lanes group the elements placed in the grid, and the responsive rules can be configured individually for each lane. These rules define how the widgets should be moved and arranged when the available space changes.

Configuration of responsive rules within lanes

With all these special options, it quickly becomes clear that responsive design is particularly suitable for dashboards that are consumed on different devices. But responsive design can also shine in self-service. Thanks to the underlying grid, uneven widgets are immediately noticeable and can simply be dragged larger or smaller without having to worry about exact pixel and percentage values.

Mix & Match

If you took a look at the top left corner of the last screenshots, you could already saw that canvas and responsive design do not have to be mutually exclusive within a story. Even if the application scenarios are limited, a decision can be made between the two designs for each newly created page. For example, a scalable canvas design can be implemented for laptops and high-resolution monitors without scrollbars. While tablets and smartphones access a page with reduced content in a responsive design. Which end device displays which page can then be controlled via scripting.

In addition, some properties of the canvas or responsive design can be simulated using container widgets. We have already seen that the Canvas area widget brings properties into the responsive design. It works the other way round with a flow layout panel widget in the canvas area. In both cases, the respective design rules for the entire dashboard and the placed container widget still apply. However, the rules of the container apply to everything in the container widget.

A clear recommendation...

...for one design cannot be given. Both have their advantages and disadvantages, depending on the requirements placed on the dashboard.

The canvas design can be controlled down to the smallest detail. Whether scalable dashboards, which always keep the entire content in the image section, or pixel perfect reports need to be implemented. However, it is much more complex to create visually appealing dashboards, as many detailed settings are required down to the exact percentage / pixel. With a few tricks, however, scalable dashboards can be created that look good on any end device.

If you are not afraid of vertical scrollbars, responsive design is the right choice. The content is much easier to position in a visually appealing way, the scaling works "out-of-the-box" and all common end devices and their resolutions are supported. If the IT department provides templates and an appropriately configured theme, it is child's play to create appealing dashboards in SelfService.

With the official launch of Story ODE in mid-2023, the responsive design has been significantly upgraded. Anyone who only knows the design from classic stories and wasn't convinced by it back then should definitely take another look...

Do you have questions about SAP Analytics Cloud or other topics? Are you trying to build up the necessary expertise in your department or do you need support with a specific issue? Simply get in touch with us - we look forward to exchanging ideas with you!