SAP BLOG Switch between themes in SAP Analytics Cloud Applications

SAP Blog

Kayıtlı Üye
Katılım
22 Ara 2017
Mesajlar
1,580
Tepki puanı
7
Puanları
6

Introduction​


Switching between themes is very often part of modern applications. Especially switching to a dark mode becomes a common feature, that would also be a „nice to have“ in SAP Analytics Cloud Applications. This blog describes how to switch themes in a SAP Analytics Cloud Application and what you should be aware of while developing.

There is already a very good blog post concerning switching a theme with the help of CSS (Welcome to the dark side of Analytics – Enabling Dark Mode using Cascading Style Sheets in SAP Analytics Cloud Analytics Designer | SAP Blogs). In contrast to that we try to use common themes and reduce usage of CSS.

Implementation​


We already have a small Sales Planning Application implemented in SAP Analytics Cloud with BPC Live Connection. Application looks like the following image:

image001.jpg


Application is linked to a theme that nearly styles every component of the application. Application CSS is only used in exceptional cases and should be avoided.

image002-1.png


The header is designed by using background image called PAN_HEADER_IMG1_LIGHT.

image003.jpg


Implement Switch Element​


To enable a switch, we created a Switch element on the top called PAN_HEADER_SWITCH_01.

image004.jpg


Within the on-change function, we implemented the following coding to switch themes:

Kod:
if ( ThemeMode === „dark“ )
{
                ThemeMode = „light“ ;
                PAN_HEADER_IMG1_LIGHT.setVisible(true);
                PAN_HEADER_IMG1_DARK.setVisible(false);
                Application.setTheme(„440855848CD99CE15AF5463F2B2C6F77“);
                PAN_MAIN_TAB1_TABLE.setCssClass(„light-theme“);
}
 else{
                Application.setTheme(„58B065848CDA84AEBF1D8171D93972F0“);
                PAN_MAIN_TAB1_TABLE.setCssClass(„dark-theme“);
                PAN_HEADER_IMG1_LIGHT.setVisible(false);
                PAN_HEADER_IMG1_DARK.setVisible(true);
                ThemeMode = „dark“;
                }

Steering the switch function​


ThemeMode is a Script Variable, which sets the default value and tracks changes. It controls the switch and can be used, by other functions, to read the theme state. It is set to the current mode.

image006.jpg


Switch theme​


Application.setTheme is the main function which allows you to switch themes within your application. To use that function the ThemeId is needed. I could not find the ThemeId easily but finally I spotted it with the help of Google Development Tools in the network tab when opening the theme for change. The Request payload includes the RessourceID in that case ThemeId.

image007.jpg


A second theme needs to be created with the style for the dark theme. This will be handled later.

Hide and Show elements​


Switch header background image is another step executed simultaneously to the theme switcht to reduce loading times, a dark image object PAN_HEADER_IMG1_DARK was already created and set as hidden initially.

image008-2.png


While switching the theme, the light background will be set to invisible and the dark image appears in front.

Kod:
PAN_HEADER_IMG1_LIGHT.setVisible(false);
PAN_HEADER_IMG1_DARK.setVisible(true);

Switch CSS​


In some cases, a switch to a CSS class with the help of .setCssClass is needed. Especially when the theme does not cope with the design option you need.

image009.jpg


In our case we have to set the color for “Color Fill for Editable Cells” with the help of the CSS Class name light-theme. So, we enhanced the Application CSS with 2 styles, one for the light-theme and one for the dark theme.

image010.jpg


Kod:
.light-theme .sap-custom-table-editable-cell{
           background-color: #f0faf6;
}
.dark-theme .sap-custom-table-editable-cell{
           background-color: #8888;
           color: #ffffff;
}

During switch, we then set the CSS class correspondingly like PAN_MAIN_TAB1_TABLE.setCssClass(„dark-theme“).

Implement a dark theme​

Cleanup Application​


Set your elements back to theme preferences whenever it is possible. In the upper right corner of most of the elements you will find a button helping you with that task.

image011.jpg


Create dark theme​


Now copy your existing theme and select it within the application. There are 2 ways doing this. First, copy the theme in My Files area with the “Copy To” function.

image012.jpg


Second, you can save the Theme with the “Save as” function with the application.

image013.jpg


Design dark mode​


Now switch to dark mode within your application and start to adopt the theme to dark mode. Your changes within the theme are immediately shown while design time.

image014.jpg


Conclusion​


When switching the theme, you can move your SAP Analytics Cloud Application to a next level. The theme approach enables you to create your style with nearly a “WYSIWYG” support. Furthermore, you can use the same style sheets and functions for multiple applications.

Your toolset consists of

  • Changes in the themes
  • Hide and show elements
  • Adopt CSS Class

During implementation it is very important to try to use only CSS in exceptional cases.

The result of our implementation looks like this:

theme_2.gif


Okumaya devam et...
 
Üst