Object Handling (Create, Edit, Delete)

Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)

Intro

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

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:

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:

<div> <div>Type</div> <div>The User…</div> <div>When to Use</div> <div>Example</div> </div> <div> <div> <h4 id="partial-flow">Partial flow</h4> </div> <div> <ul> <li>Saves the data for each page section.<br>A footer toolbar is not necessary.</li> </ul> </div> <div> <ul> <li>If only a few values can be edited.</li> </ul> </div> <div> <p>An employee profile is managed using an object page floorplan. Many sections are display only, such as company information, salary, and employment contract details.</p> <p>An employee can only change personal information, such as their phone number and office location.</p> </div> </div> <div> <div> <h4 id="local-flow">Local flow</h4> </div> <div> <ul> <li>Saves data on each page separately (main page and subpages), using the footer toolbar.</li> <li>Without draft handling:<br>Gets a message when navigating between pages without saving first.</li> </ul> </div> <div> <ul> <li>If several users, possibly from different teams, work together on the object.</li> <li>If a user is only responsible for specific parts of the object.</li> <li>If the object contains heterogeneous information (for example, for different object types).</li> <li>If the object is deeply nested.</li> <li>If you don’t want the entire object to be locked when one user is editing.</li> </ul> </div> <div> <p>A project is managed using an object page floorplan. Subprojects, tasks, vacant positions, and settlement services are managed on subpages.</p> <p>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).</p> </div> </div> <div> <div> <h4 id="global-flow">Global flow</h4> </div> <div> <ul> <li>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).</li> <li>Can navigate freely between the pages.</li> </ul> </div> <div> <ul> <li>If a user is responsible for the complete object.</li> <li>If the object contains homogeneous information: the data on the main page and subpages usually refers to the same object.</li> </ul> </div> <div>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.</div> </div>
information

Note that, for technical reasons, an application implemented with JavaScript UI5, cannot display an SAP Fiori message box. Instead, only a native browser popup can be displayed. Typically, this applies to:

  • Navigation away from a page with unsaved data using browser controls, for example, when the user clicks the browser back button to leave an object page in an application without draft handling
  • Closing a browser page or tab with unsaved data
  • Refreshing a browser page with the browser controls

However, the message box can be displayed for the following actions, as described in the SAP Fiori guidelines:

  • Navigation between applications
  • Navigation away from pages in full or partial edit mode

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.

<div> <div>Action</div> <div>Label of Triggering Button</div> <div>Label of Finalizing Action</div> <div>Title in Shell Bar (example)</div> <div>App Header (example)</div> </div> <div> <div>Display</div> <div><em>Navigation link</em></div> <div> </div> <div>Purchase Order</div> <div></div> </div> <div> <div>Create [1)]{color=pink-8}</div> <div>Create</div> <div>Create</div> <div>Purchase Order</div> <div>New Purchase Order</div> </div> <div> <div>Add [2)]{color=pink-8}</div> <div>Add</div> <div>Add</div> <div></div> <div></div> </div> <div> <div>Edit</div> <div>Edit</div> <div>Save</div> <div>Purchase Order</div> <div></div> </div> <div> <div>Copy</div> <div>Copy</div> <div>Create</div> <div>Purchase Order</div> <div>Copy of 123456789<br>[ID of copied purchase order]</div> </div>

For subitems, apply the following naming conventions.

<div> <div>Action</div> <div>Label of Triggering Button</div> <div>Label of Finalizing Action</div> <div>Title in Shell Bar (example)</div> <div>App Header (example)</div> </div> <div> <div>Display Subitems</div> <div><em>Navigation link</em></div> <div> </div> <div>Purchase Order Items (1 of 10)</div> <div></div> </div> <div> <div>Create Subitem [1)]{color=pink-8}</div> <div>Create</div> <div>Create</div> <div>Purchase Order Item</div> <div>New Purchase Order Item</div> </div> <div> <div>Add Subitem [2)]{color=pink-8}</div> <div>Add</div> <div>Add</div> <div></div> <div></div> </div> <div> <div>Edit Subitems</div> <div>Edit</div> <div>Save</div> <div>Purchase Order Items (1 of 10)</div> <div></div> </div> <div> <div>Copy Subitem</div> <div>Copy</div> <div>Create[*]{color=pink-8}</div> <div>Purchase Order Item</div> <div>Copy of HT-0189<br>[ID of copied purchase order item]</div> </div>

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

Visual Design

  • Form (visual design specification)

Elements and Controls

Implementation