SAPUI5/OpenUI5: CSS for custom control?

Question

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

Answer 1

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.

Answer 2

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');
            }
        });
    }
);

Answer 3

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").