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

Question

这是给：

• 自定义 Fiori Launchpad（例如修改 shell 栏或添加页脚）
• 在 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. 属性：*应用资源：选择您部署的应用 > *应用类型：选择外壳插件
2. 目录：*选择一个目录来放置您的插件
3. 保存

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

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

参考资料：

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

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));
}