TreeMassAction Component

TreeMassAction Component is extension to MassAction component that provides nested sub-menu.

The TreeMassAction JS component is used by the TwoStepMassAction component.

PHP Implementation of TreeMassAction

To enable Massaction Component for your Listing instance it should be declared as a child.

Example: <Magento_Catalog_module_dir>/view/adminhtml/ui_component/product_listing.xml

<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="selectProvider" xsi:type="string">product_listing.product_listing.product_columns.ids</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
            <item name="displayArea" xsi:type="string">bottom</item>
            <item name="indexField" xsi:type="string">entity_id</item>
        </item>
    </argument>
    <action name="delete">
        <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">Delete items</item>
                    <item name="message" xsi:type="string" translate="true">Delete selected items?</item>
                </item>
                <item name="type" xsi:type="string">delete</item>
                <item name="label" xsi:type="string" translate="true">Delete</item>
                <item name="url" xsi:type="url" path="catalog/product/massDelete"/>
            </item>
        </argument>
    </action>
    <action name="status">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="type" xsi:type="string">status</item>
                <item name="label" xsi:type="string" translate="true">Change status</item>
            </item>
        </argument>
        <argument name="actions" xsi:type="array">
            <item name="0" xsi:type="array">
                <item name="type" xsi:type="string">enable</item>
                <item name="label" xsi:type="string" translate="true">Enable</item>
                <item name="url" xsi:type="url" path="catalog/product/massStatus">
                    <param name="status">1</param>
                </item>
            </item>
            <item name="1" xsi:type="array">
                <item name="type" xsi:type="string">disable</item>
                <item name="label" xsi:type="string" translate="true">Disable</item>
                <item name="url" xsi:type="url" path="catalog/product/massStatus">
                    <param name="status">2</param>
                </item>
            </item>
        </argument>
    </action>
    <action name="attributes">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="type" xsi:type="string">attributes</item>
                <item name="label" xsi:type="string" translate="true">Update attributes</item>
                <item name="url" xsi:type="url" path="catalog/product_action_attribute/edit"/>
            </item>
        </argument>
    </action>
</massaction>

Configuration

Component can be configured in two ways:

  • Globally: using any module’s view/*/ui_component/etc/definition.xml file. All settings declared in this file are applied to all component’s instances
  • Locally: using concrete component instance configuration, such as <Magento_Catalog_module_dir>/view/adminhtml/ui_component/product_listing.xml

TreeMassAction JS Component Structure

Component Elements (classes, files, etc)

The following are the component elements:

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

Dependencies on Other Components

Dependency on the following component:

  • Collapsible: app\code\Magento\Ui\view\base\web\js\grid\massactions.js

Component Options

The following options are available:

  • noItemsMsg - message which will be shown if user tries to apply action without any selected items
  • selectProvider - option which defines the component with selections data
  • actions - array which contains initially available actions

Methods and Events

The following api methods are available:

  • getAction - returns action instance found by the provided identifier
  • applyAction - applies specified as identifier action
  • hideSubmenus - hide specified actions and nested submenu

How to Configure Already Used in Code TreeMassAction Component

app\code\Magento\Catalog\view\adminhtml\ui_component\product_listing.xml

Example of configuration modifications:

  • Redefining the link to the template
<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="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Products/js/grid/tree-massactions</item>
        </item>
    </argument>
</massaction>