- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Manage Objects with Subpages – Local Flow
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.
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.
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 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.
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.