Overview

The preferred method to create an entity is a modal dialog. The dialog control (sap.m.Dialog) interrupts the current app process so that the user can focus on the creation process. Dialogs can be triggered from any part of the product without switching of context.

Creating a new item

When to Use

1
do
false

Recommended

  • Use it to create or add an entity of up to 8 items and its attributes.
  • When you want the user to focus on the creation process.
  • Keep it short and focus on the most important data.
  • When possible, use prefilling of content.
  • Use form field validation to make users aware of any errors.
1
dont
false

Not Recommended

  • Avoid using dialog creation of an entity when you need more than 8 fields. Use in-place editing for the rest of the data.
  • Avoid using dialog creation of an entity when you need the page context. Use a flexible column layout instead.
  • For more complex scenarios; use wizard instead.

See also:

Wizard

In-Place Editing

Visual Design Wiki - FlexibleColumnLayout (Fiori 3)

Fiori Design Guideline - Form Field Validation

Anatomy

Image
1
14.37; 75.75
Modal Dialog
The container to hold the edited content.
2
28.34; 72.49
Form
Allows users to enter data in a structured way.
3
81.84; 73.56
Page Footer
Contains all actions.

See also:

Visual Design Wiki - Page (Fiori 3)

When setting up a dialog to create an entity, consider the following properties and their recommended values. If necessary, adjust the values to best fit your scenario.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>Width</div> <div> <p>min-width: 18rem;</p> <p>width: 40%</p> <p>max-width: 48rem;</p> </div> <div>Do not change min-width value to ensure proper size on mobile devices.</div> </div> <div> <div>Height</div> <div>height: 60%</div> <div>Depends on the content.</div> </div> <div> <div>Resizable</div> <div>false</div> <div>The dialog can be resizable only in desktop mode.</div> </div> <div> <div>ShowHeader</div> <div>true</div> <div>Determines whether the header is shown inside the dialog.</div> </div>

See also:

Visual Design Wiki - Dialog (Fiori 3)

Form

When used to create an entity, the dialog contains a form. The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.

With a form, you can easily lay out a list of properties and input fields. A form is structured into form containers, where each form container consists of form elements, and each form element consists of a label and an input field.

In SAPUI5, forms can be built using two different controls based on the design needs, namely form (sap.ui.layout.form.Form) and simple form (sap.ui.layout.form.SimpleForm).

<div> <div>Property</div> <div>Recommended Value</div> <div>Note</div> </div> <div> <div>Width</div> <div> <p>Horizontal Layout (4:7:1)</p> <p>min-width: 10rem</p> <p>max-width: 30rem</p> <p>Vertical Layout</p> <p>min-width: 14rem</p> <p>max-width: 34rem</p> </div> <div>Depending on the content, the number and type of fields can be different.</div> </div> <div> <div>Group Height</div> <div>height: 90%</div> <div>Depends on the content.</div> </div>

See also:

Fiori Design Guideline - Form

Visual Design Wiki - Form (Fiori 3)

UI5 API Reference - Form

Actions

The footer 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>Emphasized</div> <div>Required. Finalizing action to save the new item.</div> </div> <div> <div>Negative Path Action</div> <div>Transparent</div> <div>Required. Cancels the creation process and closes the dialog.</div> </div> <div> <div>Secondary Action</div> <div>Ghost</div> <div>Optional. In case a second action is needed.</div> </div>

See also:

Fiori Design Guideline - Action Placement

Fiori Design Guideline - Terminology for Common Actions