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 Create or 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 in the right-hand 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, see Manage Parts of an Object.

Actions available 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 bar: Navigation is allowed.
• Cancel: A quick confirmation popover (data loss) appears.
• Up and Down arrows: Not available.

Actions available on the main page:

• Save: Actively saves the main object. Message toast confirms saving.
• Cancel: A quick confirmation popover (data loss) appears.
• Modified indicator for changed items: The edited line item keeps the same position within the table and is highlighted with a neutral table highlight and a text (Modified) until it is actively saved. Afterwards the indicator and highlighting disappears.

Global flow - Adding a subitem in display 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.

Actions available on the subpage:

• Apply in the footer toolbar: The 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).
• Cancel: A quick confirmation popover (data loss) appears. It is also helpful for users to have the option to discard the entries for a single subpage. Offer this button if it’s technically possible. Otherwise, the user has to discard the main object, even though only part of it needs undoing.
• Back in the shell bar: Navigation is allowed.
• Up and Down arrows: Available (optional).

Actions available on the main page:

• Save: Actively saves the main object. Saving is confirmed by a message toast.
• Cancel: A quick confirmation popover (data loss) appears.
• Modified indicator for changed items: The edited line item stays on the same position within the table and is highlighted with a neutral table highlight and a text (Modified) until it is actively saved. Afterwards the indicator and highlighting disappears.

For more information about displaying items in tables, see:

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

Global flow - Editing on the main page

Global flow - Editing on a subpage

Message Handling

On the main page, validation is triggered when the user clicks Save. If errors occur, the message popover appears. The popover displays errors on the main page and error summaries for all related 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.

In the global flow errors are grouped by section/ tab and the form field validation is visible on all pages. The main page in the global edit flow shows all errors of the main page and its sub-items in the message pop-over. Errors from the page which is visible (actual main page) will be displayed, with details if available. Errors from the sub-items are aggregated per sub-item.

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 appears, which lists any errors on the active subpage. Any errors on the main page and 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

Deleting a Subitem

The global flow allows the user to delete items on the main page and on the subpages in both display and edit modes. If the user clicks Delete, 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. The object itself switches into edit mode and the user needs to save the changes.

Global flow - Deleting a subitem on the subpage in display mode

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.