कस्टम नियंत्रण बनाएं: प्रोसेसफ्लो को बढ़ाने में त्रुटियां

Question

मैं प्रक्रिया प्रवाह नियंत्रण से कस्टम नियंत्रण बनाने की कोशिश कर रहा हूं । यह आधार नियंत्रण जैसा दिखता है:

अब, मैं चाहूंगा कि ProcessFlow में कस्टम नोड्स हों, जिनमें प्रत्येक नोड पर बटन हों, जैसे:

इसलिए, मेरे पास जो समस्या है, वह यह है कि चूंकि हमारे पास कस्टम प्रोसेसफ्लोडनोड होंगे (वर्ग-दिखने वाले नोटों के रूप में चित्रित), हमें कस्टम प्रोसेसफ्लो नियंत्रण की आवश्यकता होगी क्योंकि मानक प्रोसेसफ्लो केवल sap.suite.commons.ProcessFlowNodeइसके nodesएकत्रीकरण के तहत टाइप नियंत्रण की अनुमति देता है ।

इस प्रकार, बाधा को कस्टम एकत्रीकरण के साथ एक कस्टम ProcessFlow नियंत्रण बनाना है जो कस्टम ProcessFlowNode नियंत्रण को स्वीकार करता है। इस संबंध में मेरा प्रश्न है:

• क्या मैं बढ़ाऊं sap.ui.core.Controlया sap.suite.commons.ProcessFlow? यदि यह नियंत्रण है, यह कैसे एक ProcessFlow होना जानता है? यहां मेरी धारणा (मुझे विश्वास है कि मैं आंशिक रूप से अपने प्रश्न का उत्तर दे रहा हूं) यह है कि प्रोसेसफ्लो को बढ़ाया जाना है। फिर, अगला मुद्दा कंसोल त्रुटियों जैसे "oControl एक sap.ui.core.Control या खाली होना चाहिए" जब मैं नियंत्रण के साथ रेंडर करने की कोशिश करता हूं oRm.renderControl(oControl.getAggregation("lanes"))। मैं इन त्रुटियों को कैसे हल कर सकता हूं?

---

यहाँ स्क्रीनशॉट के साथ एक नमूना कोड है कि कैसे एक बुनियादी, कार्यशील प्रक्रियाफ्लो (नाम स्थान 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

  });
});