Platform: Process flow V1.0 Component Technical Design
kavya-b edited this page May 20, 2020
·
7 revisions
The Process Flow allows us to show flows of multiple object types, for example, documents or approvals.
-
It enables us to display documents or other items in their flow. -
The items or documents are displayed as nodes in a lane containing a lane header with a donut chart. -
The donut chart reflects the status of the nodes in its lane. -
The chevron arrows Chevron arrow >> in the lane header separate the lanes from one another. -
Connector lines show the process flow of the items between the nodes.
<fdp-process-flow
[id]="componentID"
[foldedCorners]="true|false|null|undefined"
[scrollable]="true|false"
[showLabels]="true|false"
[wheelZoomable]="true|false"
(labelPress)="onLabelPress()"
(onError)="onError()">
<fdp-process-flow-connection
[id]="connectionID"
[drawData]="{ flowLine = "r|t|l| b",
targetNodeState = "Critical
| Negative
| Neutral
| Planned
| PlannedNegative
| Positive",
displayState= "Dimmed
| DimmedFocused
| Highlighted
| HighlightedFocused
| Regular
| RegularFocused
| Selected
| SelectedFocused
| SelectedHighlighted
| SelectedHighlightedFocused",
hasArrow= "true|false"
}
[state]="selected| Regular | Highlighted| Dimmed"
[type]="Normal | Planned"
[zoomLevel]="one|two|three|four"
[priority]=0
[state]= "Critical | Negative | Neutral | Positive " > <fdp-process-flow-connection>
<fdp-process-flow-lane-header
[iconSrc]="URI of the icon"
[laneId]="laneheaderID"
[position]="0"
[laneState]= positive | negative | neutral | planned
[text]= "Message on lane for user"
(headerPress)="onHeaderPress()"> </fdp-process-flow-lane-header>
<fdp-process-flow-node
[children]="[]"
[focused]="true|false"
[highlighted]="true|false"
[isTitleClickable]="true|false"
[laneId]="mappedlaneId"
[nodeId]="nodeID"
[selected]="true|false"
[nodeState]= positive | negative | neutral | planned
[stateText]="status OK"
[tag]="obj[]"
[texts]="[text1, text2]"
[title]="titleofNode"
[titleAbbreviation]="titleofNodeAbrevation"
[nodetype]="Neutral"
(titlePress)="ontitlePress()"
(nodePress)="onNodePress()"></fdp-process-flow-node>
</fdp-process-flow>##ProcessFlow component
Id of the process flow component
This property defines the folded corners for the single node control.
true: means folded corner
false|null|undefined: means normal corner
the default value is -false
If graph overflows, scrollable= true will give the option to the user scroll and see the remaining part.
If scrollable=false then width/height of the whole control will change as the graph gets smaller/larger such that Graph size matches the container size.
the default value is -true
Defines if the connection labels are shown or not. The default value is false
Defines if semantic zooming by mouse wheel events on desktop browsers is enabled. The default value is true
This event is triggered when the header column is clicked.
It is available only in header mode. i.e. when no nodes are defined.
This event is triggered when a connection label was clicked.
This event is triggered when a node was clicked.
This event is triggered when an issue occurs with the process flow calculation.
##ProcessFlowConnection component
Id of the process flow connection
It has attributes for one element:
- flowLine (string) - A connection definition where the line should be drawn. A string that defines a course of a flow line. It is a connection between nodes in a process flow. The string can contain the following characters: - "r" for right, "t" for top, "l" for left, "b" for bottom.
- targetNodeState (ProcessFlowNodeState) - A copy of the target node status. If the target node is created, the line is solid. If the target node is planned, the line is dashed.
- displayState=Dimmed | DimmedFocused | Highlighted | HighlightedFocused | Regular | RegularFocused | Selected | SelectedFocused | SelectedHighlighted | SelectedHighlightedFocused (ProcessFlowDisplayState) - The display state of the node.
- hasArrow (boolean) - Indicates if the line has an arrow on the right end.
State of the connection. the default value is -regular
Defines type of connection The default value is Normal
Defines if semantic zooming by mouse wheel events on desktop browsers is enabled. The default value is two
It is used to define which label is visible if the state of multiple labels is equal.
For example, if there are multiple labels with the equal state (e.g. Negative state appears twice),
the priority decides which one needs to be selected.
Specifies the state of the connection label. If multiple labels are available for one connection, the label will be selected by state based on the following order: Neutral -> Positive -> Critical -> Negative.
##ProcessFlowlaneHeader component
Id of the process flow lane header id
The path of the icon to be displayed in the middle of the control.
It specifies the position of the lane in the process flow.
The numbering of the position has to be sequential and needs to start from 0.
The user can explicitly set an array with the two properties state and value of the state.
For example:
[state:ProcessFlowNodeState.Neutral, value: 20].
Possible states are states are positive, negative, neutral, and planned.
Text information for the user which will be displayed in the process flow.
This event is triggered when the header column is clicked.
It is available only in header mode. i.e. when no nodes are defined.
##ProcessFlowNode component
Node children array.
Whether the node should be displayed in-focus state. the default value is false
Whether the node should be displayed highlighted state. the default value is false
Whether the node Title is Clickable. the default value is false
Specifies the assignment of the node to the respective lane.
Specifies the assignment of the node to the respective lane.
id for the node
Whether the node should be displayed in the selected state.
the default value is false
[nodeState]=" "Critical| Negative| Neutral| Planned| PlannedNegative| Positive",": ProcessFlowNodeState
State of the current node.
Description of the state,
for example: "Status OK"
The user-defined object which is returned back to the user by on node click.
The property contains the additional texts on the node.
One array must not contain more than two strings.
Additional strings in the array should be ignored.
current Node title.
It is used in zoom level 'Three'.
Type of the node.
This event is triggered when the user clicks on the node.
However, this event should not be fired if the title Press event has been fired.
This event handler is executed when the user clicks the node title. It should be triggered only when the title is clickable (isTitleClickable equals true).
##ProcessFlow.config.ts
| DimmedFocused
| Highlighted
| HighlightedFocused
| Regular
| RegularFocused
| Selected
| SelectedFocused
| SelectedHighlighted
| SelectedHighlightedFocused", ]"
| Negative
| Neutral
| Planned
| PlannedNegative
| Positive"]"
N/A
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
fdp-process-flow-lane-headerandfdp-process-flow-nodecan be supported as:
<fdp-process-flow-lane-header
[iconSrc]="URI of the icon"
[laneId]="laneheaderID"
[position]="0"
[laneState]= positive | negative | neutral | planned
i18n-text="@@laneMsg"
text= "Message on lane for user"
(headerPress)="onHeaderPress()">
</fdp-process-flow-lane-header> <fdp-process-flow-node
[children]="[]"
[focused]="true|false"
[highlighted]="true|false"
[isTitleClickable]="true|false"
[laneId]="mappedlaneId"
[nodeId]="nodeID"
[selected]="true|false"
[nodeState]= positive | negative | neutral | planned
i18n-stateText="@@stateText"
[stateText]="status OK"
[tag]="obj[]"
[texts]="[text1, text2]"
i18n-title="@@title"
title="titleofNode"
i18n-titleAbbreviation="@@titleAbbreviation"
titleAbbreviation="titleofNodeAbrevation"
[nodetype]="Neutral"
(titlePress)="ontitlePress()"
(nodePress)="onNodePress()">
</fdp-process-flow-node> Redesign Required: Yes
-
[texts]as a string[] cannot be supported for i18n unless provided declaratively or provided from backend with translated strings. - How will the popover/quick view/action sheet buttons be translated?
-
children[]nodes need to be provided declaratively.
--
As discussed, We can have connections and their connected nodes and labels in JSON object formate as well.
connnectionlist[]=
[
{id: "1", lane: "0", title: "Order 1", titleAbbreviation: "Serv 01",
children: [
{
nodeId: 5,
connectionLabel:ProcessFlowConnectionLabel({
id: "myLabelId1To5",
text: "my node5 text",
enabled: false,
icon: "sap-icon--success",
state: ProcessFlowConnectionLabelState.Positive
})
},
{
nodeId: 1,
connectionLabel:ProcessFlowConnectionLabel({
id: "myLabelId5To1",
text: "my node5 text",
enabled: true,
icon: "sap--icon-failure",
state: ProcessFlowConnectionLabelState.Negative
})
}]
},
{id: "2", lane: "1", title: "Order 2", titleAbbreviation: "Serv 02",
children: [
{
nodeId: 5,
connectionLabel:ProcessFlowConnectionLabel({
id: "myLabelId1To5",
text: "my node5 text",
enabled: false,
icon: "sap-icon--success",
state: ProcessFlowConnectionLabelState.Positive
})
},
{
nodeId: 1,
connectionLabel:ProcessFlowConnectionLabel({
id: "myLabelId5To1",
text: "my node5 text",
enabled: true,
icon: "sap--icon-failure",
state: ProcessFlowConnectionLabelState.Negative
})
}]
}]Similarly, user can pass other directive values of connection,lane,nodes then the signature will be
<fdp-process-flow
[id]="componentID"
[foldedCorners]="true|false|null|undefined"
[scrollable]="true|false"
[showLabels]="true|false"
[wheelZoomable]="true|false"
(labelPress)="onLabelPress()"
(onError)="onError()"
(nodePress)="onNodePress()"
(headerPress)="onHeaderPress()">
</fdp-process-flow>