사용자 지정 컨트롤 생성 : ProcessFlow 확장 오류

Jan 07 2021

프로세스 흐름 컨트롤 에서 사용자 지정 컨트롤을 만들려고합니다 . 기본 컨트롤은 다음과 같습니다.

이제 ProcessFlow가 각 노드에 버튼이있는 사용자 지정 노드를 갖기를 원합니다.

따라서 내가 겪고있는 문제는 사용자 지정 ProcessFlowNode (정사각형 모양의 메모로 표시됨)가 있으므로 표준 ProcessFlow sap.suite.commons.ProcessFlowNodenodes집계 에서 유형 컨트롤 만 허용하므로 사용자 지정 ProcessFlow 컨트롤이 필요하다는 것 입니다.

따라서 장애물은 사용자 지정 ProcessFlowNode 컨트롤을 허용하는 사용자 지정 집계를 사용하여 사용자 지정 ProcessFlow 컨트롤을 만드는 것입니다. 이와 관련하여 내 질문은 다음과 같습니다.

  • sap.ui.core.Control또는 연장 sap.suite.commons.ProcessFlow합니까? Control이라면 ProcessFlow인지 어떻게 알 수 있습니까? 여기서 내 가정 (부분적으로 내 질문에 답하고 있다고 생각합니다)은 ProcessFlow가 확장되어야한다는 것입니다. 그런 다음 다음 문제는 oRm.renderControl(oControl.getAggregation("lanes")). 이러한 오류를 어떻게 해결할 수 있습니까?


다음은 기본적으로 작동하는 ProcessFlow (네임 스페이스 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>


지금까지 내 코드는 다음과 같습니다.

제어:

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

앱에서보기 :

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

답변

1 EldwinCheung Jan 08 2021 at 10:31

init메서드 를 삭제하고 빈 renderer함수 를 사용 하여 오류를 해결했습니다 .

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

  });
});