Skip to Content

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 Library

Difference?

Blue Crystal (top) vs Platinum (bottom)

fs3.PNG —– fs4.PNG

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.

fs5.PNG


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;

}

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Karol,

    I think this is very good advice, especially considering that SAP’s stated User Experience Strategy is for “All applications & UI technologies to converge to the SAP Fiori UX”, which is enabled by the Blue Crystal theme.  Under this approach, I assume now that the existing iPhone templates (as shown below) are outdated and should no longer be used, particularly since they apply the now deprecated (as I understand it) aad_mobile_black theme.  Is that right?

    iPhoneThemes.png

    I expect that going forward, Design Studio apps for the iPhone can be developed just like those targeting iPad and desktop, using the Blue Crystal theme, with appropriate consideration being given to the screen size.  Would that be an accurate assessment?

    Regards,

    Mustafa.

    (0) 
  2. Mike Howles

    My feedback to Karol:

    Excellent, as always!


    My frank addition:

    Platinum/Gold Reflection are dead.  Stop using them.

    My advice to Design Studio team:

    Make Blue Crystal the Default, and deprecate even Platinum.

    My advice to designers:

    Learn F12 and Fiori/UI5 classes.

    (0) 
    1. Karol Kalisz Post author

      Hi Mike,

      I have placed this post to avoid a lot of “dead” apps are created in the meantime and then many customers will get the migration question / effort. as Design Studio has started unfortunately Blue Crystal was not yet there…

      I can only agree, for all apps – Blue Crystal – should be used to assure log term compatibility. It is really important if some overwriting via CSS is made on customer side, the CSS classes are not 100% compatible with other styles.

      Karol

      (0) 
  3. Jรถrg Rose

    Hi Karol,

    great advice, thats what we always do by default. It would just be great if we can have white and clean background by default in future without using CSS. Less coding is always better ๐Ÿ™‚

    Regards

    Jörg

    (0) 
    1. Karol Kalisz Post author

      Hi Jörg,

      this is defined in the UI5 theme, Design Studio has no influence on this background. To be honest, it got changed some days ago, I am sure there was a reason for this.

      for now, the only option is to overwrite it via CSS.

      Karol

      (0) 

Leave a Reply