来自 fiori 应用程序模板时将 ui5 应用程序部署到启动板

Question

We have the following development enviroment for Fiori:

Gateway 7.4
Backend: Sap Netweaver 7.4 SP15
Local Web IDE with Orion Version 160811

We don't have HCP, our gateway is local in our network, we also don't have Web dispatcher or Sap Router, which means that we can't deploy directly from Web IDE and instead we have to do it manually uploading the folder to Gateway.

We made an app from scratch in Web IDE and export it as zip to deploy it in launchpad. Everything went well in that case, we add the app to a rol or use the standalone url to test it an worked fine.

The problem is when we make a Fiori Worklist Template app from Web IDE and then try to deploy it the same way the other application.

When we run the standalone url of the app we get the following javascript error:

Uncaught TypeError: Cannot read property 'createRenderer' of undefined.

Our flpSandbox.html is the following (without html tags):

    <script>
        window["sap-ushell-config"] = {
            defaultRenderer : "fiori2",
            renderers: {
                fiori2: {
                    componentData: {
                        config: {
                            search: "hidden"
                        }
                    }
                }
            },
            applications: {
                "Notastest1-display": {
                    additionalInformation: "SAPUI5.Component=appnotatest",
                    applicationType: "URL",
                    url: "../",
                    description: "Despliegue de Notas Alumnos.",
                    title: "Calificaciones Mobile"
                }
            }
        };
    </script>

    <script src="../test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>

    <!-- Bootstrap the UI5 core library -->
    <script id="sap-ui-bootstrap"
            src="../resources/sap-ui-core.js"
            data-sap-ui-libs="sap.ushell, sap.collaboration"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"appnotatest": "../"}'
            data-sap-ui-frameOptions='allow'>   // NON-SECURE setting for testing environment
    </script>

    <script>
        sap.ui.getCore().attachInit(function() {
            // initialize the ushell sandbox component
            sap.ushell.Container.createRenderer().placeAt("content");
        });
    </script>

Our Manifest:

{
"_version": "1.3.0",
"sap.app": {
    "_version": "1.3.0",
    "id": "appnotatest",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "dataSources": {
        "mainService": {
            "uri": "/sap/opu/odata/sap/ZNOTAS3_SRV/",
            "type": "OData",
            "settings": {
                "odataVersion": "2.0",
                "localUri": "localService/metadata.xml"
            }
        }
    },
    "sourceTemplate": {
        "id": "sap.ui.ui5-template-plugin.1worklist",
        "version": "1.36.2"
    }
},
"sap.ui": {
    "_version": "1.3.0",
    "technology": "UI5",
    "icons": {
        "icon": "sap-icon://task",
        "favIcon": "",
        "phone": "",
        "phone@2": "",
        "tablet": "",
        "tablet@2": ""
    },
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    },
    "supportedThemes": [
        "sap_hcb",
        "sap_bluecrystal"
    ]
},
"sap.ui5": {
    "_version": "1.3.0",
    "rootView": {
        "viewName": "appnotatest.view.App",
        "type": "XML",
        "id": "app"
    },
    "dependencies": {
        "minUI5Version": "1.36.0",
        "libs": {
            "sap.ui.core": {
                "minVersion": "1.36.0"
            },
            "sap.m": {
                "minVersion": "1.36.0"
            },
            "sap.ushell": {
                "minVersion": "1.36.0"
            },
            "sap.collaboration": {
                "minVersion": "1.36",
                "lazy": true
            }
        }
    },
    "resources": {
        "css": [
            {
                "uri": "css/style.css"
            }
        ]
    },
    "contentDensities": {
        "compact": true,
        "cozy": true
    },
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "appnotatest.i18n.i18n"
            }
        },
        "": {
            "dataSource": "mainService",
            "settings": {
                "metadataUrlParams": {
                    "sap-documentation": "heading"
                }
            }
        }
    },
    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "appnotatest.view",
            "controlId": "app",
            "controlAggregation": "pages",
            "bypassed": {
                "target": [
                    "notFound"
                ]
            },
            "async": true
        },
        "routes": [
            {
                "pattern": "",
                "name": "worklist",
                "target": [
                    "worklist"
                ]
            },
            {
                "pattern": "EntityAsignaturasSet/{objectId}",
                "name": "object",
                "target": [
                    "object"
                ]
            }
        ],
        "targets": {
            "worklist": {
                "viewName": "Worklist",
                "viewId": "worklist",
                "viewLevel": 1
            },
            "object": {
                "viewName": "Object",
                "viewId": "object",
                "viewLevel": 2
            },
            "objectNotFound": {
                "viewName": "ObjectNotFound",
                "viewId": "objectNotFound"
            },
            "notFound": {
                "viewName": "NotFound",
                "viewId": "notFound"
                }
            }
        }
    }
}

And last but not least this is our component.js:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "appnotatest/model/models",
    "appnotatest/controller/ErrorHandler"
], function (UIComponent, Device, models, ErrorHandler) {
    "use strict";

    return UIComponent.extend("appnotatest.Component", {

        metadata : {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * In this function, the FLP and device models are set and the router is initialized.
         * @public
         * @override
         */
        init : function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // initialize the error handler with the component
            this._oErrorHandler = new ErrorHandler(this);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
            // set the FLP model
            this.setModel(models.createFLPModel(), "FLP");

            // create the views based on the url/hash
            this.getRouter().initialize();
        },

        /**
         * The component is destroyed by UI5 automatically.
         * In this method, the ErrorHandler is destroyed.
         * @public
         * @override
         */
        destroy : function () {
            this._oErrorHandler.destroy();
            // call the base component's destroy function
            UIComponent.prototype.destroy.apply(this, arguments);
        },

        /**
         * This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
         * design mode class should be set, which influences the size appearance of some controls.
         * @public
         * @return {string} css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
         */
        getContentDensityClass : function() {
            /*if (this._sContentDensityClass === undefined) {
                // check whether FLP has already set the content density class; do nothing in this case
                if (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) {
                    this._sContentDensityClass = "";
                } else if (!Device.support.touch) { // apply "compact" mode if touch is not supported
                    this._sContentDensityClass = "sapUiSizeCompact";
                } else {
                    // "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
                    this._sContentDensityClass = "sapUiSizeCozy";
                }
            }
            return this._sContentDensityClass;*/
            }

        });

    }
);

We try to create another index.html to solve the create rendered, we solved the error but the app still does not work, it only shows the launchpad without the tile. Keep in mind that when we test the app from local Web IDE, first it opens a launchpad with the tile of the application.

Thank you very much for your help.

Answer 1

It might be an issue relating to the version of UI5 on your Netweaver system. To test this theory, run the app in Web IDE with the same UI5 version on your Netweaver system, to see if the same error occurs.

To achieve this, in Web IDE right click on your project -> Run -> Run Configurations... -> select an existing run config or add a new one -> advanced settings tab -> change the ui5 version to the same one running on your Netweaver system -> save and run.

If you get the same issue, it is likely that you need to update your UI5 version on your Netweaver system or try build a workaround in your UI5 app for this issue.