Overview

In-place editing is the preferred method for changing a part of an existing object into edit mode. It is a convenient and quick method for editing single values.

Page with in-place edit mode

When to Use

false

Recommended

Use to edit a small number of entities. Use 4 fields or less in a single row.
Use to edit a single section.
When context on the editing process is needed.
Use in-place editing if the entity has been created in place.

dont

false

Not Recommended

Avoid using in-place editing for complex scenarios. Use dialog editing instead.
Avoid using in-place editing when one or more values for multiple objects need to be edited. Use mass editing instead.

Anatomy

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

In-Place Editing in Page

3.37; 17.81

Group Header

Separate page in sections.

3.37; 96.44

Trigger Action

Switches the mode from display to edit.

18.71; 88.06

Read-only

Data is presented only as label-value.

53.99; 90.06

Finalizing Action

Contains positive path, such as a save button.

54.29; 96.44

Negative Path

Cancel the edited information and switch to display mode.

70.55; 72.81

Label

Every field needs a label.

70.55; 86.56

Field

Contains different type of fields

In-Place Editing in Table or List

24.29; 6.31

Column Header

Shows the label for each column.

20.21; 98.06

Table / List

Create in-place is usually done in a table or list.

41.13; 43.69

Field

Contains different type of fields.

40.62; 93.31

Finalizing Actions

Typically contains edit and delete.

40.62; 97.56

Negative Path

Typically contains close.

Actions

In-place editing on the page has two modes – display and edit. The primary button in display mode allows switching to edit mode, and the trigger action is replaced with finalizing actions.

In-place editing in table or list has two modes – display and edit. In display mode, a table row contains an action group to trigger editing related to the object being viewed. In edit mode, the actions are replaced with finalizing action and you have two possible paths – to save edited information or end the edit mode and switch back to display mode.

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. Trigger or finalizing action.</div> </div> <div> <div>Negative Path</div> <div>Transparent</div> <div>Required. Exit the edit mode.</div> </div>