PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

TreeMassActions component

The TreeMassActions component is a decorator for MassActions that adds the support of nested actions.

Configuration options

Option Description Type Default
submenuTemplate Path to the .html template used to render nested actions. String ui/grid/submenu
template Path to the component’s .html template. String ui/grid/tree-massactions
actions A list of available actions. (MassActionContainer | MassAction)[] -

MassActionContainer interface

Option Description Type Required
label Action’s label displayed in the list of actions. String Required
type Action’s identifier. String Required
actions A list of child elements that may contain both MassActionContainer and MassAction instances. (MassActionContainer | MassAction)[] Required

Source files

Extends MassActions:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<listing>
    ...
    <listingToolbar>
        ...
        <massaction name="listing_massaction" component="Magento_Ui/js/grid/tree-massactions">
            <action name="action_example">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">action</item>
                        <item name="label" xsi:type="string" translate="true">Actions</item>
                    </item>
                </argument>
                <argument name="actions" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="type" xsi:type="string">sub_action1</item>
                        <item name="label" xsi:type="string" translate="true">Sub action #1</item>
                        <item name="url" xsi:type="url" path="some/path">
                            <param name="some_param">1</param>
                        </item>
                    </item>
                    <item name="1" xsi:type="array">
                        <item name="type" xsi:type="string">sub_action2</item>
                        <item name="label" xsi:type="string" translate="true">Sub action #2</item>
                        <item name="url" xsi:type="url" path="some/path">
                            <param name="some_param">2</param>
                        </item>
                    </item>
                    <item name="2" xsi:type="array">
                        <item name="type" xsi:type="string">sub_action3</item>
                        <item name="label" xsi:type="string" translate="true">Sub action #3</item>
                        <item name="url" xsi:type="url" path="some/path">
                            <param name="some_param">3</param>
                        </item>
                    </item>
                </argument>
            </action>
        </massaction>
        ...
    </listingToolbar>
    ...
</listing>

Result

TreeMassActions Component Example

© 2021 Adobe. All rights reserved.