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:

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

For more information, see create page floorplan.

Behavior and Interaction

This section describes the interaction flow of the c reate 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.

Dialog with unchecked checkbox

Dialog with unchecked checkbox

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.

Dialog with checked checkbox

Dialog with checked checkbox

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.

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 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.

Create with Reference via details page

Create with Reference via details page

Details page with checked checkbox

Details page with checked checkbox

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 smartphone

Create with reference pattern adapted to tablet

Create with reference pattern adapted to tablet

Create with reference pattern adapted to desktop

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

Implementation

Visual Design