Tạo kiểm soát tùy chỉnh: Lỗi trong quy trình mở rộng

Question

Tôi đang cố gắng tạo kiểm soát tùy chỉnh từ kiểm soát Luồng quy trình . Đây là điều khiển cơ sở trông như thế nào:

Bây giờ, tôi muốn ProcessFlow có các nút tùy chỉnh trong đó sẽ có các nút trên mỗi nút, như sau:

Vì vậy, vấn đề tôi đang gặp phải là vì chúng ta sẽ có ProcessFlowNodes tùy chỉnh (được hình dung dưới dạng ghi chú hình vuông), chúng ta sẽ cần một điều khiển ProcessFlow tùy chỉnh vì ProcessFlow tiêu chuẩn chỉ cho phép các sap.suite.commons.ProcessFlowNodeđiều khiển kiểu dưới sự nodestổng hợp của nó .

Do đó, trở ngại là tạo điều khiển ProcessFlow tùy chỉnh với một tập hợp tùy chỉnh chấp nhận điều khiển ProcessFlowNode tùy chỉnh. Câu hỏi của tôi về vấn đề này là:

• Tôi có gia hạn sap.ui.core.Controlhay sap.suite.commons.ProcessFlowkhông? Nếu nó là Control, làm thế nào nó biết là ProcessFlow? Giả định của tôi ở đây (tôi tin rằng tôi đang trả lời một phần câu hỏi của chính mình) là ProcessFlow sẽ được mở rộng. Sau đó, vấn đề tiếp theo là các lỗi giao diện điều khiển như "oControl phải là sap.ui.core.Control hoặc trống" khi tôi cố gắng kết xuất điều khiển với oRm.renderControl(oControl.getAggregation("lanes")). Làm cách nào để giải quyết những lỗi này?

---

Đây là một đoạn mã mẫu với ảnh chụp màn hình về cách thức hoạt động của ProcessFlow (không gian tên xmlns="sap.suite.ui.commons") cơ bản :

<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>

---

Đây là mã của tôi cho đến nay:

Điều khiển:

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

Xem trong ứng dụng:

<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

Tôi đã giải quyết các lỗi, bằng cách xóa initphương thức và có một rendererhàm trống .

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

  });
});