Intro

Complex objects manage items on subpages. The local flow requires every subpage to be saved separately, whereas the global flow requires only the main page to be saved. To learn when to use which type of flow (local or global), see the flow descriptions with examples.

Below, you will find the description of the local flow for creating and editing items using standard message and draft handling.

For the item delete flow, see Delete Objects.

Information

  • If you do not use draft handling, show a data loss message whenever the user leaves a changed subpage without saving the data. The data loss message must also be displayed if the user changes data on the main page without saving.
  • If you implement a draft behavior on your own, use the keep draft dialog instead.
  • If the items contain only a few fields, you can also use a dialog instead of a subpage. We recommend using the same pattern for creating and editing items.

Create Items

We describe the local flow for creating items on a subpage with the main page in display mode. The flow is the same when the main page is in edit mode.

Full Screen Layout

Complex objects - Create items in local flow
Complex objects - Create items in local flow
  1. From the main object page, the user chooses Create in the items table toolbar.
    An empty subpage appears with the title New Item. The footer toolbar contains the finalizing Create action and Cancel.
  2. After entering all the data, the user chooses Create.
    The standard flow navigates back to the main object page and shows a message toast.
    Depending on your use case, you have the following alternatives:
    – You can show the subpage in display mode.
    – You can keep the subpage in edit mode.
    – If the user needs to create several items in succession, you can offer the action Create and Next in the footer toolbar of the subpage. It opens a new empty subpage.
  3. Choosing Cancel opens a confirmation popover, and the user can opt to discard the draft. In this case, the system navigates back to the main object page.
Guidelines
If you offer Create and Next on the subpage, use the following order: Create and Next, Create, Cancel. Only emphasize Create and Next.

Flexible Column Layout

In flexible column layout, the standard flow is as follows:

  • If the user chooses Create on the subpage, the subpage column closes, and the main page shows a message toast.
  • If the user confirms Cancel, the subpage column closes.
  • If the user chooses Create and Next on the subpage, this subpage column opens a new empty subpage with a message toast.

Edit Items

We describe the local flow for editing items on a subpage with the main page in display mode. The flow is the same when the main page is in edit mode.

Full Screen Layout

Complex Objects - Edit Items in Local Flow
Complex Objects - Edit Items in Local Flow
  1. From the main object page, the user navigates to the details of an item.
    The subpage features a header toolbar with an Edit buttonThe title of the subpage is <item> (here: depending on example).
    If your use case requires to open the item directly in edit mode, you can offer Edit in the table toolbar or as inline action.
  2. On the subpage, the user chooses Edit. The subpage changes to edit mode, showing a footer toolbar containing the finalizing Save action and Cancel. The title does not change.
  3. After updating all the data, the user chooses Save.
    The standard flow shows the updated item in display mode and a message toast.
    Depending on your use case, you have the following alternatives:
    – You can keep the subpage in edit mode.
    – If the user needs to edit several items in succession, you can offer the action Save and Next in the footer toolbar of the subpage. It opens the next item’s subpage in edit mode.
    – You can also show up and down arrows for navigating to the next and previous item in edit mode.
  4. Choosing Cancel opens a confirmation popover and the user can opt to discard the draft. In this case, the system displays the item subpage.
Guidelines

  • If you offer Save and Next, use the following order: Save and Next, Create, Cancel. Only emphasize Save and Next.
  • Use either Save and Next or the up and down arrows, never both.
  • Choose Save and Next if your use case requires to change one item after the other. Choose the up and down arrows if the user just needs to change a few items and wants to scroll quickly between the relevant ones.

Flexible Column Layout

In flexible column layout, the standard flow is as follows:

  • If the user chooses Save on the subpage, the subpage column switches to display mode and shows a message toast.
  • If the user confirms Cancel, the subpage column switches to display mode.
  • If the user chooses Save and Next on the subpage, this subpage column shows the next item in edit mode.

Related Links

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

Elements and Controls

Implementation