Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing session (one object, such as a sales order as the main object with sales order items as closely related subpages). In this case, the subpages do not have an explicit Save button. Any changes to the subpages are saved automatically in the background (temporary save).  After editing, the user has to navigate back to the main page to save or discard the changes to all subpages. If you want to keep unsaved changes, you need to implement draft handling.

The sections below describe the global flow with and without draft handling.

Global Flow with Draft

Adding a Subitem

The following examples show how to create a new item via the detail screen. You can also use a dialog for creating items. For more information, check out the create page floorplan.

Availability of actions on the subpage:

• Add (emphasized button): The entire object remains in draft state until the user actively saves it. Without draft handling, the object remains in a “dirty state” until the main object is actively saved.
• Back: Navigation is allowed.
• Cancel: A quick confirmation popover (data loss) appears.
• Up and down arrows: Not available.

Editing Subitems

The following examples show how to set the object into edit mode on the main page and on the subpage.

Availability of actions on the subpage:

• Back to [Main Page]: The entire object remains in draft state until the user actively saves it. The button text in brackets should be replaced with the title of the main object.
• Back: Navigation is allowed.
• Up and down arrows: Available.

Main Page:

State of edited line item: Indicator shows Modified. For more information about displaying an item in the table, see:

• Responsive table (sap.m.table)
• Analytical table

Message Handling

On the main page, validation is triggered when the user clicks Save. If errors occur, the message popover “Item [Item name]: Contains errors” appears. The popover displays errors on the main page and error summaries for all related subpages. Due to technical constraints, the message popover doesn’t support direct links to subpages. To help the user find the item and solve the issue, an indicator in the line item of the table shows which subpage contains errors.

On subpages, validation only applies for the active screen and is executed on focus out, as the Save action is not available. If errors occur, the message popover “[Main Page]: Contains errors” appears, which lists any errors on the active subpage and on the main page. Any errors on other subpages are shown only on the popover for the main page, and not on each related subpage. For more information about the messaging, see message handling.

Deleting a Subitem

The global flow allows the user to delete items on the main page in both display and edit modes. The delete functionality for subpages is also available in display and edit modes. If the user deletes a subitem directly in the table on the main page, the subitem is removed immediately and a message toast appears. If the user clicks Delete on the subpage, a Delete dialog appears prompting the user to confirm the deletion. This confirmation is necessary to avoid accidental deletion. Afterwards, a message toast confirms that the item has been deleted successfully.

Global Flow Without Draft

If the global flow is used without draft handling, the interaction stays the same, but the data remains in a “dirty state” until the user actively saves on the main page. This means that data could possibly be lost during navigation between subpages and main page. Therefore we highly recommend using the local flow instead.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.