Crea controllo personalizzato: errori nell'estensione di ProcessFlow

Question

Sto cercando di creare un controllo personalizzato dal controllo del flusso di processo . Ecco come appare il controllo di base:

Ora, vorrei che ProcessFlow avesse nodi personalizzati in cui ci saranno pulsanti su ogni nodo, in questo modo:

Quindi, il problema che sto riscontrando è che poiché avremo ProcessFlowNodes personalizzati (raffigurati come note dall'aspetto quadrato), avremo bisogno di un controllo ProcessFlow personalizzato poiché il ProcessFlow standard consente solo sap.suite.commons.ProcessFlowNodecontrolli di tipo sotto la sua nodesaggregazione.

Pertanto, l'ostacolo consiste nel creare un controllo ProcessFlow personalizzato con un'aggregazione personalizzata che accetti il ​​controllo ProcessFlowNode personalizzato. La mia domanda a questo proposito è:

• Mi prolungo sap.ui.core.Controlo sap.suite.commons.ProcessFlow? Se è Control, come fa a sapere di essere un ProcessFlow? La mia ipotesi qui (credo di rispondere in parte alla mia domanda) è che ProcessFlow debba essere esteso. Quindi, il problema successivo sono gli errori della console come "oControl deve essere un sap.ui.core.Control o vuoto" quando provo a eseguire il rendering del controllo con oRm.renderControl(oControl.getAggregation("lanes")). Come posso risolvere questi errori?

---

Ecco un codice di esempio con screenshot di come xmlns="sap.suite.ui.commons"appare un ProcessFlow (spazio dei nomi ) di base e funzionante :

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

---

Ecco il mio codice finora:

Controllo:

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

Visualizza nell'app:

<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

Ho risolto gli errori, eliminando il initmetodo e avendo una rendererfunzione vuota .

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

  });
});