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.
cancel
Showing results for 
Search instead for 
Did you mean: 
Karol-K
Advisor
Advisor

In Short

from the available styles in Design Studio - the "recommended" one is "Blue Crystal". You should use this when creating new apps, not the default one "Platinum".

Why?

Design Studio has started with many available styles for SAPUI5 controls, and all applications created on them are still running. Now, going forward SAP UI5 is supporting Blue Crystal as standard theme for Fiori UI and in the new mobile world (sap.m). Even Design Studio is not yet mobile "ready", some new UI5 controls are running only in the Blue Crystal theme.

In addition, some other functions are only available for Blue Crystal:

Compact Mode for sap.m.controls in Blue Crystal - User Interface Add-On for SAP NetWeaver - SAP Libr...

Difference?

Blue Crystal (top) vs Platinum (bottom)

-----

The Blue Crystal is an "flat design", WIKI: Flat design - Wikipedia, the free encyclopedia, with shadows on the components.

What to DO?

For new applications, create them based on Blue Crystal theme.

* btw, if you do not like the blue background, just assign CSS file which puts white background as body css class.


body {


  background: white !important;


}





For existing applications, you can still run them - there is no need of any migration. But, you can consider changing it - especially when you want to define company internal rules for styles and be prepared for Fiori "UI-compatibility"

Setting for the Style

In Design Studio, every application can have different style, the setting is on application level. This is the setting.


The default is "Platinum".

Community SCN SDK Extensions

Some of the extensions are looking nice only in Blue Crystal theme, this is because the components used from SAPUI5 are only styled properly in Blue Crystal.

Component List 2.0 - SCN Design Studio Community

The theme documentation:

     SAP Blue Crystal - User Interface Add-On for SAP NetWeaver - SAP Library

     SAP UX Explorer

     UI5_Developer_Guide_for_SAP_HANA

Moving Forward in Design Studio

Design Studio has in the roadmap better mobile support, styling is also part of this support. It is possible that in some release only the one supported style will be available - and this is the Blue Crystal style (as of today and the future plans).

Update / Removal of BLUE background

If you do not like the blue background and want to have this white, place this CSS in your custom css file:

body {

  background-image: initial!important;

  background-color: white!important;

}

8 Comments