创建自定义控件:扩展ProcessFlow中的错误

Question

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

​

​

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

​

​

因此，我遇到的问题是，由于我们将拥有自定义ProcessFlowNodes (如图为方形注释)，我们将需要一个自定义ProcessFlow控件，因为标准ProcessFlow只允许在其nodes聚合下使用sap.suite.commons.ProcessFlowNode类型控件。

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

• 我是扩展sap.ui.core.Control还是sap.suite.commons.ProcessFlow？如果它是控制，它怎么知道是一个ProcessFlow？我在这里的假设(我相信我正在部分地回答我自己的问题)是ProcessFlow将被扩展。然后，下一个问题是控制台错误，例如当我尝试用oControl呈现控件时，“sap.ui.core.Control必须是sap.ui.core.Control还是空的”。如何解决这些错误？

​

​

下面是一个示例代码，其中包含基本的、工作的ProcessFlow (命名空间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

  });
});