sapui5 - Custom ProcessFlowNode Control Not Rendering

Question

Table of Contents: Objective + Background, Problem, How Standard Process Flow Looks + Sample Code, My Code, Problem Reiterated

1. Objective + Background: Extend ProcessFlowNode control.
2. Problem: In trying to render the custom ProcessFlowNode, I'm testing with a blank custom control definition. Yet, there is an error is coming up: Cannot read property 'id' of undefined.
3. How Standard Process Flow Looks + Sample Code:

Standard Process Flow Sample Code: the nodes are the 3 square notes. the lanes are the header circles

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

4. My code

Controller: Nothing in controller

Custom ProcessFlowNode definition:

sap.ui.define(["sap/suite/ui/commons/ProcessFlowNode"],function(ProcessFlowNode){
    return ProcessFlowNode.extend("ns.testino.control.SuperProcessFlowNode",{
        metadata:{}
        ,renderer:{}
    });
});

View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" xmlns="sap.suite.ui.commons" xmlns:custom="ns.testino.control" controllerName="ns.testino.controller.coke2">
    <m:Page showHeader="false" >
        <m:Panel>
            <ProcessFlow>
                <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>
                <nodes>
                    <custom:SuperProcessFlowNode laneId="0" nodeId="1" title="Sales Order Volume" titleAbbreviation="SOV1" 
                        children="10,11" 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"/>
                    <custom:SuperProcessFlowNode laneId="0" nodeId="10" title="Outbound Delivery 40" titleAbbreviation="OD40" 
                        state="Negative" stateText="NOT OK" texts="Hello" highlighted="false" focused="false"/>
                    <custom:SuperProcessFlowNode laneId="0" nodeId="11" title="Outbound Delivery 43" titleAbbreviation="OD43" 
                        state="Neutral" stateText="Ongoing" texts="" highlighted="false" focused="false"/>
                </nodes>
            </ProcessFlow>
       </m:Panel>
    </m:Page>
</mvc:View>

Problem Reiterated: As you see, in my custom ProcessFlowNode definition, there is NO customization at all. Yet the custom node is not rendering - the non-customized lanes are rendering, but the custom nodes are not:

Why? How can I fix this?

Answer 1

等待大神解答