Overview

In-place creation is a convenient and quick method for creating or adding single values.

Creating a new item in table

When to Use

1
do
false

Recommended

  • Use to create or add an entity on a page or in a table, or a list.
  • When the page context on the creation process is needed.
  • Use for a small amount of data.
  • When possible, use prefilling of content.
  • Use form field validation to make users aware of any errors.
  • Create a new item at the top row of the table.
1
dont
false

Not Recommended

  • Avoid using in-place creation for complex scenarios with lots of data and related objects. Use dialog creation instead.
  • Avoid using in-place creation of an entity when more than 4 fields per row are needed. Use dialog creation instead.

See also

Dialog Creation

Pre-Filling Content

Fiori Design Guideline - Form Field Validation

Anatomy

There are two scenarios for in-place creation – in a page and inside tables or lists.

In-Place Creation in Page

Image
1
10.63; 2.69
Flexible Column Layout
The container to hold the in-place creation
2
10.63; 34.81
Trigger Action
Triggers in-place creation.
3
10.63; 96.81
Finalizing Action
Contains save and negative path buttons.
4
32.71; 42.94
Group Header
Helps to separate and group the page.
5
46.04; 43.06
Form
The data is presented as label-input field pairs.

See also

Fiori Design Guideline - Flexible Column Layout

Fiori Design Guideline - Form / Simple Form

In-Place Creation in Table

Image
1
7.14; 97.25
Trigger Action
Action to create item in place.
2
24.49; 97.44
Table / List
In-place creation is usually done in a table or list.
3
40.82; 45.31
Field
Contains different type of fields.
4
40.31; 93.19
Finalizing Action
Contains positive path, such as a save button.
5
40.31; 97.38
Negative Path
Cancels the creation of item.

See also:

Fiori Design Guideline - Table

Fiori Design Guideline - List

Content

In-place creation can contain UI5 elements such as combo box (sap.m.Combobox) or input field (sap.m.Input) to add the needed data. It's good to have less than 4 input fields per row. The combo box allows users to select an item from a predefined list.

See also:

Fiori Design Guideline - Combo Box

UI5 DemoKit Sample - Combo Box

Fiori Design Guideline - Input Field

Actions

The list item or table row contains actions that allow users to save the created item or to interrupt the process. SAP has defined naming conventions for the most common core actions that are used across all applications and lines of business. See the table below.

<div> <div>Button</div> <div>Type</div> <div>Description</div> </div> <div> <div>Primary Action</div> <div>Transparent</div> <div>Required. Create or save the content.</div> </div> <div> <div>Negative Path</div> <div>Transparent</div> <div>Required. Interrupt creation process.</div> </div>

See also:

Action Text

Fiori Design Guideline - Action Placement

Fiori Design Guideline - Terminology for Common Actions