Updated: December 19, 2016

Create Page Floorplan

Intro

The create page floorplan is used when a new object needs to be created in a full screen or split-screen layout.

Creating an object is a special case for the edit pattern. For details not covered in this article, please refer to the manage simple objects article.

Furthermore, this floorplan does not cover the creation of another line item within a screen, so for more information about line item creation, see the local flow with reference items article.

 

The create page floorplan is used when a new object needs to be created. Creating an object is a special case for the edit pattern; for details not covered in this article, refer to the simple objects article. Furthermore, the floorplan does not cover the creation of another line item within a screen, so for more information about line item creation, see the manage complex object article.
Simple edit (compact mode) on split screen
Simple edit (compact mode) on split screen

There are several ways in which the user can trigger create mode:

  1. Enter the app, and the default screen is a “create object” page (such as a new leave request).
  2. Click or tap the Create button (the plus icon ( )) in the master list footer or in the details area footer.
  3. Add a new line item by clicking the + icon at the top of a table control. For more information about this functionality, see the manage complex objects article.

Which variant you should choose depends on the use case.

There are also several ways of creating an object to support different use cases (more details about this are provided later):

  • Create the object via a dialog.
  • Create the object via the details screen.
  • Create the object using subpages (for more information, see manage complex objects).

Note the following:

Usage

  • Use create via dialog if there is only one object with a small number of fields that the user can edit (maximum of 7 editable fields).
  • The Create button (or “ “) is the preferred way to trigger the creation of a new object. We do not recommend hiding editable information from the user in tabs.
  • Use the create flow with subpages if there are multiple child pages included in the object. For more information about how creation with child pages works, see the manage complex objects article.

Structure

The create page floorplan is flexible and can be embedded in the full screen layout or split-screen layout. The title (app header) shows New and the current <Item Type>, such as New Product. The main pattern of the create page is the form. The footer toolbar is located at the bottom.

Create page layout
Create page layout

Responsiveness

The responsiveness of the create page control follows the responsive behavior of the forms and controls being used.

Create page floorplan on a smartphone
Create page floorplan on a smartphone
Create page floorplan on a tablet
Create page floorplan on a tablet
Create page floorplan on a desktop
Create page floorplan on a desktop

Flows and Variants

Create via Dialog

The create via dialog flow describes how a user can create an object, for example, in the split-screen layout. The user must first click or tap the plus ( ) button. The data can now be changed in edit mode. Once the user has completed the entries, he or she clicks the Save button. The updated object is now included in the master list, and object details are shown in the split screen.

Show a data loss message whenever the user tries to navigate away from the page or clicks the Cancel button while in edit mode. However, if the user has not changed anything, a data loss message is not necessary.

Create via dialog – Mobile flow
Create via dialog – Mobile flow

Create via Details Screen

Use the flat object view in the details area of the screen if:

  • You need to create elements in multiple categories (for example, general information and details).
  • You need to add a large amount of data that cannot be displayed in a dialog without scrolling or using tabs.

For more information about the flat object view, see flat object view floorplan.

The details screen with the long form is visible only on mobile devices. If there is a large amount of data, split the long form into sections (or categories) that are displayed as separate tabs after the item has been saved.

Whenever the user clicks or taps Cancel, or tries to navigate away from the current page, show a data loss message.

Create via details screen – Mobile flow
Create via details screen – Mobile flow

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