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:

  1. The object to be copied is part of the current table.
  2. The object to be copied is not part of the current table (for example, because it has been approved).
  3. The object to be copied is a template.
  4. The whole object is to be copied, for example, from the details view in a master-detail app (split-screen 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 footer toolbar below the details of the object. For more information about the interaction, read about the master list or check out the Manage Products reference app.

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

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 or taps the Save button. If the user selects Cancel, a data loss message appears.

Details page after copying

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 or taps 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

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 or taps the Save button, the details page appears.

Dialog appears after the user chooses a copy action

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 or taps the Save button. If the user clicks Cancel, a data loss message appears.

Details page after copying

Details page after copying

4) The copied object is located in the details view in a master detail app (split-screen layout)

The user selects the item to be copied from the master list. The Copy button appears in the footer toolbar of the master-detail interface. Clicking on the Copy button takes the user to edit mode of the new item.

Master-detail interface, with the Copy button in the footer toolbar

Master-detail interface, with the Copy button in the footer toolbar

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 or tap the Save button. If the user clicks Cancel, a data loss message appears.

Master-detail interface in edit mode after copying

Master-detail interface 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 smartphone

Copy pattern adapted to tablet

Copy pattern adapted to tablet

Copy pattern adapted to desktop

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

Implementation

Visual Design

  • Dialog (visual design specification)