/   /   /  Magento 2 UI Components : New Dynamic UI TreeMassAction Technique

Note:

For more extensions and themes visit our store

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 :

  1.  
  2. <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
  3. <container name="listing_top">
  4.         <massaction name="listing_massaction">
  5.         <action name="changetobuyergroup">
  6.         <argument name="data" xsi:type="array">
  7.             <item name="config" xsi:type="array">
  8.                <item name="type" xsi:type="string">ibnab_customertobuyer</item>
  9.                 <item name="label" xsi:type="string" translate="true">change to group buyer</item>
  10.             </item>
  11.        </argument>
  12.        <argument name="actions" xsi:type="configurableObject">
  13.        <argument name="class" xsi:type="string">Ibnab\CustomerToBuyer\Ui\Component\MassAction\Group\Options</argument>
  14.           <argument name="data" xsi:type="array">
  15.              <item name="urlPath" xsi:type="string">customertobuyer/masschangetobuyer </item>
  16.              <item name="paramName" xsi:type="string">group</item>
  17.              <item name="confirm" xsi:type="array">
  18.              <item name="title" xsi:type="string" translate="true">change to group buyer</item>
  19.              <item name="message" xsi:type="string" translate="true">Are you sure to change selected  customerto buyer and to assign sto new group buyer?</item>
  20.               </item>
  21.        </argument>
  22.     </argument>
  23.    </action>
  24.   </massaction>
  25.  </container>
  26. </listing>
  27.  
  28.  

Ok this configuration Xml = add action :
  1.  
  2. <action name="changetobuyergroup">
  3.  
  4.  

to massaction ass TreeMassAction  the data of this action inside argment with name="data" the label of it is   change to group buyer :
  1.  
  2.    <item name="label" xsi:type="string" translate="true">change to group buyer</item>
  3.  
  4.  

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 :
  1.  
  2. <argument name="actions" xsi:type="array">
  3.  
  4.  

but in this example we use xsi:type="configurableObject" and inside it we use :
  1.  
  2. <argument name="class" xsi:type="string">Ibnab\CustomerToBuyer\Ui\Component\MassAction\Group\Options</argument>
  3.  
  4.  

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 :
  1.  
  2. <?php
  3. /**
  4.  * Copyright © 2015 Magento. All rights reserved.
  5.  * See COPYING.txt for license details.
  6.  */
  7. namespace Magento\Customer\Ui\Component\MassAction\Group;
  8.  
  9. use Magento\Framework\UrlInterface;
  10. use Zend\Stdlib\JsonSerializable;
  11. use Magento\Customer\Model\ResourceModel\Group\CollectionFactory;
  12.  
  13. /**
  14.  * Class Options
  15.  */
  16. class Options implements JsonSerializable
  17. {
  18.     /**
  19.      * @var array
  20.      */
  21.     protected $options;
  22.  
  23.     /**
  24.      * @var CollectionFactory
  25.      */
  26.     protected $collectionFactory;
  27.  
  28.     /**
  29.      * Additional options params
  30.      *
  31.      * @var array
  32.      */
  33.     protected $data;
  34.  
  35.     /**
  36.      * @var UrlInterface
  37.      */
  38.     protected $urlBuilder;
  39.  
  40.     /**
  41.      * Base URL for subactions
  42.      *
  43.      * @var string
  44.      */
  45.     protected $urlPath;
  46.  
  47.     /**
  48.      * Param name for subactions
  49.      *
  50.      * @var string
  51.      */
  52.     protected $paramName;
  53.  
  54.     /**
  55.      * Additional params for subactions
  56.      *
  57.      * @var array
  58.      */
  59.     protected $additionalData = [];
  60.  
  61.     /**
  62.      * Constructor
  63.      *
  64.      * @param CollectionFactory $collectionFactory
  65.      * @param UrlInterface $urlBuilder
  66.      * @param array $data
  67.      */
  68.     public function __construct(
  69.         CollectionFactory $collectionFactory,
  70.         UrlInterface $urlBuilder,
  71.         array $data = []
  72.     ) {
  73.         $this->collectionFactory = $collectionFactory;
  74.         $this->data = $data;
  75.         $this->urlBuilder = $urlBuilder;
  76.     }
  77.  
  78.     /**
  79.      * Get action options
  80.      *
  81.      * @return array
  82.      */
  83.     public function jsonSerialize()
  84.     {
  85.         if ($this->options === null) {
  86.             $options = $this->collectionFactory->create()->setRealGroupsFilter()->toOptionArray();
  87.             $this->prepareData();
  88.             foreach ($options as $optionCode) {
  89.                 $this->options[$optionCode['value']] = [
  90.                     'type' => 'customer_group_' . $optionCode['value'],
  91.                     'label' => $optionCode['label'],
  92.                 ];
  93.  
  94.                 if ($this->urlPath && $this->paramName) {
  95.                     $this->options[$optionCode['value']]['url'] = $this->urlBuilder->getUrl(
  96.                         $this->urlPath,
  97.                         [$this->paramName => $optionCode['value']]
  98.                     );
  99.                 }
  100.  
  101.                 $this->options[$optionCode['value']] = array_merge_recursive(
  102.                     $this->options[$optionCode['value']],
  103.                     $this->additionalData
  104.                 );
  105.             }
  106.  
  107.             $this->options = array_values($this->options);
  108.         }
  109.  
  110.         return $this->options;
  111.     }
  112.  
  113.     /**
  114.      * Prepare addition data for subactions
  115.      *
  116.      * @return void
  117.      */
  118.     protected function prepareData()
  119.     {
  120.         foreach ($this->data as $key => $value) {
  121.             switch ($key) {
  122.                 case 'urlPath':
  123.                     $this->urlPath = $value;
  124.                     break;
  125.                 case 'paramName':
  126.                     $this->paramName = $value;
  127.                     break;
  128.                 default:
  129.                     $this->additionalData[$key] = $value;
  130.                     break;
  131.             }
  132.         }
  133.     }
  134. }
  135.  
  136.  

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 :

  1.  
  2.      <argument name="data" xsi:type="array">
  3.          <item name="urlPath" xsi:type="string">customertobuyer/masschangetobuyer </item>
  4.          <item name="paramName" xsi:type="string">group</item>
  5.          <item name="confirm" xsi:type="array">
  6.          <item name="title" xsi:type="string" translate="true">change to group buyer</item>
  7.          <item name="message" xsi:type="string" translate="true">Are you sure to change     selected  customerto buyer and to assign sto new group buyer?</item>
  8.          </item>
  9.       </argument>
  10.  
  11.  

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 …..

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter