The ProcessFlow control allows you to show flows of multiple object types, for example, documents or approvals.
Process Flow is a complex control that enables you to display documents or other items in their flow.
The ProcessFlow control can react to the size of the container into which it is put. It provides four zoom levels that are used depending on the container size at the time of the initial load. Afterwards, the users can change the zoom levels according to their needs.
Behavior and Interaction
ProcessFlow control offers different zooming and moving behaviors:
You can move the whole flow by holding down the left mouse button like you would navigate a street map in a web browser.
To zoom in or out, the user can either use the mouse wheel or choose the respective buttons, if the ProcessFlow control is used in combination with a corresponding toolbar. The zoom has semantic effects: Detailed information is added or removed depending on the zoom level.
Both behaviors can be switched off by setting the respective properties accordingly. For more information, see the API Reference Documentation.
For desktops, click these chevrons and move the complete process flow by one lane.
For mobile devices, the chevrons are just indicators; you scroll the ProcessFlow control by touch.
By using the aggregated node type in sap.suite.ui.commons.ProcessFlowNode, you can group nodes that are semantically equal or have some properties in common . Possible values of the type property are single (default) or aggregated, which can be set by the application.
To display a popover containing further information to a certain object type. From this quick overview, you can navigate to the object type itself.
If no additional information needs to be displayed, an action sheet can be triggered instead of the popover to allow the user to perform an action on the item.
The ProcessFlow control can be used in combination with a filter bar. The filter bar allows you to filter for certain types or attributes. Depending on the filter criteria, the application is able to highlight a path of nodes, which is displayed in a highlighted manner. The aggregation in the header nodes is also adapted automatically by the ProcessFlow control. For more information, choose the ToggleHightPath pushbutton of the ProcessFlow control provided on the Explored tab in the Demo Kit.