Patch-Level Independent Bootstrap with own onInit ...

JCarstens · ‎2024 Jun 15

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>

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.

boghyon · ‎2024 Jun 20

Just created a working sample here with UI5 1.71: https://embed.plnkr.co/in6I3CL8AKsz4wkX?show=index.html,onInit.js,preview:%3Fsap-ui-xx-componentPrel...

Patch-Level Independent Bootstrap with own onInit not working

Know the answer?

Need more details?