Create with Reference

Intro

Use the create with reference pattern if you want to create a new object and reference it to an existing object.

Usage

This pattern shows the relationship between two objects only, and does not copy the content from one object to another. If you would like to copy an object and edit it, have a look at the article on copying instead.

Layout

There are several ways to trigger the create with reference function:

Clicking or tapping the transparent Create button in the toolbar (for example, above a form or table control).
Clicking or tapping the Add () icon in the master list (split-screen layout).

There are two ways to create an object with reference to support different use cases:

Using the dialog to create objects with no more than five editable fields.
Using the details page to display large amounts of data that cannot be displayed in a dialog, such as long forms.

For more information, see create page floorplan.

Behavior and Interaction

This section describes the interaction flow of the create with reference pattern.

Create with Reference via Dialog

Clicking the Create button takes the user to a dialog. This dialog opens with an unchecked checkbox and several editable fields for creating the new object, such as a line item.

If the user wants to reference another object, such as a sales order, he or she must select the checkbox and then select the Reference Type and the Reference ID. We recommend offering the value help dialog for selecting the reference ID. However, the choice of control will also depend on the type of content being referenced.

Clicking the Save button saves the entries and adds the object (line item) to the current table. If the user chooses Cancel, a data loss warning appears.

Create with Reference via Details Page

Clicking the Create button takes the user to the details page. This page contains an unchecked checkbox and a large form with editable fields for creating the new object, such as a line item.

Clicking the Save button in the footer toolbar saves the entries. The create page then switches into display mode. The Back button takes the user to the previous page. If the user chooses Cancel, a data loss warning appears.

Responsiveness

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

Create with reference pattern adapted to smartphone

Create with reference pattern adapted to tablet

Create with reference 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)
Value Help (guidelines)
Create Page (guidelines)
Master List (guidelines)

Implementation

Dialog (SAPUI5 samples)
Value Help (SAPUI5 samples)