Platform: Process flow V1.0 Component Technical Design - SAP/fundamental-ngx GitHub Wiki

Process flow

Summary

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.

Example

<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

Property Bindings

`[id]="componentID`:String

Id of the process flow component

`[foldedCorners]="true|false|null|undefined"`:boolean

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

`[scrollable]="true|false"`:boolean

 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

`[showLabels]="true|false"`:boolean

Defines if the connection labels are shown or not. The default value is false

`[wheelZoomable]="true|false"`:boolean

Defines if semantic zooming by mouse wheel events on desktop browsers is enabled. The default value is true

Event Bindings

`(headerPress)="onheaderPress()"`

  This event is triggered when the header column is clicked.
  It is available only in header mode. i.e. when no nodes are defined.

`(labelPress)="onLabelPress()`

This event is triggered when a connection label was clicked.

`(nodePress)="onNodePress()`

This event is triggered when a node was clicked.

`(onError)="onError()`

This event is triggered when an issue occurs with the process flow calculation.

##ProcessFlowConnection component

Property Bindings

`[id]="connectionID`:String

Id of the process flow connection

`[drawData]="[]"`:object

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]="selected| Regular | Highlighted| Dimmed"`:ProcessFlowConnectionState

State of the connection. the default value is -regular

`[type]="Normal|planned"`:ProcessFlowConnectionType

Defines type of connection The default value is Normal

`[zoomLevel]="one|two|three|four"`:ProcessFlowZoomLevel

Defines if semantic zooming by mouse wheel events on desktop browsers is enabled. The default value is two

`[priority]=0`:int

  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.

`[state]= Critical | Negative | Neutral | Positive` :ProcessFlowConnectionLabelState

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

Property Bindings

`[id]="laneHeaderID`:String

Id of the process flow lane header id

`[iconSrc]="path of the icon"`:string

The path of the icon to be displayed in the middle of the control.

`[position]="0"`:int

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.

`[state]="[]"`: ProcessFlowLaneState[]

 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]="text information "`:string

   Text information for the user which will be displayed in the process flow.

Event Bindings

`(headerPress)="onheaderPress()"`

  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

Property Bindings

`[children]="[]`:any[]

Node children array.

`[focused]="true|false"`:boolean

Whether the node should be displayed in-focus state. the default value is false

`[highlighted]="true|false"`:boolean

Whether the node should be displayed highlighted state. the default value is false

`[isTitleClickable]="true|false"`:boolean

Whether the node Title is Clickable. the default value is false

`[laneId]="linkedlaneId"`: string

Specifies the assignment of the node to the respective lane.

`[laneId]="linkedlaneId"`: string

Specifies the assignment of the node to the respective lane.

`[nodeId]="nodeid "`:string

id for the node

`[selected]=="true|false"`:boolean

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.

`[stateText]="text on the node"`: string

    Description of the state, 

    for example: "Status OK"

`[tag]="obj"`: object

  The user-defined object which is returned back to the user by on node click.

`[texts]="[text1,text2]"`: string[]

   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.

`[title]="node title"`: string

   current Node title.

`[titleAbbreviation]="node title Abbreviation"`: string

  It is used in zoom level 'Three'.

`[nodeType]="Single|aggregated"`: ProcessFlowNodeType

  Type of the node.

Event Bindings

`(nodePress)="onNodePress()"`

  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.

`(titlePress)="onTitlePress()"`

  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

Paramter values

`processFlowConnectionState ="[Dimmed| Highlighted| Regular| Regular]"

`processFlowConnectionType ="[Normal | Normal ]"

`processFlowDisplayState ="[ "Dimmed

                            | DimmedFocused
                            | Highlighted
                            | HighlightedFocused
                            | Regular
                            | RegularFocused
                            | Selected
                            | SelectedFocused
                            | SelectedHighlighted 
                            | SelectedHighlightedFocused", ]"

`processFlowLaneState ="[ state | value]"

`processFlowNodeState ="[ Critical

                           | Negative
                           | Neutral
                           | Planned
                           | PlannedNegative
                           | Positive"]"

`processFlowNodeType ="[ Aggregated | Single]"

