Skip to Content
Author's profile photo Karol Kalisz

Design Studio SDK: Custom CSS Collector to dynamically attach more CSS files


Follwing up the comments on css reference topic in blog SAPUI5 Icon Explorer for Design Studio (in standard you can atach only one), just invested 30 minutes and wrote a dynamic CSS collector SDK…

How it Works

you have more than one CSS files, eg for better structures – just to not put all parts in single one CSS. Unfortunately, in standard you can attach only one CSS to the application. Then use the CUSTOMCSSCOLLECTOR:


in my example I have 4 CSS, one static (pink) and 3 dynamic (red, blue, green)


whcih I want to load dynamically, based on some parameters, like in this case an URL parameter XCOLOR:


leads to the script onStartup:

APPLICATION.createInfoMessage("Color:; " + XCOLOR);
if(XCOLOR == "RED") {
  CUSTOMCSSCOLLECTOR_1.addCss("RED", "custom_red.css");
if(XCOLOR == "GREEN") {
  CUSTOMCSSCOLLECTOR_1.addCss("RED", "custom_green.css");
if(XCOLOR == "BLUE") {
  CUSTOMCSSCOLLECTOR_1.addCss("RED", "custom_blue.css");
// always pink
CUSTOMCSSCOLLECTOR_1.addCss("PINK", "custom_pink.css");
// another condition - exchange the RED by other file
  CUSTOMCSSCOLLECTOR_1.updateCss("RED", "custom_black.css");

and then, you can load more than one CSS (eg. blue and pink) with some different parts of the css definitions.

content of custom_blue.css:

.special-background {

  background-color: blue !important;


content of custom_red.css:

.special-background {

  background-color: red !important;


By this, you can not only dynamically create your css by bundling it inmore files, but you can dynamically disable, exchange some or enable again…

Like this (animated gif, click to animate)


Scripting Functions

Scripts Short Description

void addCss (

  /**CSS Key (must be unique)*/String elementKey,

  /**CSS Url*/String elementUrl,

  /**If true (default) it will be loaded*/optional boolean isActive)

add a css which should be dynamically attached

  void updateCss (

  /**CSS Key (must be unique)*/String elementKey,

  /**CSS Url*/optional String elementUrl,

  /**If true (default) it will be loaded*/optional boolean isActive)

update the definition (if you want to disable, just place

updateCss(“KEY”, /*empty as no change*/ “”, false);

Example Application

An Application with example can be downloaded at the BIAPP Repository (name SDK_CUSTOM_CSS_COLLECTOR):

Runnable Content

Source Code & Licensing

This component is for free use. It is under the Open Source Apache Version 2.0 License.

Important Maintenance Notice (… as I am SAP Employee)

The component is NOT delivered under SAP maintenance license.

You cannot claim any Support on this component from SAP!

The components are created on “private” basis – you can use them as is. I can modify, correct or improve – but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.

Have Fun!

for other components see: Karol’s SDK Components or Karol’s SDK Data Bound Components

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      Pretty cool.  Thanks for taking the time to build this one out!  Very readable code, too.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      I must amit that when I look at all the 30 (wow, already 30!) components - all are different. sometimes I understand why, sometimes not ;-).

      This is for me a clear confirmation of a learning curve.

      I hope that in 1.4 I can make some "rules" and "snippets" to make my code reproducable...

      see already the valuable blog from Reiner... What's Coming in Design Studio 1.4 SDK.