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

Question

这是为了：

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

其他指南包含一些过时的信息，例如不再存在的从 'New Project from Template'

创建 'Fiori Launchpad Plugin' 的选项

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 的门户服务 > 转到服务 > 站点目录 > *选择您希望在其中激活插件的启动板 > 内容管理 > 应用程序 > *添加应用程序（“+”图标）

属性：*应用程序资源：select您部署的应用程序 > *应用程序类型：select Shell 插件
目录：*select 用于放置您的插件的目录
保存

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

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

参考文献：

Sample Plugin：此示例展示了如何添加页眉操作项、页脚、参数等
Activating plugin：仅查看“配置 Shell 插件应用程序”部分
API 参考 what 可以在 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));
}

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

WebIDE: How to Create Shell Plugin for Fiori Launchpad?

sapui5

sap-fiori

sap-web-ide