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

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)

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)

Scripting Functions

ScriptsShort 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

2 Comments