Mass Edit

Intro

Mass editing allows users to simultaneously change multiple objects that share the same editable properties.

Usage

Use mass editing if:

Do not use mass editing if:

Components

Mass editing is done in a dialog containing combo boxes and select controls.

The select control restricts the user to a predefined set of values. Additionally, the combo box allows the user to enter a custom value.

Behavior and Interaction

Users will typically select multiple objects from a list or table and press the Edit button. This triggers a modal view dialog containing a select control or combo box for each visible column in the table.

All the existing values are listed alphabetically in the dropdown menu without duplicates. Selecting a value or entering a new one overwrites all the existing values.

In the example below, the user’s task is to make everyone’s salary the same.

The preselected option in the select control or combo field depends on the existing values in the table column:

If it’s technically possible, the option < Clear Values > is available in the dropdown list to remove all the values in a column.

If a dialog can be used to enter a new value, the option < Use Value Help > or < Use Select Dialog > will be displayed in the dropdown list.

We are currently working on a detailed end-to-end flow for mass editing, which will include message handling for any items that can’t be processed. The guidelines will be updated in due course.

Guidelines

The examples below illustrate how to “translate” controls into their mass editing equivalent.

Checkbox

Checkboxes

Checkboxes

Checkboxes – Editing

Checkboxes – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

All checked: Yes

All unchecked: No

Composite Fields

Composite fields

Composite fields

Composite fields – Editing

Composite fields – Editing

Control

Combo box/Select (depending on use case)

Preset Entries

See respective control in the list above.

Date Picker

Date picker

Date picker

Date picker – Editing (1)

Date picker – Editing (1)

Date picker – Editing (2)

Date picker – Editing (2)

Control

  1. A) Select (if users are only allowed to pick a date from a predefined list)
    List all allowed dates beneath the standard actions.
  2. B) Combo box (if users are allowed to pick any date)
    Right above the list of dates from the object, offer another selection
    < Select New Date >.
  3. Dialog with calendar control inside
    Selecting a date and clicking OK closes the dialog and populates the combo box with that date.

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Input (any characters allowed)

Input (all characters)

Input (all characters)

Input (all characters) – Editing

Input (all characters) – Editing

Control

Combo box

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Input (restricted to specific characters, such as numbers)

Input (restricted characters)

Input (restricted characters)

Input (restricted characters) – Editing

Input (restricted characters) – Editing

Control

Combo box

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

In this case, use a combo box even though only certain characters are allowed. This is necessary to make the topmost entries < Keep Existing Values > and < Leave Blank > work and allow the user to select them via text input.

Be sure to validate the entry when the field loses focus or the user presses the ENTER key.

Input (with value help or select dialog)

Input (value help)

Input (value help)

Input (value help) – Editing

Input (value help) – Editing

Control

Combo box (Add < Use Value Help > or < Use Select Dialog > entry to trigger the respective dialog.)

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Input (multi input)

Input (multi input)

Input (multi input) – Editing

Input (multi input) – Editing

Radio Buttons

Radio buttons

Radio buttons

Radio buttons – Editing

Radio buttons – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Rating Indicator

Rating indicator

Rating indicator

Rating indicator – Editing

Rating indicator – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Segmented Button

Segmented buttons

Segmented buttons

Segmented buttons – Editing

Segmented buttons – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

Slider

Slider

Slider

Slider – Editing

Slider – Editing

Control

Combo box / Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

Sliders potentially offer hundreds of values. These should not all be represented in the dropdown. Use a combo box and try to offer some appropriate presets as shown above and allow the user to enter other values (the user’s input needs to be validated).
If your slider only has up to 10 steps, you can also use a select control and offer all possible values in the dropdown.

Switch

Switch

Switch

Switch – Editing

Switch – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

If you use the semantic switch, make sure you provide suitably worded options for mass editing, like On/Off or Yes/No.

Toggle Buttons

Toggle buttons

Toggle buttons

Toggle buttons – Editing

Toggle buttons – Editing

Control

Select

Preset Entries

Mixed choices: < Keep Values >

Identical choices: Use this choice as preset.

No values: < Leave Blank >

Currently, mass editing is not supported for time selection, since the respective control has not yet been adapted.

General Guidelines

Special Characters (“<” and “>”)

Always use the entries < Keep Values > and < Leave Blank > as described in this guideline: They must start with “<” followed by a blank space, and end with a blank space followed by “>”.

These two characters have been chosen because they are not usually used in text form in objects.

In the unlikely event that these characters are already used by a customer, replace them with another set of unlikely special characters that are not used by this customer. However, you must still ensure that < Keep Values > and < Leave Blank > stay at the top as the first two entries.

Elements and Controls

Implementation

Visual Design

  • No links