Updated: June 21, 2017

Manage Objects with Subpages – Global Flow

Intro

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.

Manage objects with subpages (Global flow shown on the right column)
Manage objects with subpages (Global flow shown on the right column)

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 in footer toolbar: Add navigates the user back to the main page. The entire object remains in a 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 in shell barNavigation is allowed.
  • Cancel: A quick confirmation popover (data loss) appears.
  • Up and down arrows: Not available.

Message toast: “Your changes have been applied.” Confirms that the changes have been transferred to the main page, where the user can actively save the entire object.

Global flow – Adding a subitem in display mode
Global flow – Adding a subitem in display mode
Global flow - Adding a subitem in edit mode
Global flow - Adding a subitem in edit mode

Editing Subitems

The following examples show how to switch to edit mode on the main page and on the subpage.

Availability of actions on the subpage:

  • Apply in the footer toolbarThe entire object remains in the draft state until the user actively saves it on the main page. Apply always navigates the user back up one level (for example, if the user clicks Apply for a subitem, the app navigates back to the list of items).
  • Back in shell bar: Navigation is allowed.
  • Up and down arrows: Available.

Main Page:

State of edited line item: Indicator shows Modified. If the user edits a subpage of a subpage and navigates back, the indicator also shows on the main page. For more information about displaying an item in the table, see:

Message toast: “Your changes have been applied.” Confirms that the changes have been transferred to the main page, where the user can actively save the entire object.

Global flow - Editing on the main page
Global flow - Editing on the main page
Global flow - Editing on subpage
Global flow - Editing on subpage

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.

Global flow - Message handling
Global flow - 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 - Deleting a subitem on the main page in display mode
Global flow - Deleting a subitem on the main page in display mode
Global flow - Deleting a subitem on the main page in edit mode
Global flow - Deleting a subitem on the main page in edit mode
Global flow - Deleting a subitem on the subpage in display mode
Global flow - Deleting a subitem on the subpage in display mode
Global flow - Deleting a subitem on the subpage in edit mode
Global flow - Deleting a subitem on the subpage in edit mode
Warning
Due to technical constraints, the global flow has certain limitations or deviations from the guidelines when integrating message and draft handling. These limitations include:

  • Indicators such as “Modified” cannot be shown in the table on the main page.
  • Error messages such as “Contains errors” cannot be summarized in the message popover.

These known issues appear only when using draft handling and will be fixed as soon as possible.

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.

Elements and Controls

Implementation