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
| 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):
- KarolKalisz/DesignStudioBiAppRepository · GitHub
- or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub
Runnable Content
- See Karol’s SDK Components for instructions.
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
New NetWeaver Information at SAP.com
Very Helpfull