SAP Analytics Cloud Themes and Templates for more beautiful dashboards

Rafael

Written By: Rafael - 16 January 2025

Once the SAP Analytics Cloud has been technically implemented, users trained, and the first stories created, it often becomes apparent that a consistent design language is missing within the stories. Not every user has a keen eye for the design of a story. But even if basic guidelines are followed, it is often difficult to maintain a consistent concept across many stories with different creators. The severity of the differences can generally be categorised into four scenarios.

Scenario

User behaviour

Result

No specification

Users create stories according to their own preferences

  • No / little reflection of the company 
  • No uniform design
  • No uniform structure
  • Often no ‘red thread’ within the story

Corporate identity

Users try to adhere to the familiar corporate identity

  • logo and corporate colours are used
  • no uniform design
  • no uniform structure
  • often no ‘red thread’ within the story

Design guidelines 

Users try to adhere to the design guidelines

  • logo and corporate colours are used
  • overall design is mostly uniform
  • no uniform structure
  • often no ‘red thread’ within the story

Story Guide for creators 

Users are trained and effortlessly create consistent and structured stories using SAC resources

  • Logo and corporate colours are used
  • overall Story Design Consistent
  • consistent structure
  • there is a common thread running through the stories 


Of course, the fourth scenario is desirable and achievable because the SAC has functions to create a unified design. Themes and Templates make it easier for the users to to create dashboards.

Design concept – the first step to successful reporting

Themes and templates are predefined design and structure templates that enable a uniform appearance and a consistent user interface across different stories, thereby standardising the creative design process to a large extent. Therefore, the first and actually indispensable step is to create a design concept. Depending on which of the above-mentioned scenarios you are in, this may be more or less complex. If well-structured design guidelines that can be applied to the SAC are available, a design concept can be derived relatively easily. If corporate identity guidelines are available, the effort is significantly greater, but also allows more leeway. If no specifications exist, you start from a ‘green field’. This is of course the most work, but it also offers the designer the greatest freedom.

This is where we come to the keyword ‘designer’. In the frontend, this term is often equated with the developer or creator. For the creation of a design concept, it is worthwhile to work with professional designers. This brings a breath of fresh air, as well as new ideas, and thus leads to a better end result. Working with a designer is worthwhile in almost all scenarios, whether a complete concept is to be created or an existing one is to be rethought.

Themes – uniform designs for stories

As soon as the design concept is in place, the first theme should be created. This can be done very easily via the menu of any story.

Blog_SAC_Themes_and_Templates_01Open a theme


A quick tip at this point: it is possible to customise the standard SAC theme. However, the best way is to create your own and then set it as the standard. If you really want to work reliably with themes in the long term, you should also create a dedicated theme story with the most important widgets visualised as an example. This is, of course, additional work, but it pays off in the long term.

The theme is then edited in a separate editor. In this editor, the design of all widgets can be changed and the range of functions is almost the same as that of the designer during the development of the story.

Blog_SAC_Themes_and_Templates_02Theme settings


At this point, it must be noted that all settings in the theme editor only specify the default design. The story creator can still independently adjust the appearance of all widgets and does not have to adhere to the specifications.


Dashboarding with SAP Analytics Cloud -
Download the Whitepaper here! 

SAP Analytics Cloud Whitepaper


Cascading Style Sheets (CSS) in themes

Themes also support CSS, but do not have their own CSS editor. The CSS is always loaded from the active story. This is another reason to configure the themes using a specially created story for that purpose. Using CSS in themes has advantages and disadvantages, as well as some special features that should be noted.

Advantages

Disadvantages

More and more refined design customisations (compared to the editor)

CSS customisations are not visually visible in the theme editor 

Can contain CSS code that is not directly applied (CSS library)

CSS always overwrites the default settings in the theme editor

Designs that have been defined cannot be changed by the user

CSS applied in the theme cannot be changed in the design settings

 

Special features of CSS defined in the theme: 

  • can only be overwritten with CSS in the story
  • is still class-based and can be used globally in the story, either in whole, in part or not at all


CSS in the theme can be a double-edged sword and should be used with care. Widgets whose design should not be changeable by the user, or design adjustments that cannot be made in the editor, are suitable as content for the global CSS class. In addition, CSS classes should be stored for the most frequently used designs, for example panel borders or shadows. These are deliberately used and not attached to every panel, but of course they should also be used consistently.

Templates as a blueprint for quickly creating dashboards

In addition to themes, templates are also part of the toolbox for good story design. Templates are created from a story and can then be loaded into stories or opened directly as a template for a new story. Like stories, templates are stored in the SAC folder structure or can be selected directly from the story panel.

Blog_SAC_Themes_and_Templates_03Templates in the SAC story panel


In principle, a template can be created from any story, but it makes sense to create a dedicated story for each template. This story is then structured and designed, preferably with an example of data. Don't worry, these data sources are automatically removed and replaced with a placeholder when the template is created. The created template then looks like this:

Blog_SAC_Themes_and_Templates_04Template with chart and table


The template always opens as a new story and can immediately be provided with data sources. Via the layouts menu, it is possible to customise the template per page or to apply several templates to different pages.

Of course, it will not be possible to provide each scenario with a template 1:1. This is not necessary either, since the template serves as a structure and the story can still be customised. So in the above case, it would be possible to simply replace the table with another chart or insert a third panel below the existing ones.

Conclusion: design, themes and templates

Themes and templates are important tools in SAC for implementing a consistent design. They are indispensable in a self-service approach with many users creating stories. But even if the stories are created centrally by a few developers, themes and templates help to implement a consistent design in the long term. However, the design concept always remains the central point. It forms the basis and contains all the important specifications that are implemented using themes and templates. Even if the design concept adapts and changes over time, it is easy to implement these changes in the SAC using themes and templates.

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!  

Learn all about SAC

Topics: SAP Analytics Cloud, Dashboarding

Share article