Process Flow

Process Flow is a complex control that enables you to display documents or other items in their flow.

• Responsiveness

  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 a better user experience, clickable chevrons (arrows) are included in the header. These can be used in case of an overflow, for example, when the complete ProcessFlow control cannot be displayed because the visible area is limited. The chevrons indicate that some horizontal content is not visible.

    • 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.

    Next to the chevrons, the number of lanes that are not visible is displayed.

  • 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.

  • Connection labels between process flow nodes are available to provide detailed information to a connection. If connections are not unique, you can select a connection by clicking the label. You can hide or unhide these labels. For more information, see the sample in the Explored app in the Demo Kit.

• Events

  Each node provides a click event. You can use this event as follows:

  • 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.

  If there is no further information and no actions, a node can also be read-only.

• Filter

  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 in the sample in the Explored app in the Demo Kit.