Updated: September 25, 2017

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 in full screen and split-screen layout. 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 layout
Simple edit (compact mode) on split-screen layout

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).
  • Create the object using the wizard in case of a long form, where the user needs more guidance.

Note the following:

The flow of the form should follow the logic of creation. Use in-place messages on the fields for validation.

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 floorplan 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
Create page floorplan on a desktop in full screen
Create page floorplan on a desktop in full screen

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 Create ( ) 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.

Clicking the Cancel button closes the dialog. A data loss message or quick confirmation popover is not necessary.

Create via Details Screen

Use the whole screen for displaying the form 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.

Show a data loss message whenever the user tries to navigate away from the page. The only exception is by using the draft handling. Clicking the Cancel button while in edit mode opens a quick confirmation popover. However, if the user has not changed anything, a data loss message is not necessary.

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