SAPUI5 Custom control library theme

0
votes

I've recently created a SAPUI5 Library which contains a lot of custom controls to re-use, but I can't find a way to make applications which include the library, to load the .less theme files which are defining the custom controls styles.

So basically, what I would want to do is make the library embed custom control style to others applications.

Here is the manifest.json :

{
"_version": "1.7.0",

"sap.app": {
    "id": "zproject",
    "type": "library",
    "embeds": [],
    "i18n": "messagebundle.properties",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "title": "{{title}}",
    "description": "{{description}}",
    "ach": "",
    "resources": "resources.json",
    "offline": false
},
"sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": false
    },
    "supportedThemes": [
        "sap_hcb",
        "sap_belize",
        "sap_belize_plus"

    ]
},

"sap.ui5": {
    "dependencies": {
        "minUI5Version": "1.30.0",
        "libs": {
            "sap.ui.core": {
                "minUI5Version": "1.30.0"
            }
        }
    },
    "contentDensities": {
        "compact": true,
        "cozy": false
    }
},

"sap.platform.hcp": {
    "uri": ""
},

"sap.fiori": {
    "registrationIds": [],
    "archeType": "reusecomponent"
}

Here is my folder structure:

enter image description here

I can give you any more informations you could need, but I thought these are the most usefull

2
sapui5

2 Answers

1
votes

I had the same issue and finally I found the answer in the api documentation of SAPUI5: sap.ui.getCore().initLibrary

In my case, the property noLibraryCSS was set to true, which means, that no theme is loaded. Please double check the library.js and set this property to false - or completely remove it, because the default value is false.

0
votes

Okay so I still don't know why it isn't directly being loaded by the theme, but I found two ways to make it:

  • The sa.ui.dom.includeStylesheet() method usable directly in components to load per component CSS Documentation here

  • Add a resource in the application including the library (once the library application is deployed, it builds the .less files to a library.css file) in the manifest.json file :

        "resources": {
    "css": [{
        "uri": "css/style.css"
    }, {
        "uri": "/resources/YOURLIBRARY/themes/base/library.css" 
    }]
},