-
Notifications
You must be signed in to change notification settings - Fork 133
Platform: Process flow V1.0 Component Technical Design
sKudum edited this page Jan 29, 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
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.
N/A
- fdp-popover-> to display the popover on click of menu icon
- fdp-menu-> can be used by the customer to insert a list of menu items.
--