Benutzerdefiniertes Steuerelement erstellen: Fehler beim Erweitern von ProcessFlow

Question

Ich versuche, ein benutzerdefiniertes Steuerelement aus dem Prozessablaufsteuerelement zu erstellen . So sieht das Basissteuerelement aus:

Jetzt möchte ich, dass der ProcessFlow benutzerdefinierte Knoten hat, auf denen auf jedem Knoten Schaltflächen vorhanden sind, wie folgt:

Das Problem, das ich habe, ist, dass wir, da wir benutzerdefinierte ProcessFlowNodes (als quadratische Notizen dargestellt) haben, ein benutzerdefiniertes ProcessFlow-Steuerelement benötigen, da der Standard-ProcessFlow nur Typsteuerelemente sap.suite.commons.ProcessFlowNodeunter seiner nodesAggregation zulässt .

Daher besteht die Hürde darin, ein benutzerdefiniertes ProcessFlow-Steuerelement mit einer benutzerdefinierten Aggregation zu erstellen, die das benutzerdefinierte ProcessFlowNode-Steuerelement akzeptiert. Meine diesbezügliche Frage lautet:

• Verlängere ich sap.ui.core.Controloder sap.suite.commons.ProcessFlow? Wenn es sich um Control handelt, woher weiß es, dass es sich um einen ProcessFlow handelt? Ich gehe hier davon aus (ich glaube, ich beantworte teilweise meine eigene Frage), dass ProcessFlow erweitert werden soll. Das nächste Problem sind dann die Konsolenfehler wie "oControl muss ein sap.ui.core.Control oder leer sein", wenn ich versuche, das Steuerelement mit zu rendern oRm.renderControl(oControl.getAggregation("lanes")). Wie kann ich diese Fehler beheben?

---

Hier ist ein Beispielcode mit einem Screenshot, wie ein grundlegender, funktionierender ProcessFlow (Namespace xmlns="sap.suite.ui.commons") aussieht:

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

---

Hier ist mein bisheriger Code:

Steuerung:

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

In der App anzeigen:

<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

Ich habe die Fehler behoben, indem ich die initMethode gelöscht habe und eine leere rendererFunktion habe.

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

  });
});