This section describes the different interaction flows for managing objects. These flows include create, edit, and delete. They can be used for all floorplans, depending on the use case and the type of object being processed, such as:
- Simple object
- Part of an object
- Object with subpages – main page and subpages refer to different objects (for example, a sales order and contacts)
- Object with subpages – main page and subpages refer to one object (for example, a sales order and sales order items)
If multiple objects (or parts of them) need to be edited simultaneously, check out the article on mass editing.
The section on usage below provides an overview of each flow to help you choose the best one for your use case.
Responsiveness and Adaptiveness
The edit and create patterns reflect the responsive behavior of the forms and controls they use.
Use the partial flow if you want to let the user edit only part of an object (single sections or items). There are two variants:
- Partial edit in place (recommended): A local Edit button makes the content editable. The basic layout remains unchanged.
- Partial edit with dialog: The Edit button opens a dialog with the editable fields. Use this option if the layout in edit mode differs substantially from the layout in display mode.
Tip: If your page contains a lot of editable sections, consider switching the whole page to edit mode (simple flow).
- Use the local flow with reference items if your system setup requires every subpage to be saved separately (for 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 (data loss message).
- 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 (for 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.
Tip: If you want to keep unsaved changes for the local or global flows, you need to implement draft handling.
Apply the following naming conventions for the triggering button, finalizing action, title in the shell bar, and the placeholder for newly-created objects.
|Action||Label of Triggering Button||Label of Finalizing Action||Title in Shell Bar (example)||App Header (example)|
|Display||Navigation link||—||Purchase Order|
|Create 1)||Create||Create||Purchase Order||New Purchase Order|
|Copy||Copy||Create||Purchase Order||Copy of 123456789
[ID of copied purchase order]
|Display Subitems||Navigation link||—||Purchase Order Items (1 of 10)|
|Create Subitem 1)||Create||Create||Purchase Order Item||New Purchase Order Item|
|Add Subitem 2)||Add||Add|
|Edit Subitems||Edit||Save||Purchase Order Items (1 of 10)|
|Copy Subitem||Copy||Create*||Purchase Order Item||Copy of HT-0189
[ID of copied purchase order item]
1) Create: Brand new object that has not yet been created on the database.
2) Add: Existing object that is being added/assigned.
For naming examples, see Creating an object or item in the UI text guidelines.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.