Créer un contrôle personnalisé: erreurs lors de l'extension de ProcessFlow

Question

J'essaie de créer un contrôle personnalisé à partir du contrôle de flux de processus . Voici à quoi ressemble le contrôle de base:

Maintenant, je voudrais que ProcessFlow ait des nœuds personnalisés dans lesquels il y aura des boutons sur chaque nœud, comme ceci:

Donc, le problème que j'ai est que puisque nous aurons des ProcessFlowNodes personnalisés (représentés sous forme de notes carrées), nous aurons besoin d'un contrôle ProcessFlow personnalisé car le ProcessFlow standard n'autorise que les sap.suite.commons.ProcessFlowNodecontrôles de type sous son nodesagrégation.

Ainsi, l'obstacle est de créer un contrôle ProcessFlow personnalisé avec une agrégation personnalisée qui accepte le contrôle ProcessFlowNode personnalisé. Ma question à cet égard est:

• Dois-je prolonger sap.ui.core.Controlou sap.suite.commons.ProcessFlow? Si c'est Control, comment sait-il qu'il s'agit d'un ProcessFlow? Mon hypothèse ici (je crois que je réponds en partie à ma propre question) est que ProcessFlow doit être étendu. Ensuite, le problème suivant concerne les erreurs de console telles que «oControl doit être un sap.ui.core.Control ou vide» lorsque j'essaye de rendre le contrôle avec oRm.renderControl(oControl.getAggregation("lanes")). Comment puis-je résoudre ces erreurs?

---

Voici un exemple de code avec une capture d'écran de l'apparence d'un ProcessFlow (espace de noms xmlns="sap.suite.ui.commons") basique et fonctionnel :

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

---

Voici mon code jusqu'à présent:

Contrôler:

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

Voir dans l'application:

<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

J'ai résolu les erreurs, en supprimant la initméthode et en ayant une rendererfonction vide .

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

  });
});