创建自定义控件：扩展 ProcessFlow 时出错

Question

我正在尝试从 Process Flow 控件创建自定义控件。这是基本控件的样子：

现在，我希望 ProcessFlow 具有自定义节点，其中每个节点上都有按钮，如下所示：

所以，我遇到的问题是，由于我们将拥有自定义 ProcessFlowNode（如图所示为方形注释），我们将需要一个自定义 ProcessFlow 控件，因为标准 ProcessFlow 仅允许类型 sap.suite.commons.ProcessFlowNode 控件在其 nodes 聚合下。

因此，障碍是使用接受自定义 ProcessFlowNode 控件的自定义聚合创建自定义 ProcessFlow 控件。我在这方面的问题是：

我是延长 sap.ui.core.Control 还是 sap.suite.commons.ProcessFlow？如果它是 Control，它怎么知道是 ProcessFlow？我在这里的假设（我相信我部分地回答了我自己的问题）是要扩展 ProcessFlow。然后，下一个问题是当我尝试使用 oRm.renderControl(oControl.getAggregation("lanes")) 呈现控件时出现控制台错误，例如“oControl 必须是 sap.ui.core.Control 或为空”。 如何解决这些错误？

这是一个示例代码，其中包含基本的工作流程（命名空间 xmlns="sap.suite.ui.commons"）的屏幕截图：

<ProcessFlow>
  <nodes>
    <ProcessFlowNode
      title="Sales Order Volume"
      titleAbbreviation="SOV1"
      laneId="0"
      nodeId="01"
      children="010,011"
      state="Positive"
      stateText="OK status"
      texts="Sales Order Document Overdue long text for the wrap up all the aspects - Not cleared"
      highlighted="false"
      focused="true"
    />
    <ProcessFlowNode
      title="Outbound Delivery 40"
      titleAbbreviation="OD40"
      laneId="0"
      nodeId="010"
      state="Negative"
      stateText="NOT OK"
      texts="Save Our Soul"
      highlighted="false"
      focused="false"
    />
    <!-- ... -->
  </nodes>
  <lanes>
    <ProcessFlowLaneHeader laneId="0" iconSrc="sap-icon://order-status" text="Order Processing" position="0" />
    <ProcessFlowLaneHeader laneId="1" iconSrc="sap-icon://monitor-payments" text="Delivery Processing" position="1" />
    <ProcessFlowLaneHeader laneId="2" iconSrc="sap-icon://payment-approval" text="Invoicing" position="2" />
    <ProcessFlowLaneHeader laneId="3" iconSrc="sap-icon://money-bills" text="Accounting" position="3" />
  </lanes>
</ProcessFlow>

到目前为止，这是我的代码：

控制：

sap.ui.define([
  "sap/suite/ui/commons/ProcessFlow"
], function(ProcessFlow){
  "use strict";

  return ProcessFlow.extend("ns.testino.control.SuperProcessFlow", {
    metadata: {
      aggregations:{
        "lanes":{
          type: "sap.suite.ui.commons.ProcessFlowLaneHeader",
          multiple: true,
          singularName: "lane"
        },
        "nodes": {
          type: "sap.suite.ui.commons.ProcessFlowNode",
          multiple: true,
          singularName: "node"
        }
      }
    },

    init: function() {
      
    },

    renderer: function(oRM,oControl) {
      oRM.renderControl(oControl.getAggregation("lanes"));
    }
  });
});

在应用程序中查看：

<mvc:View controllerName="ns.testino.controller.coke2"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:m="sap.m"
  xmlns="sap.suite.ui.commons"
  xmlns:custom="ns.testino.control"
>
  <m:Panel>
    <custom:SuperProcessFlow>
      <custom:lanes>
        <ProcessFlowLaneHeader laneId="0" iconSrc="sap-icon://order-status" text="Order Processing" position="0" />
        <ProcessFlowLaneHeader laneId="1" iconSrc="sap-icon://monitor-payments" text="Delivery Processing" position="1" />
        <ProcessFlowLaneHeader laneId="2" iconSrc="sap-icon://payment-approval" text="Invoicing" position="2" />
        <ProcessFlowLaneHeader laneId="3" iconSrc="sap-icon://money-bills" text="Accounting" position="3" />
      </custom:lanes>
    </custom:SuperProcessFlow>
  </m:Panel>
</mvc:View>

Answer 1

我已经通过删除 init 方法和一个空的 renderer 函数解决了这些错误。

sap.ui.define([
  "sap/suite/ui/commons/ProcessFlow"
], function(ProcessFlow) {
  "use strict";

  return ProcessFlow.extend("ns.testino.control.CustomProcessFlow", {
    metadata: {
      // ...
    },

    // No init: function() {},

    renderer: {} // leave empty if you want it to render like the standard control

  });
});

创建自定义控件：扩展 ProcessFlow 时出错

Create Custom Control: Errors in Extending ProcessFlow

sapui5