Skip to Content
1

How to include custom UI5 library in Fiori App

Mar 02, 2017 at 01:20 PM

265

avatar image

Hi everyone,

I'm trying to create a Fiori App in Web IDE.
The problem is that I need to import my custom UI5 library.

Usually you would include your library by adding it to the resource root of your bootstrapping:

<script ...
data-sap-ui-resourceroots='{"myLibrary": "./res/myLibrary/"}'
data-sap-ui-libs="sap.m, myLibrary.something"
...></script>

But in Fiori Apps your index.html will be ignored.

So my question is where to include my library to use it in a Fiori App.

Kind Regards

Fynn

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Veeraraghavan Narasimhan
Mar 02, 2017 at 02:25 PM
1

Hello Fynn,

You will do this in the manifest.json of your project.

"sap.ui5": { //SAPUI5-specific attributes - in sap.ui5 namespace

        "resources":{ //relative urls inside component, taking embeddedBy into account if filled, pointing to JavaScript/CSS resources that your app
                      //needs (app internal), formerly called "includes"
            "js": [{
                "uri": "component.js" //mandatory
            }],
            "css": [{
                "uri": "component.css", //mandatory
                "id": "componentcss" //id optional as style tags
            }]
        },
        "dependencies": { //mandatory; external dependencies
            "minUI5Version": "1.38.0" , //mandatory; minimum version of ui5 dist layer
            "libs": { //used ui5 libraries/Fiori libraries (have to be filled properly for UI5 apps)
                "sap.m": {
                    "minVersion": "1.34.0" //minimum version
                },
                "sap.ui.commons": {
                    "minVersion": "1.34.0" , //minimum version
                    "lazy": true //values true/false (default: false)
                    }
                }
            }
            "components": { //used ui5 components (have to be filled properlx for UI5 apps)
                "sap.ui.app.other": {
                    "minVersion": "1.1.0", //minimum version
                    "lazy": true //values true/false (default: false)
                }
            }
        }, 
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties" //relative url inside component, taking embeddedBy into account if filled, or server absolute
            },
            "equipment": { //empty string "" is the default model
                "preload": true, //indicator that the model will be created immediately after the manifest is loaded by component factory and before
                                 //the component instance is created
                "dataSource": "equipment", //reference of dataSource under sap.app - only enhance it with more settings for UI5 if needed
                "settings": {
                }
            }
        },
        "rootView": "sap.ui.test.view.Main", //root view
        "handleValidation": true, //true, false (default), to enable/disable validation handling by MessageManager for this component
        "config": {
            //configuration
        },
        "routing": {
            //navigation: Routing and Navigation
            //new attributes for title under targets/<target> and titleTarget under routes/<route>, see
            //core/routing: 'title' in Routing Configuration and Routing Configuration
        },
        "extends": { //extends another component
            "component": "sap.fiori.otherApp",
            "minVersion": "0.8.15", //minimal version
            "extensions": { //formerly called customizing
                //extensions
            }
        },
        "contentDensities": { //mandatory
            "compact": true, //mandatory, true, false
            "cozy": false    //mandatory, true, false
        },
        "resourceRoots": {
            ".myname": "./myname" //only relative paths inside component are allowed, no "..", for real sub-packages of the component only (must not be used
                                  //for component namespace itself)
        },
        "componentName": "sap.fiori.appName", //UI5 component name (to be filled by Tools and Templates)
        "autoPrefixId": true, //true, false
        

        }  
    }, 


You have libs where you can maintain your custom UI5 library.The above is a very exhaustive list . What is of specific use to you is libs.

Thanks and Regards,

Veera

Share
10 |10000 characters needed characters left characters exceeded
Fynn Grandke Mar 02, 2017 at 03:48 PM
0

Hey Veera,

I took your advice and added the resourceRoots and and libs to my manifest.json and after some reloads and deploys it finally worked!

Thank you very much for your fast and helpful answer!

Best Regards,

Fynn

Share
10 |10000 characters needed characters left characters exceeded