來自 fiori 應用程序模板時將 ui5 應用程序部署到啟動板

Question

我們為 Fiori 提供以下開發環境：

網關 7.4
后端：Sap Netweaver 7.4 SP15
帶有 Orion 版本 160811 的本地 Web IDE

我們沒有 HCP，我們的網關在我們的網絡中是本地的，我們也沒有 Web 調度程序或 Sap 路由器，這意味着我們不能直接從 Web IDE 進行部署，而必須手動上傳文件夾到網關。

我們在 Web IDE 中從頭開始制作了一個應用程序並將其導出為 zip 以將其部署到啟動板中。 在這種情況下一切順利，我們將應用程序添加到 rol 或使用獨立 url 來測試它是否工作正常。

問題是當我們從 Web IDE 制作一個 Fiori Worklist Template 應用程序，然后嘗試以與其他應用程序相同的方式部署它時。

當我們運行應用程序的獨立 url 時，我們收到以下 javascript 錯誤：

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

我們的 flpSandbox.html 如下（沒有 html 標簽）：

    <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>

我們的宣言：

{
"_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"
                }
            }
        }
    }
}

最后但並非最不重要的是，這是我們的 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;*/
            }

        });

    }
);

我們嘗試創建另一個 index.html 來解決創建呈現的問題，我們解決了錯誤但應用程序仍然無法運行，它只顯示沒有磁貼的啟動板。 請記住，當我們從本地 Web IDE 測試應用程序時，它首先會打開一個帶有應用程序磁貼的啟動板。

非常感謝您的幫助。

Answer 1

這可能是與您的 Netweaver 系統上的 UI5 版本有關的問題。 為了測試這個理論，在您的 Netweaver 系統上使用相同的 UI5 版本在 Web IDE 中運行應用程序，看看是否出現相同的錯誤。

為此，在 Web IDE 中右鍵單擊您的項目 -> 運行 -> 運行配置... -> 選擇現有的運行配置或添加一個新的 -> 高級設置選項卡 -> 將 ui5 版本更改為相同的運行配置在您的 Netweaver 系統上 -> 保存並運行。

如果您遇到同樣的問題，您可能需要在您的 Netweaver 系統上更新您的 UI5 版本，或者嘗試在您的 UI5 應用程序中針對此問題構建解決方法。