How to use UI export button component in Magento 2

“UI Export Button Component” is a “list / phase secondary component”. It can be used to export the grid data to a specific data format (CV, XML, etc.).

You can observe at the file:\vendor\magento\module-ui\view\base\ui_component\etc\definition.xml

<exportButton class="Magento\Ui\Component\ExportButton">

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

       <item name="config" xsi:type="array">

           <item name="component" xsi:type="string">Magento_Ui/js/grid/export</item>

           <item name="displayArea" xsi:type="string">dataGridActions</item>

           <item name="options" xsi:type="array">

               <item name="cvs" xsi:type="array">

                   <item name="value" xsi:type="string">csv</item>

                   <item name="label" xsi:type="string" translate="true">CSV</item>

                   <item name="url" xsi:type="string">mui/export/gridToCsv</item>

               </item>

               <item name="xml" xsi:type="array">

                   <item name="value" xsi:type="string">xml</item>

                   <item name="label" xsi:type="string" translate="true">Excel XML</item>

                   <item name="url" xsi:type="string">mui/export/gridToXml</item>

               </item>

           </item>

       </item>

   </argument>

</exportButton>
  • You can use the following:
<listingToolbar name="listing_top">

   ...

   <exportButton name="export_button"/>

   ...

</listingToolbar>

You also can use the ExportButton Component to add exportButton element with specified selectProvider item to listing configuration file.

<listingToolbar name="listing_top">

   ...

   <exportButton name="export_button">

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

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">{select_provider_path}</item>

           </item>

       </argument>

   </exportButton>

   ...

</listingToolbar>
  • You can observe at the file: \vendor\magento\module-sales\view\adminhtml\ui_component\sales_order_grid.xml to see it:
<container name="listing_top">

   ...

   <exportButton name="export_button">

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

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">sales_order_grid.sales_order_grid.sales_order_columns.ids</item>

           </item>

       </argument>

   </exportButton>

   ...

</container>

The following steps I mention above are the simplest process for you to UI Export Button Component in Magento 2. With this guide, you can deal with the Component in Magento 2 easily. each store has a Component in Magento 2 with multiple features.

Last Update: April 7, 2018  

March 8, 2018   591   Nandini R    Operations    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn