I am currently working on a custom control in SAPUI5/OpenUI5 and I am wondering how I can get the required CSS into the application. Where would I place the CSS code specific for my control? And how do I load it then from the control? I could not find anything in the documentation....
Thanks and best regards, Daniel
In this tutorial, it's described how to use CSS in the renderer of custom controls.
If you're not using a custom renderer, you can attach CSS like to any other control like described here.
Always make sure that you load the CSS file e.g. in your html file.
Edit:
According to the comments jQuery.sap.includeStyleSheet() solved it.
At the time of writing this, you require sap/ui/dom/includeStylesheet
and call it within your init
function.
Example:
sap.ui.define(
[
'sap/ui/core/Control',
'sap/ui/dom/includeStylesheet'
],
function (Control, includeStylesheet) {
'use strict';
return Control.extend('Example.control.MyControl', {
// some more boilerplate code
init: function () {
includeStylesheet('../css/mycontrol.css');
}
});
}
);
You should create all your custom controls in a control library with a theme. https://github.com/SAP/openui5/blob/master/docs/controllibraries.md
Loading the theme in the sapui5 bootstrap causes the load of the library.css file in your control library with the same theme name (e.g. "sap_bluecrystal").
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With