Updated: March 10, 2021

Complex Objects – Local Flow (Create, Edit)

Intro

Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, such as a sales order and contacts). To leave a subpage in edit mode, the user has to save the changes, or discard them. To keep unsaved changes, you need to implement draft handling.

Handling for complex objects with subpages (local flow shown on left column)
Handling for complex objects with subpages (local flow shown on left column)

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

Local Flow with Draft

Adding Reference Items – Display Mode

The following examples show how to create a new item in a detail screen. You can also use a dialog instead.

Actions available on the subpage:

  • Create (emphasized button): Create and save to the database.
  • Cancel: Discard the changes, with quick confirmation popover (data loss).
  • Back: Return to the subitem on the main page (draft state).
  • Up and down arrows: Not available.
Add a reference item in display mode - Local flow
Add a reference item in display mode - Local flow

Adding Reference Items – Edit Mode

Actions available on the subpage:

  • Create (emphasized button): Create and save to the database.
  • Cancel: Discard the changes, with quick confirmation popover (data loss).
  • Back: Return to the subitem on the main page (draft state).
  • Up and down arrows: Not available.

In edit mode, draft handling allows the user to navigate between the main page and the subpages.

Add a reference item in edit mode - Local flow
Add a reference item in edit mode - Local flow

Placement of Actions

Depending on the use case, you can place the actions (such as Edit) either on the table toolbar or in the header bar. Place closing or finalizing actions (such as Save and Cancel) in the footer bar. Find out more in the toolbar articles.

Editing Reference Items – Display Mode

Depending on the use case, emphasize either the Save button or the Save and Next button. Always position the emphasized button on the very left.

  • Save: Save to the database.
  • Save and Next: Save to the database and switch to the next item.
  • Cancel: Discard the changes, with quick confirmation popover (data loss).
  • Back: Return to the reference item on the main page (draft state).
  • Up and down arrows: Navigate to the previous/next reference item on the main page (draft state).
Edit reference items - Display mode
Edit reference items - Display mode

Editing Reference Items – Edit Mode

Availability of actions on the subpage:

Depending on the use case, either the Save button or the Save and Next button could be emphasized. Always position the emphasized button on the very left.

  • Save: Object is actively saved.
  • Save and Next: Object is actively saved and user can switch to next reference item.
  • Cancel: Discard the changes, with quick confirmation popover (data loss).
  • Back: Return to the reference item on the main page (draft state).
  • Up and down arrows: Reference item on main page in draft state.
Edit reference items - Edit mode
Edit reference items - Edit mode

Deleting Reference Items

The local flow allows the user to delete items on the main page in display and edit mode. Whenever the user clicks delete, a delete dialog pops up, and the user is prompted to confirm the deletion. Afterwards, a message toast confirms that the item has been successfully deleted.

Local flow - Delete a reference item on the main page
Local flow - Delete a reference item on the main page
Local flow - Delete a reference item on the subpage
Local flow - Delete a reference item on the subpage

Local Flow Without Draft

Adding Reference Items – Display Mode

The following examples show how to create a new item via the detail screen. It’s also possible to create an item via dialog. For more information, check out the create page article.

Availability of actions on the subpage:

Create (emphasized button): Item is created and actively saved.
Cancel: Item is canceled and a confirmation popover appears (data loss).
Back: The user can go back to the main page, and a warning message appears (data loss).
Up and Down arrows: Not available.

Add a reference item - display mode - without draft
Add a reference item - display mode - without draft

Adding or Editing Reference Items – Edit Mode

It’s not possible to navigate to a reference item. The user needs to save the entries first. The Navigation arrows and plus icon ( ) have been removed from this scenario.

Add or edit a reference item - edit mode - without draft
Add or edit a reference item - edit mode - without draft

Editing Reference Items – Display Mode

Availability of actions on the subpage:

Save: Item is actively saved
Save and Next: Item is actively saved and the user can switch to next reference item.
Cancel: Item is cancelled and a confirmation popover appears (data loss).
Back: The user can go back to the main page, and a warning message appears (data loss).
Up and down arrows: A quick confirmation popover (data loss) appears.

Edit reference items - display mode
Edit reference items - display mode

Deleting Reference Items

Deletion is independent of draft handling. For more information on deleting, see the paragraph on Deleting Reference Items in the Local Flow with Draft section of this article.

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