Horizon Theme and Templates for Stories in SAP Analytics Cloud

[felixjonathan]

A new theme, templates, and sample story are now available in the SAP Analytics Cloud Community Content on GitHub to enable you to apply the Morning Horizon style to your stories in SAP Analytics Cloud!

The Morning Horizon theme is an evolution of the SAP Fiori design language, aimed at providing a more coherent and consistent user experience across SAP's product portfolio. It is designed to be simple, intuitive, and efficient, helping users focus on their tasks with minimal distraction.

Sample Story Based on the Morning Horizon Theme

In the sample story provided as part of the template package, you can see how a story will look like using the Morning Horizon theme, which includes:

• Cards with rounded corners and drop shadows that group together related information;
• Consistent headers and controls to standardize the experience across elements and pages; and
• A clean and minimal palette, with lots of white space, where color is used sparingly to highlight key information and reinforce semantics.

On the first page of the sample page, you can see the appearance of widgets that display data, such as charts and tables, and containers like panels. On the second page are all the filter controls, the comment widget, and other elements with the theme applied. 

Morning Horizon – Sample Story

Morning Horizon Theme for Stories in SAP Analytics Cloud

The theme defines all relevant styling aspects of the widgets in SAP Analytics Cloud, so you, as a story designer, can focus more on your data rather than on fine-tuning the colors of your widgets. For some aspects, you will need to apply a CSS class to widgets by adding the CSS class name in the Styling Panel.

A detailed CSS guide for the theme is available on our SAC Dashboard Design Best Practice page here: https://dashboarddesign.frontify.com/. After you have registered with your email address, you will receive an invitation to the guide. The information on the CSS classes themselves can be found under the top level navigation item "Optimized Story".

You can use following CSS classes for content cards with shadow, which can be applied to Panels and Flow Layout Panels.

• card

You can use following CSS classes for different Button use cases:

• acceptButton
• rejectButton
• emphasizedButton
• liteButton

You can use following CSS classes for different Text use cases:

• pageTitle
• pageSubTitle
• descTitle
• descContent
• link
• negative
• critical
• positive
• information
• neutral

Story Templates Based on the Morning Horizon Theme

We provide two templates to enable you to quickly apply the Horizon Theme to your own stories, ensuring a consistent look and feel across your SAP Analytics Cloud content and between it and other SAP applications.

The Report Template gives you the layout for a structured reporting page. The header summarizes high level the key message of the page with a title, short description, and overarching KPIs. Below that, you can place detailed breakdowns on the logical groups that visually group information on cards. On the second page of the Report Template is a layout with the overarching information on the left-hand side.

Report Template

The Exploration Template provides a structure to create a story for an exploration use case. It also starts with overarching information on the top and then provides one detail area, where you can create charts that go more in detail from left to right. You can then link the charts using the Linked Analysis feature (not part of the template) so that you can explore your data in more detail.

Exploration Template

Download Now!

You can download the package with the from GitHub:
https://github.com/SAP-samples/analytics-cloud-datasphere-community-content/tree/main/Technical_Samp...

Once you have downloaded the package, you can import it to your SAP Analytics Cloud system using the Transport feature. Once imported, the templates will appear on the Welcome to Stories page.

You can then create a new story based on the template in the Optimized Story Experience. In the editing environment, click on the placeholders and add your model to the story. You can then continue by defining the data that you want to show on each placeholder.

We’ll provide more information in a later blog on how to make larger changes to the default layout.

Best Practices When Applying a Theme to Stories

In SAP Analytics Cloud stories, there are three options that can influence the look and feel of story widgets:

• Theme, for styling the entire story;
• Widget styling, to define the style for individual widgets via the Styling Panel; and
• CSS class, for applying more granular styling to widgets than you can achieve via the Styling Panel or Theme settings.

In the story runtime, these settings are applied to the story widgets with the following priority order:

1. CSS classes that are defined in story-level CSS file
2. CSS classes that are defined in theme file
3. Widget local styling (via the Styling panel for each widget
4. Widget style setting defined in the theme

Based on these rules, if you would like to apply the theme to your story, you need to consider the following aspects:

• For new stories, avoid adding any specific widget styling in the Styling panel; stick with the default settings.
• For existing stories, reset all the existing widget styling to the default value and then apply the theme.

Local widget styling MUST be set to the default value so that the theme style settings can be successfully applied to the story, as the theme has a lower priority compared to the widget styling that is locally done via the styling panel.