Utwórz niestandardową kontrolę: błędy w rozszerzaniu ProcessFlow

Jan 07 2021

Próbuję utworzyć niestandardową kontrolkę z kontrolki przepływu procesu . Oto jak wygląda podstawowa kontrolka:

Teraz chciałbym, aby ProcessFlow miał niestandardowe węzły, w których na każdym węźle będą przyciski, na przykład:

Tak więc problem, który mam, polega na tym, że ponieważ będziemy mieć niestandardowe ProcessFlowNodes (na zdjęciu jako notatki wyglądające na kwadrat), będziemy potrzebować niestandardowej kontrolki ProcessFlow, ponieważ standardowy ProcessFlow zezwala tylko na sap.suite.commons.ProcessFlowNodekontrolki typów w ramach swojej nodesagregacji.

Dlatego przeszkodą jest utworzenie niestandardowej kontrolki ProcessFlow z niestandardową agregacją, która akceptuje niestandardową kontrolkę ProcessFlowNode. Moje pytanie w tym zakresie brzmi:

  • Przedłużam sap.ui.core.Controlczy sap.suite.commons.ProcessFlow? Jeśli jest to Control, skąd ma wiedzieć, że jest ProcessFlow? Moje założenie (wydaje mi się, że częściowo odpowiadam na moje własne pytanie) jest takie, że ProcessFlow ma zostać rozszerzony. Następnie następnym problemem są błędy konsoli, takie jak „oControl musi być sap.ui.core.Control lub pusty”, gdy próbuję renderować formant za pomocą oRm.renderControl(oControl.getAggregation("lanes")). Jak mogę rozwiązać te błędy?


Oto przykładowy kod ze zrzutem ekranu pokazujący, jak wygląda podstawowy, działający ProcessFlow (przestrzeń nazw 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>


Oto mój dotychczasowy kod:

Kontrola:

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

Zobacz w aplikacji:

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

Odpowiedzi

1 EldwinCheung Jan 08 2021 at 10:31

Rozwiązałem błędy, usuwając initmetodę i mając pustą rendererfunkcję.

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

  });
});