Skip to Content

Summary

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:

Example

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

Capture.PNG

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

&XCOLOR=BLUE

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
if(XEXCHANGE) {
  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)

/wp-content/uploads/2014/10/20141030_232432_capture_575025.gif

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

To report this post you need to login first.

2 Comments

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

    1. Karol Kalisz 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.

      (0) 

Leave a Reply