MassActions component

Overview

The MassActions component allows performing actions with multiple selected items. Must be a child of the Listing component.

See the Admin Design Pattern Library (MassActions) topic for information about the UI design patterns that can be implemented using the MassActions component.

Component Elements (classes, files)

The following are the component elements:

  • Constructor app\code\Magento\Ui\view\base\web\js\grid\massactions.js
  • Template: app\code\Magento\Ui\view\base\web\templates\grid\actions.html

Dependencies on Other Components

Dependency on the following components:

  • Collapsible: app\code\Magento\Ui\view\base\web\js\lib\collapsible.js
  • Modal window with confirmation: app\code\Magento\Ui\view\base\web\js\modal\confirm.js
  • Modal window with alert: app\code\Magento\Ui\view\base\web\js\modal\alert.js

MassActions configuration

Extends Collapsible configuration with the following options:

Option Description Type Default Value
actions A list of available actions. MassAction[] -
noItemsMsg Message displayed when a user attempts to perform an action without any selected items. String 'You haven't selected any items!'
stickyTmpl Additional component's template that is used when its parent [Toolbar](/guides/v2.1/) component receives a fixed position. String ui/grid/sticky/actions
template Path to the component’s .html template. String ui/grid/paging/sizes
MassAction interface
Option Description Type Required
callback ColumnAction Optional
confirm Confirmation message displayed before applying the action. {
title: string;
message: string;
}
Optional
label Action's label displayed in the list of actions. String Required
type Action's identifier. String Required
url Path to the controller responsible for action handling. String Optional
Methods and Events

The following API methods are available:

  • getAction - returns the action instance found by the provided identifier
  • addAction - adds a new action to the actions
  • applyAction - applies the specified action as identifier action
  • getSelections - returns the object with current selections

Example configuration modifications:

<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        ...
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">product/grid/columns/massactions</item>
        </item>
    </argument>
</massaction>
Specifying action with confirmation
<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <action name="edit">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="confirm" xsi:type="array">
                    <item name="title" xsi:type="string" translate="true">Edit items</item>
                    <item name="message" xsi:type="string" translate="true">Are you sure you wan't to edit selected items?</item>
                </item>
                <item name="type" xsi:type="string">edit</item>
                <item name="label" xsi:type="string" translate="true">Edit</item>
            </item>
        </argument>
    </action>
</massaction>
Action with a custom callback

Callback is provided by another component.

<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <action name="edit">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="type" xsi:type="string">edit</item>
                <item name="label" xsi:type="string" translate="true">Edit</item>
                <item name="callback" xsi:type="array">
                    <item name="provider" xsi:type="string">product_listing.inline_editing</item>
                    <item name="target" xsi:type="string">startEdit</item>
                </item>
            </item>
        </argument>
    </action>
</massaction>
Instance replacement: one instance of a component

Redefine link to constructor.

<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Products/js/grid/massactions</item>
        </item>
    </argument>
</massaction>