来自 fiori 应用程序模板时将 ui5 应用程序部署到启动板
Deploying a ui5 app to launchpad when coming from a fiori app template
我们有以下的 Fiori 开发环境：
网关 7.4
后端：Sap Netweaver 7.4 SP15
本地网站 IDE Orion 版本 160811
我们没有 HCP，我们的网关在我们的网络本地，我们也没有 Web 调度程序或 Sap 路由器，这意味着我们无法直接从 Web IDE 部署，而是我们必须手动将文件夹上传到网关。
我们在 Web IDE 中从头开始制作了一个应用程序并将其导出为 zip 以将其部署到启动板中。
在那种情况下一切顺利，我们将应用程序添加到 rol 或使用独立 url 来测试它是否正常工作。
问题是当我们从 Web IDE 制作 Fiori 工作列表模板应用程序，然后尝试以与其他应用程序相同的方式部署它时。
当我们 运行 应用程序的独立 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 测试应用程序时，它首先会打开一个带有应用程序磁贴的启动板。
非常感谢您的帮助。
这可能与您的 Netweaver 系统上的 UI5 版本有关。为了验证这个理论，运行 Web 中的应用程序 IDE 在您的 Netweaver 系统上具有相同的 UI5 版本，以查看是否出现相同的错误。
为此，在 Web IDE 中右键单击您的项目 -> 运行 -> 运行 配置... -> select 一个现有的 运行 配置或添加一个新的 -> 高级设置选项卡 -> 将 ui5 版本更改为与你的 Netweaver 系统相同的 运行ning -> 保存并 运行.
如果您遇到同样的问题，您可能需要在您的 Netweaver 系统上更新您的 UI5 版本，或者尝试在您的 UI5 应用程序中针对此问题构建解决方法。
我们有以下的 Fiori 开发环境：
网关 7.4
后端：Sap Netweaver 7.4 SP15
本地网站 IDE Orion 版本 160811
我们没有 HCP，我们的网关在我们的网络本地，我们也没有 Web 调度程序或 Sap 路由器，这意味着我们无法直接从 Web IDE 部署，而是我们必须手动将文件夹上传到网关。
我们在 Web IDE 中从头开始制作了一个应用程序并将其导出为 zip 以将其部署到启动板中。 在那种情况下一切顺利，我们将应用程序添加到 rol 或使用独立 url 来测试它是否正常工作。
问题是当我们从 Web IDE 制作 Fiori 工作列表模板应用程序，然后尝试以与其他应用程序相同的方式部署它时。
当我们 运行 应用程序的独立 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 测试应用程序时，它首先会打开一个带有应用程序磁贴的启动板。
非常感谢您的帮助。
这可能与您的 Netweaver 系统上的 UI5 版本有关。为了验证这个理论，运行 Web 中的应用程序 IDE 在您的 Netweaver 系统上具有相同的 UI5 版本，以查看是否出现相同的错误。
为此，在 Web IDE 中右键单击您的项目 -> 运行 -> 运行 配置... -> select 一个现有的 运行 配置或添加一个新的 -> 高级设置选项卡 -> 将 ui5 版本更改为与你的 Netweaver 系统相同的 运行ning -> 保存并 运行.
如果您遇到同样的问题，您可能需要在您的 Netweaver 系统上更新您的 UI5 版本，或者尝试在您的 UI5 应用程序中针对此问题构建解决方法。