Блог

Я пытаюсь создать пользовательский элемент управления из элемента управления потоком процесса. Вот как выглядит базовый элемент управления:

Теперь я хотел бы, чтобы ProcessFlow имел пользовательские узлы, в которых на каждом узле будут кнопки, например:

Итак, проблема, с которой я столкнулся, заключается в том, что, поскольку у нас будут пользовательские ProcessFlowNodes (изображенные в виде квадратных заметок), нам понадобится пользовательский элемент управления ProcessFlow, поскольку стандартный ProcessFlow допускает только sap.suite.commons.ProcessFlowNode элементы управления типами при его nodes агрегировании.

Таким образом, препятствием является создание пользовательского элемента управления ProcessFlow с пользовательской агрегацией, которая принимает пользовательский элемент управления ProcessFlowNode. Мой вопрос в этой связи таков:

• Должен ли я продлить sap.ui.core.Control или sap.suite.commons.ProcessFlow ? Если это контроль, то как он распознает, что это поток процессов? Мое предположение здесь (я полагаю, что частично отвечаю на свой собственный вопрос) заключается в том, что ProcessFlow должен быть расширен. Затем следующая проблема — это ошибки консоли, такие как «oControl должен быть sap.ui.core.Control или пустой», когда я пытаюсь отобразить элемент управления с oRm.renderControl(oControl.getAggregation("lanes")) помощью . Как я могу устранить эти ошибки?

Вот пример кода со скриншотом того, как выглядит базовый рабочий поток процессов (пространство 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>
 

Я устранил ошибки, удалив 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

  });
});