Magento 2 UI Components : New Dynamic UI TreeMassAction Technique

Wooow we like inside our team Ibnab this new technique of magento2 MassAction and TreeMassAction just with few lines inside XML you have as result the massaction injected , flexible and configurable technique .
Ok how use massaction ? you can find The response inside official Magento2 doc for example this link for MassAction:
http://devdocs.magento.co m/guides/v2.0/ui-library/ui-secondary-massaction.html
And other for TreeMassAction:
http://devdocs.magento.com/guides/v2.0/ui-library/ui-secondary-treemass.html

Official documentation explain to you what is it and how use …. but for the static case =
you enter all actions with your hand … in inverse imagine you have collections of customers you want setting him to specific group , and as you know the customer group inside magento is dynamic, how you can do? This is real case in magento, go to grid of customer and click on top MassAction :

click on the select and choose Assign a Customer Group , yes you have three default group dynamically exported to this place as tree . How is this ?

1 – inside our extension we want add other massaction to costumer grid , create inside magento2 in this path mag2/app/code/Ibnab/CustomerToBuyer/view/adminhtml/ui_component/customer_listing.xml and put the content :

 
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
<container name="listing_top">
        <massaction name="listing_massaction">
        <action name="changetobuyergroup">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
               <item name="type" xsi:type="string">ibnab_customertobuyer</item>
                <item name="label" xsi:type="string" translate="true">change to group buyer</item>
            </item>
       </argument>
       <argument name="actions" xsi:type="configurableObject">
       <argument name="class" xsi:type="string">Ibnab\CustomerToBuyer\Ui\Component\MassAction\Group\Options</argument>
          <argument name="data" xsi:type="array">
             <item name="urlPath" xsi:type="string">customertobuyer/masschangetobuyer </item>
             <item name="paramName" xsi:type="string">group</item>
             <item name="confirm" xsi:type="array">
             <item name="title" xsi:type="string" translate="true">change to group buyer</item>
             <item name="message" xsi:type="string" translate="true">Are you sure to change selected  customerto buyer and to assign sto new group buyer?</item>
              </item>
       </argument>
    </argument>
   </action>
  </massaction>
 </container>
</listing>

Ok this configuration Xml = add action :

 
<action name="changetobuyergroup">

to massaction ass TreeMassAction the data of this action inside argment with name="data" the label of it is change to group buyer :

 
   <item name="label" xsi:type="string" translate="true">change to group buyer</item>

But the tree result when you click in this action , is the tag argument with name name="actions" , you can put the child items of tree manually with :

 
<argument name="actions" xsi:type="array">

but in this example we use xsi:type="configurableObject" and inside it we use :

 
<argument name="class" xsi:type="string">Ibnab\CustomerToBuyer\Ui\Component\MassAction\Group\Options</argument>

we call specific class in our extension as source of data:
example of code used in this class mag2/app/code/Ibnab/CustomerToBuyer/Ui/Component/MassAction/Group/Option.php:
I will extract fromcontent of class Options inside default Customer Magento Module inside :
mag2//vendor/magento/module-customer/Ui/Component/MassAction/Group//Option.php :

 
<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Customer\Ui\Component\MassAction\Group;
 
use Magento\Framework\UrlInterface;
use Zend\Stdlib\JsonSerializable;
use Magento\Customer\Model\ResourceModel\Group\CollectionFactory;
 
/**
 * Class Options
 */
class Options implements JsonSerializable
{
    /**
     * @var array
     */
    protected $options;
 
    /**
     * @var CollectionFactory
     */
    protected $collectionFactory;
 
    /**
     * Additional options params
     *
     * @var array
     */
    protected $data;
 
    /**
     * @var UrlInterface
     */
    protected $urlBuilder;
 
    /**
     * Base URL for subactions
     *
     * @var string
     */
    protected $urlPath;
 
    /**
     * Param name for subactions
     *
     * @var string
     */
    protected $paramName;
 
    /**
     * Additional params for subactions
     *
     * @var array
     */
    protected $additionalData = [];
 
    /**
     * Constructor
     *
     * @param CollectionFactory $collectionFactory
     * @param UrlInterface $urlBuilder
     * @param array $data
     */
    public function __construct(
        CollectionFactory $collectionFactory,
        UrlInterface $urlBuilder,
        array $data = []
    ) {
        $this->collectionFactory = $collectionFactory;
        $this->data = $data;
        $this->urlBuilder = $urlBuilder;
    }
 
    /**
     * Get action options
     *
     * @return array
     */
    public function jsonSerialize()
    {
        if ($this->options === null) {
            $options = $this->collectionFactory->create()->setRealGroupsFilter()->toOptionArray();
            $this->prepareData();
            foreach ($options as $optionCode) {
                $this->options[$optionCode['value']] = [
                    'type' => 'customer_group_' . $optionCode['value'],
                    'label' => $optionCode['label'],
                ];
 
                if ($this->urlPath && $this->paramName) {
                    $this->options[$optionCode['value']]['url'] = $this->urlBuilder->getUrl(
                        $this->urlPath,
                        [$this->paramName => $optionCode['value']]
                    );
                }
 
                $this->options[$optionCode['value']] = array_merge_recursive(
                    $this->options[$optionCode['value']],
                    $this->additionalData
                );
            }
 
            $this->options = array_values($this->options);
        }
 
        return $this->options;
    }
 
    /**
     * Prepare addition data for subactions
     *
     * @return void
     */
    protected function prepareData()
    {
        foreach ($this->data as $key => $value) {
            switch ($key) {
                case 'urlPath':
                    $this->urlPath = $value;
                    break;
                case 'paramName':
                    $this->paramName = $value;
                    break;
                default:
                    $this->additionalData[$key] = $value;
                    break;
            }
        }
    }
}

The more important notion here : you can change the collection of group customer with your collection of group buyer , and not forget to add function toOptionArray to your class collection for using here .

Ok I will return to last part of our configuration XML is :

 
     <argument name="data" xsi:type="array">
         <item name="urlPath" xsi:type="string">customertobuyer/masschangetobuyer </item>
         <item name="paramName" xsi:type="string">group</item>
         <item name="confirm" xsi:type="array">
         <item name="title" xsi:type="string" translate="true">change to group buyer</item>
         <item name="message" xsi:type="string" translate="true">Are you sure to change     selected  customerto buyer and to assign sto new group buyer?</item>
         </item>
      </argument>

is the data used by TreeMassAction result the more important items here is customertobuyer/masschangetobuyer the customertobuyer is your frontname admin url identifier of this module , and masschangetobuyer is the action normally contain the function executeInternal() .

And item name="message" for confirm with Ok before sending the request

Is simple as you see …..

Note: