Object Handling – Create with Reference

Foundations / Best Practices / Global Patterns / Object Handling / 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:

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

Behavior and Interaction

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

information

Note that, for technical reasons, an SAP Fiori message box cannot be displayed with a JavaScript UI5 implementation. Instead, only a native browser popup can be displayed.

Typically, this applies to:

  • Navigation away from a page with unsaved data with browser controls, for example, when the user clicks the browser back button to leave an object page in an application without draft handling
  • Closing a browser page or tab with unsaved data
  • Refreshing a browser page with the browser controls

However, the message box can be displayed for the following the actions, as described in the SAP Fiori guidelines:

  • Navigation between applications
  • Navigation away from pages in full or partial edit mode

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

Visual Design

  • Dialog (visual design specification)

Elements and Controls

Implementation