cancel
Showing results for 
Search instead for 
Did you mean: 

Patch-Level Independent Bootstrap with own onInit not working

JCarstens
Discoverer
0 Kudos
167

Good day

I am developing standalone UI5 application and use the Patch-Level independent Bootstrap as described by pmuessig here       

The problem I am facing is with using my own onInit callback function.  For this to work it seems I have to specify data-sap-ui-resource-roots in my bootstrap as well.  The sap.ui.getCore() is not available directly after the bootstrap (async) so my start up is failing with sap.ui.getCore() is not a function.

I tried using the Declarative API's but could still not get my application to start correctly. 

In my index.html (this is standalone app) I have the following for my bootstrap: 

 

    <script id="sap-ui-bootstrap" 
        type="text/javascript" 
        src="https://ui5.sap.com/1.71/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize" 
        data-sap-ui-async="true" 
        data-sap-ui-onInit="module:cvg/workorders/onInit"
        data-sap-ui-resourceroots='{
            "cvg.workorders": "."
        }' 
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-preload="async" 
        data-sap-ui-libs="sap.m">
    </script>

 

The Body tag merely contains the following since I will insert my app at content from the onInit function:

<body class="sapUiBody sapUiSizeCompact" id="content">
</body>

And then my onInit.js in the root of my application:

sap.ui.define([
        "sap/m/Shell",
        "sap/ui/core/ComponentContainer",
	], function (Shell, ComponentContainer) {
		"use strict";
                // initialize the UI component
                new Shell({
                    backgroundImage: "./images/background.jpg",
                    logo: "./images/logo.png",
                    homeIcon: {
                        "phone": "./images/icon-57x57.png",
                        "phone@2": "./images/icon-114x114.png",
                        "tablet": "./images/icon-72x72.png",
                        "tablet@2": "./images/icon-144x144.png",
                        "precomposed": true,
                        "favicon": "./images/icon.png"
                    },
                    app: new ComponentContainer({
                        height: "100%",
                        name: "cvg.workorders",
                        settings: {
                            id: "workorders"
                        }
                    })
                }).placeAt("content");

    });

 

I understand that specifying the “data-sap-ui-resourceroots” is causing the problem but why and how to do it differently ?  I have also studied the Standard Variant for Bootstrapping and Declarative API for initial components but could not get it to work.

 

Any help or direction will be much appreciated. 

View Entire Topic
Noel_Hendrikx
Active Contributor
0 Kudos

Hi,

Could you try to set the data-sap-ui-resourceroots to "cvg.workorders": "./"
If it is a standalone app and you are referring to the ui5.sap.com cdn, why don't you use a higher version? 

How does your body tag look like?

Mine looks like:

<body class="sapUiBody"> <div data-sap-ui-component data-name="mynamespace" data-id="container" data-settings='{"id" : "applicationname"}'></div> </body>

Hope this helps

Regards,

Noël

 

 

JCarstens
Discoverer
0 Kudos

Thank you very much Noel.

My body tag was just this:

 

<body class="sapUiBody sapUiSizeCompact" id="content">
</body>

 

But after following your example I changed it to this

 

<body class="sapUiBody sapUiSizeCompact">
    <div data-sap-ui-component data-name="cvg.workorders" id="content" 
         data-id="container" data-settings='{"id" : "workorders"}'>
    </div>
</body>

 

It did not solve the problem though (First I thought is did but after a cache clear it was back)