Buat Kontrol Kustom: Kesalahan dalam Memperluas ProcessFlow

Question

Saya mencoba membuat kontrol kustom dari kontrol Alur Proses . Seperti inilah tampilan kontrol dasar:

Sekarang, saya ingin ProcessFlow memiliki node kustom di mana akan ada tombol di setiap node, seperti ini:

Jadi, masalah yang saya hadapi adalah karena kita akan memiliki ProcessFlowNodes kustom (digambarkan sebagai catatan yang tampak persegi), kita memerlukan kontrol ProcessFlow kustom karena ProcessFlow standar hanya mengizinkan sap.suite.commons.ProcessFlowNodekontrol jenis di bawah nodesagregasinya.

Jadi, rintangannya adalah membuat kontrol ProcessFlow kustom dengan agregasi kustom yang menerima kontrol kustom ProcessFlowNode. Pertanyaan saya dalam hal ini adalah:

• Apakah saya memperpanjang sap.ui.core.Controlatau sap.suite.commons.ProcessFlow? Jika itu Kontrol, bagaimana ia tahu sebagai ProcessFlow? Asumsi saya di sini (saya yakin saya sebagian menjawab pertanyaan saya sendiri) adalah bahwa ProcessFlow akan diperpanjang. Kemudian, masalah berikutnya adalah kesalahan konsol seperti "oControl harus berupa sap.ui.core.Control atau kosong" ketika saya mencoba membuat kontrol dengan oRm.renderControl(oControl.getAggregation("lanes")). Bagaimana cara mengatasi kesalahan ini?

---

Berikut ini contoh kode dengan tangkapan layar tentang tampilan ProcessFlow (namespace xmlns="sap.suite.ui.commons") dasar yang berfungsi :

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

---

Inilah kode saya sejauh ini:

Kontrol:

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

Lihat di aplikasi:

<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

Saya telah menyelesaikan kesalahan, dengan menghapus initmetode dan memiliki rendererfungsi kosong .

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

  });
});