WebIDE：如何为 Fiori Launchpad 创建 Shell 插件？

Question

这是为了：

• 自定义 Fiori Launchpad（例如修改外壳栏或添加页脚）
• 在 NEO 环境中工作（不是 Cloud Foundry）
• 在 WebIDE 中设置，而不是 Business Application Studio

其他指南包含一些过时的信息，例如不再存在的用于从“模板中的新项目”创建“Fiori Launchpad 插件”的选项

Answer 1

2020 更新

脚步：

• 创建 SAPUI5 模板应用
• 将以下代码添加到 Component.js（并根据您的喜好进行修改）。 一切都将存储在 Component.js 中，MVC 将保持不变。 .then()所有内容都添加了用于修改 FLP 的自定义代码。

 init: function () { // call the base component's init function UIComponent.prototype.init.apply(this, arguments); var rendererPromise= this._getRenderer(); rendererPromise.then(function(oRenderer){ // var bFull= jQuery.sap.getUriParameters().get("plugin-full"); oRenderer.addHeaderItem("sap.ushell.ui.shell.ShellHeadItem", { icon:"sap-icon://add" ,tooltip:"Current Stage" },true,true); }); // var oRenderer= sap.ushell.Container.getRenderer('fiori2'); // oRenderer.addHeaderItem({icon:'sap-icon://add'},true,true); // enable routing // this.getRouter().initialize(); // set the device model // this.setModel(models.createDeviceModel(), "device"); }, _getRenderer:function(){ var that=this, oDeferred= new jQuery.Deferred(), oRenderer; that._oShellContainer= jQuery.sap.getObject("sap.ushell.Container"); if(!that._oShellContainer){ oDeferred.reject("Illegal state: shell container not available. This component must be executed in a unified shell runtime context."); } else{ oRenderer= that._oShellContainer.getRenderer(); if(oRenderer){oDeferred.resolve(oRenderer);} else{ //renderer not initialized yet, listen to rendererCreated event that._onRendererCreated= function(oEvent){ oRenderer= oEvent.getParameter('renderer'); if(oRenderer){oDeferred.resolve(oRenderer);} else{oDeferred.reject('Illegal state: shell renderer not available after receiving rendererLoaded event');} }; that._oShellContainer.attachRendererCreatedEvent(that._onRendererCreated); } } return oDeferred.promise(); }

• 部署您的应用
• 激活您的插件：转至 SCP 的门户服务 > 转至服务 > 站点目录 > *选择您希望在其中激活插件的启动板 > 内容管理 > 应用程序 > *添加应用程序（“+”图标）

1. 属性：*App Resource：选择您部署的应用 > *App Type：选择 Shell Plugin
2. 目录：*选择一个目录来放置您的插件
3. 节省

• 使用顶部功能区右侧的地球图标发布站点

外观： *注意顶部功能区上的附加“+”按钮。 成功！

参考：

1. 示例插件：此示例展示了如何添加页眉操作项、页脚、参数等。
2. 激活插件：仅参见“配置 Shell 插件应用程序”部分
3. 关于可以在 FLP 中修改的内容的API 参考

Answer 2

而不是在 _getRenderer 函数中使用 jQuery，这至少在快速测试中对我有用。 使用 Promises 而不是 Deferred 和 ObjectPath（需要“sap/base/util/ObjectPath”），这是“$.sap.getObject”的推荐替代品，因为它已被弃用。

_getRenderer: function() {
    return new Promise(function(fnResolve, fnReject) {
        this._oShellContainer = ObjectPath.get("sap.ushell.Container");
        if (!this._oShellContainer) {
            fnReject(
                "Illegal state: shell container not available; this component must be executed in a unified shell runtime context."
            );
        } else {
            var oRenderer = this._oShellContainer.getRenderer();
            if (oRenderer) {
                fnResolve(oRenderer);
            } else {
                // renderer not initialized yet, listen to rendererCreated event
                this._onRendererCreated = function(oEvent) {
                    oRenderer = oEvent.getParameter("renderer");
                    if (oRenderer) {
                        fnResolve(oRenderer);
                    } else {
                        fnReject(
                            "Illegal state: shell renderer not available after receiving 'rendererLoaded' event."
                        );
                    }
                };
                this._oShellContainer.attachRendererCreatedEvent(
                    this._onRendererCreated
                );
            }
        }
    }.bind(this));
}