`processFlowZoomLevel ="[ One | two | three| four]"

Content Projection

N/A

Related Modules

Additional Notes

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

fdp-process-flow-lane-header and fdp-process-flow-node can 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.

Notes

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>

Platform: Process flow V1.0 Component Technical Design - SAP/fundamental-ngx GitHub Wiki

Process flow

Summary

Example

Property Bindings

[id]="componentID:String

[foldedCorners]="true|false|null|undefined":boolean

[scrollable]="true|false":boolean

[showLabels]="true|false":boolean

[wheelZoomable]="true|false":boolean

Event Bindings

(headerPress)="onheaderPress()"

(labelPress)="onLabelPress()

(nodePress)="onNodePress()

(onError)="onError()

Property Bindings

[id]="connectionID:String

[drawData]="[]":object

[state]="selected| Regular | Highlighted| Dimmed":ProcessFlowConnectionState

[type]="Normal|planned":ProcessFlowConnectionType

[zoomLevel]="one|two|three|four":ProcessFlowZoomLevel

[priority]=0:int

[state]= Critical | Negative | Neutral | Positive :ProcessFlowConnectionLabelState

Property Bindings

[id]="laneHeaderID:String

[iconSrc]="path of the icon":string

[position]="0":int

[state]="[]": ProcessFlowLaneState[]

[text]="text information ":string

Event Bindings

(headerPress)="onheaderPress()"

Property Bindings

[children]="[]:any[]

[focused]="true|false":boolean

[highlighted]="true|false":boolean

[isTitleClickable]="true|false":boolean

[laneId]="linkedlaneId": string

[laneId]="linkedlaneId": string

[nodeId]="nodeid ":string

[selected]=="true|false":boolean

[nodeState]=" "Critical| Negative| Neutral| Planned| PlannedNegative| Positive",": ProcessFlowNodeState

[stateText]="text on the node": string

[tag]="obj": object

[texts]="[text1,text2]": string[]

[title]="node title": string

[titleAbbreviation]="node title Abbreviation": string

[nodeType]="Single|aggregated": ProcessFlowNodeType

Event Bindings

(nodePress)="onNodePress()"

(titlePress)="onTitlePress()"

Paramter values

`processFlowConnectionState ="[Dimmed| Highlighted| Regular| Regular]"

`processFlowConnectionType ="[Normal | Normal ]"

`processFlowDisplayState ="[ "Dimmed

`processFlowLaneState ="[ state | value]"

`processFlowNodeState ="[ Critical

`processFlowNodeType ="[ Aggregated | Single]"

`processFlowZoomLevel ="[ One | two | three| four]"

Content Projection

Related Modules

Additional Notes

i18n

Notes

Questions

`[id]="componentID`:String

`[foldedCorners]="true|false|null|undefined"`:boolean

`[scrollable]="true|false"`:boolean

`[showLabels]="true|false"`:boolean

`[wheelZoomable]="true|false"`:boolean

`(headerPress)="onheaderPress()"`

`(labelPress)="onLabelPress()`

`(nodePress)="onNodePress()`

`(onError)="onError()`

`[id]="connectionID`:String

`[drawData]="[]"`:object

`[state]="selected| Regular | Highlighted| Dimmed"`:ProcessFlowConnectionState

`[type]="Normal|planned"`:ProcessFlowConnectionType

`[zoomLevel]="one|two|three|four"`:ProcessFlowZoomLevel

`[priority]=0`:int

`[state]= Critical | Negative | Neutral | Positive` :ProcessFlowConnectionLabelState

`[id]="laneHeaderID`:String

`[iconSrc]="path of the icon"`:string

`[position]="0"`:int

`[state]="[]"`: ProcessFlowLaneState[]

`[text]="text information "`:string

`(headerPress)="onheaderPress()"`

`[children]="[]`:any[]

`[focused]="true|false"`:boolean

`[highlighted]="true|false"`:boolean

`[isTitleClickable]="true|false"`:boolean

`[laneId]="linkedlaneId"`: string

`[laneId]="linkedlaneId"`: string

`[nodeId]="nodeid "`:string

`[selected]=="true|false"`:boolean

`[nodeState]=" "Critical| Negative| Neutral| Planned| PlannedNegative| Positive","`: ProcessFlowNodeState

`[stateText]="text on the node"`: string

`[tag]="obj"`: object

`[texts]="[text1,text2]"`: string[]

`[title]="node title"`: string

`[titleAbbreviation]="node title Abbreviation"`: string

`[nodeType]="Single|aggregated"`: ProcessFlowNodeType

`(nodePress)="onNodePress()"`

`(titlePress)="onTitlePress()"`