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