General Patterns Object Handling (Create, Edit, Delete) Overview

Updated: April 18, 2023
SAPUI5 Version 1.120

Object Handling (Create, Edit, Delete)

Intro

In addition to the basic display option, the following actions are available for objects:

  • Create 
    Objects can be created as follows:

    • From scratch
      Most of the examples in this article show how to create objects from scratch.
    • Copy an existing object
      The source object and copy are of the same object type but are not related.
    • With reference to an existing object
      The object can be of another object type, and both objects are related. For example, the user creates a delivery with a reference to the corresponding sales order.
  • Edit
    Objects can be edited at different levels: You can make the complete object editable, or only parts, such as single sections or items.
  • Delete

The interaction flows for the “create”, “edit”, and “delete” cases depend on the structure of the object.

Information
The standard floorplan for managing objects is the object page. The wizard supports create and edit actions, but has no display option. If only a few fields (<=8) need to be managed, you can use a dialog. The content available in display mode can differ from the content in edit mode (for example, the facets in an object page header). 

Simple vs. Complex Objects

An object can consist of only one page or several nested pages:

  • Simple object with one page: All information is on just one page (for example, a leave request). Object pages with navigation bars and wizards are also simple objects. In these cases, the content is still managed in one page but is structured using anchors or tabs (object page) or with a progress bar (wizard).
Simple object with one page in edit mode
Simple object with one page in edit mode
  • Complex object with nested pages: Information is split between a main page and several subpages (for example, a sales order that lists all sales order items on the main page, and a selected item is managed on a subpage). You can display the object and its pages in either a full screen layout or a flexible column layout.  
Complex object with nested pages in edit mode
Complex object with nested pages in edit mode

Simple Objects (1 Page)

Create

For the create flow, see Simple Objects (Create, Edit).

Edit

For 1-page objects, you can set the entire page to edit mode. If only a few sections are editable, set only these sections to edit mode, or open a dialog for editing. For more information, see Partial Edit.

Tip: If your page contains a table and you need to edit specific fields for many items at once, use the mass edit pattern.   

Delete

For the delete flow, see Delete Objects.

Complex Objects (Nested Pages)

You can choose between 3 interaction flows for handling objects with nested pages:

  • Partial flow
  • Local flow (only the page a user is working on is locked)
  • Global flow (entire object including subpages is locked)

You can only use one of these flows for any given object. Do not mix them.

Use the following criteria to choose the right flow:

Type The User… When to Use Example

Partial flow
  • Saves the data for each page section.
    A footer toolbar is not necessary.
  • If only a few values can be edited.  
 An employee profile is managed using an object page floorplan. Many sections are display only, such as company information, salary, and employment contract details.

An employee can only change personal information, such as their phone number and office location.

Local flow 
  • Saves data on each page separately (main page and subpages), using the footer toolbar.
  • Without draft handling:
    Gets a message when navigating between pages without saving first.
  • If several users, possibly from different teams, work together on the object.
  • If a user is only responsible for specific parts of the object.
  • If the object contains heterogeneous information (for example, for different object types).
  • If the object is deeply nested.
  • If you don’t want the entire object to be locked when one user is editing.
 A project is managed using an object page floorplan. Subprojects, tasks, vacant positions, and settlement services are managed on subpages.

The project lead is responsible for managing the overall project. Different subject matter experts are responsible for the specific tasks (filling vacant positions, settlement for business partner services, and so on).

Global flow 
  • Saves all data with one click in the footer toolbar on the main page (saves changes to the main page and all subpages at once).
  • Can navigate freely between the pages.
  • If a user is responsible for the complete object.
  • If the object contains homogeneous information: the data on the main page and subpages usually refers to the same object.
 A sales rep manages a sales order using an object page floorplan. The sales order items are listed on the main page, and the details of each item are managed on subpages.  

You can use the mass edit pattern in all flows. 

For more information, see Partial Edit, Complex Objects – Local Flow and Complex Objects – Global Flow.

Naming Guidelines

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
Add 2) Add Add
Edit Edit Save Purchase Order
Copy Copy  Create Purchase Order Copy of 123456789
[ID of copied purchase order]

For subitems, apply the following naming conventions.

Action Label of Triggering Button Label of Finalizing Action Title in Shell Bar (example) App Header (example)
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.

Dynamic page with header title
Dynamic page with header title

Resources

Elements and Controls

Implementation