Crear control personalizado: errores al extender ProcessFlow

Question

Estoy intentando crear un control personalizado desde el control de flujo de proceso . Así es como se ve el control base:

Ahora, me gustaría que ProcessFlow tuviera nodos personalizados en los que haya botones en cada nodo, así:

Entonces, el problema que tengo es que, dado que tendremos ProcessFlowNodes personalizados (en la imagen de notas cuadradas), necesitaremos un control ProcessFlow personalizado ya que ProcessFlow estándar solo permite sap.suite.commons.ProcessFlowNodecontroles de tipo bajo su nodesagregación.

Por lo tanto, el obstáculo es crear un control ProcessFlow personalizado con una agregación personalizada que acepte el control ProcessFlowNode personalizado. Mi pregunta al respecto es:

• ¿Extiendo sap.ui.core.Controlo sap.suite.commons.ProcessFlow? Si es Control, ¿cómo sabe que es un ProcessFlow? Mi suposición aquí (creo que estoy respondiendo en parte a mi propia pregunta) es que ProcessFlow se ampliará. Luego, el siguiente problema son los errores de la consola como "oControl debe ser un sap.ui.core.Control o vacío" cuando intento representar el control con oRm.renderControl(oControl.getAggregation("lanes")). ¿Cómo puedo solucionar estos errores?

---

Aquí hay un código de muestra con una captura de pantalla de cómo se xmlns="sap.suite.ui.commons"ve un ProcessFlow (espacio de nombres ) básico y funcional :

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

---

Aquí está mi código hasta ahora:

Control:

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

Ver en la aplicación:

<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

Resolví los errores eliminando el initmétodo y teniendo una rendererfunción vacía .

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

  });
});