Object Handling – Copy

Intro

The copy pattern allows you to copy an object and then edit the newly created object.

Usage

Use the copy pattern if you want to copy an object and then edit the newly created object. If you want to reference to an existing object, use the create with reference pattern instead.

Layout

There are 4 use cases for copying an object:

The object to be copied is part of the current table.
The object to be copied is not part of the current table (for example, because it has been approved).
The object to be copied is a template.
The whole object is to be copied, for example, from an object page within a list-detail-detail view (flexible column layout).

For use cases 1–3, place the Copy function (a transparent button) in the relevant toolbar (for example, above the form or table control).

For use case 4, place the Copy function in the header toolbar of the object page (global actions). For more information about the interaction, read about the flexible column layout.

Behavior and Interaction

This section describes the interaction flow of the copy pattern for different use cases.

1) The copied object is part of the current table.

The user selects an item to be copied. Multiselection is not possible. Clicking the Copy button takes the user to the details page.

Copied object is part of a table

The form is prefilled with the data from the selected item on the previous page. The form remains in edit mode until the user clicks the Create button. If the user selects Cancel, a data loss message appears.

Details page after copying

2 + 3) The copied object is not part of the current table or is to be copied from a template.

When the user clicks the Copy button, an action sheet appears. The user can choose one of three actions: Copy, Copy from Object, or Copy from Template. You can also choose to show only one or two of these actions to the user.

Action sheet after clicking the 'Copy' button

When the user selects Copy from Object or Copy from Template, a dialog appears prompting the user to choose an object or a template. When the user chooses one of these and clicks the Create button, the details page appears.

Dialog appears after the user chooses a copy action

The details page contains a prefilled form and remains in edit mode until the user clicks the Create button. If the user clicks Cancel, a data loss message appears.

Details page after copying

4) The copied object is located in the details view (flexible column layout)

The user selects the item to be copied from the list view, for instance list report or worklist. The Copy button appears in the header toolbar of the object page within the first detail view. Clicking the Copy button takes the user to edit mode of the new item within the second detail view of the flexible column layout, also known as list-detail-detail mode.

List-detail view, with the 'Copy' button in the header toolbar of the object page

In edit mode, the form is prefilled with the data from the item selected on the previous page. The form remains in edit mode until the user clicks the Create button. If the user clicks Cancel, a data loss message appears.

List-detail-detail view in edit mode after copying

Responsiveness

The responsiveness of this page depends on the responsive behavior of the controls being used.

Copy pattern adapted to smartphone

Copy pattern adapted to tablet

Copy pattern adapted to desktop

Resources

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

Dialog (guidelines)
Flexible Column Layout (guidelines)

Implementation

Dialog (SAPUI5 samples)