General Patterns Object Handling (Create, Edit, Delete) Create with Reference

Updated: May 8, 2024
SAPUI5 Version 1.118

Object Handling – 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 the transparent Create button in the toolbar (for example, above a form or table control).
  • Clicking the Create ( ) icon in the toolbar of a worklist or a list report (for example, in a list-detail-detail pattern using the flexible column 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 8 editable fields.
  • Using the details page to display large amounts of data that cannot be displayed in a dialog, such as long forms.

Behavior and Interaction

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

Create with Reference Using a 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 Create 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' using a dialog
'Create with Reference' using a dialog

Create with Reference on 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 Create 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' on details page
'Create with Reference' on details page

Responsiveness

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

Create with reference pattern adapted to desktop
Create with reference pattern adapted to desktop
Create with reference pattern adapted to tablet
Create with reference pattern adapted to tablet
Create with reference pattern adapted to smartphone
Create with reference pattern adapted to smartphone

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