Hi All,
I've used the Process flow UI in my app and am not able to set the node and lane state in runtime.
Here is the detail info.,
By using below approach I have created my UI design and am binding the nodes="{/nodes}" lanes="{/lanes} in runtime while selecting item from another list.
<tile:ProcessFlow id="processflow1" showLabels="true"
scrollable="false" foldedCorners="true" wheelZoomable="false"
nodePress="onNodePress" labelPress="onLabelPress" nodeTitlePress="onNodeTitlePress"
nodes="{/nodes}" lanes="{/lanes}">
<tile:nodes>
<tile:ProcessFlowNode laneId="{lane}"
nodeId="{id}" title="{title}" titleAbbreviation="{titleAbbreviation}"
children="{children}"
state="{state}" stateText="{stateText}" texts="{texts}"
highlighted="{highlighted}" focused="{focused}" type="{type}" />
</tile:nodes>
<tile:lanes>
<tile:ProcessFlowLaneHeader laneId="{id}"
iconSrc="{icon}" text="{label}" position="{position}" />
</tile:lanes>
</tile:ProcessFlow>
Problem is, for the first selection from the list, nodes and lanes are appearing as expected. Followed by the first item selection, if am going for second item, the lanes and nodes state not getting refreshed properly.
Here is my part of code from controller.js
For Item 1 press below model will be set to above UI
var ReqCreatedPF = {
nodes:
[
{id: "1", lane: "0" ,title:TrTimeline, stateText: "Created", children: [2], state: sap.suite.ui.commons.ProcessFlowNodeState.Positive,},
{id: "2", lane: "1" , stateText: "Not Approved", children: [3] ,state: sap.suite.ui.commons.ProcessFlowNodeState.PlannedNegative},
{id: "3", lane: "2" , stateText: "Not Submitted", children: [4],state: sap.suite.ui.commons.ProcessFlowNodeState.PlannedNegative},
],
lanes:
[
{id: "0", icon: "sap-icon://create", label: "Request Creation", position: 0},
{id: "1", icon: "sap-icon://order-status", label: "Request Approval", position: 1},
{id: "2", icon: "sap-icon://monitor-payments", label: "Expenses Submission", position: 2},
]
};
var oModelPf1 = new sap.ui.model.json.JSONModel();
oModelPf1.setData(ReqCreatedPF);
this.getView().setModel(oModelPf1);
this.getView().byId("processflow1").setModel(oModelPf1);
For Item 2 press below model will be set,
var ReqCreatedPF = {
nodes:
[
{id: "1", lane: "0" ,title:TrTimeline, stateText: "Created", children: [2], state: sap.suite.ui.commons.ProcessFlowNodeState.Positive,},
{id: "2", lane: "1" , stateText: "Not Approved", children: [3] ,state: sap.suite.ui.commons.ProcessFlowNodeState.Positive},
{id: "3", lane: "2" , stateText: "Not Submitted", children: [4],state: sap.suite.ui.commons.ProcessFlowNodeState.Positive},
],
lanes:
[
{id: "0", icon: "sap-icon://create", label: "Request Creation", position: 0},
{id: "1", icon: "sap-icon://order-status", label: "Request Approval", position: 1},
{id: "2", icon: "sap-icon://monitor-payments", label: "Expenses Submission", position: 2},
]
};
var oModelPf2 = new sap.ui.model.json.JSONModel();
oModelPf1.setData(ReqCreatedPF);
this.getView().setModel(oModelPf2);
this.getView().byId("processflow1").setModel(oModelPf2);
regards,
Mahi