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