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.

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.

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.

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

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.

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.

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.

Resources

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