扩展 ShellHeadItem（渲染？）

Question

我需要将项目添加到 shell。这是使用 ShellHeadItem 完成的，但我不希望它是一个图标，而是带有文本的按钮。

我可以在 html 中更改 span 子项，但框架会在几秒后或首次单击按钮后刷新 shell。我试图通过调用函数将其再次更改为文本来消除这种“闪烁”（它是可见的），但它并不完美..

能否请您指导我如何扩展对象，我认为它是渲染对象？非常感谢。

Answer 1

所以我用了这个

var oShellHeader = sap.ui.getCore().byId("shell-header");
oShellHeader.addEventDelegate({
    onAfterRendering: function () {
        // ... change the html
    }
})

Answer 2

当您说 "shell" 时，我假设您指的是 SAP“ushell”，也称为 Fiori Launchpad shell。 UI5 SDK 中的 SAP API 文档不是很全面，但是您可以在 SAPUI5 public 方法中做一些事情来实现您想要的。

首先，您要等到 shell 呈现。 SAP 提供了一些样板代码，用于返回将实现该目标的 Promise（注意 - 这是通过 Web IDE 从 Fiori 插件模板创建插件应用程序时提供的代码）：

  _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("fiori2");
            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();
    }

此承诺 returns shell renderer 可用于将项目添加到工具栏的 header 开头或结尾。您需要注意的两种方法是 "addHeaderEndItem" 和 "addHeaderItem"。 SDK 中有说明如何使用它，但我认为理解实现的最简单方法是查看下面的示例：

        var rendererPromise = this._getRenderer();
        rendererPromise.then(function(oRenderer) {
            oRenderer.addHeaderEndItem(
                "sap.ushell.ui.shell.ShellHeadItem",
                {
                    icon:"sap-icon://action",
                    press: that._buttonPress.bind(that)
                },
                true,
                false,
                [oRenderer.LaunchpadState.App, oRenderer.LaunchpadState.Home]
            );
        });

您可以阅读 shell 渲染器 API（上文）以了解有关每个设置的更多信息，但请注意几句。

首先，确保将其放入组件（初始化）或视图控制器的 "onInit" 中，以避免多次添加。如果您使用 SAP Cloud Platform Portal 服务来管理您的 Fiori Launchpad，最好的选择是将其添加为插件。

其次，暂时不要使用 "addFloatingButton" 方法。它还没有准备好。我不会详细说明，但我只是说我花了很多时间调试 SAP 原型，它们有一两个深层次的错误。

最后，请考虑何时需要此按钮。添加方法末尾的数组包含枚举 "App" 和 "Home"。来自 SAP：

The launchpad states that can be passed as a parameter. Values: App - launchpad state when running a Fiori app Home - launchpad state when the home page is open

希望这是有道理的，因为我再清楚不过了:)

祝你好运！

扩展 ShellHeadItem（渲染？）

Extending of ShellHeadItem (render?)

javascript

render

extend

sapui5