Advanced selection

Allows users to make an informed selection of items with an editable restitution of data.

Overview

There are 2 types of selection patterns at Mirakl. Either the selection is simple with one parameter, in which case we use a Select picker and a dropdown menu. But in other cases, users need more time or information to make a clear choice. That's when the advanced selection pattern comes in handy.

When to use

• When the list of selectable items is long

• When the user needs more context to make an informed decision

• When a visual restitution of the selection is needed, and when that restitution must be actionable and editable

When to not use

• When the list of selectable items is less than 10 options

Guidelines

Several components can trigger an advanced picker modal:

Inline advanced picker

Button (In a toolbar, in a form...)

Link button with counter

Yes per [item]

Advanced picker modal

1. Header: always a sorted column by default

2. Toolbar: 3 filters maximum, search bar for filtering data, density management

3. Bulk: only used to mass select items, no action is triggered by bulk selection

4. Pagination: load more only

Data restitution

The component you'll use to trigger the advanced picker modal will depend on the data restitution you want on your page.

Trigger	Data restitution
Inline advanced picker	Inline advanced picker with item list
Button	Datalist, Datatable
Link Button	Datalist, Datatable