I upgraded from 2.0 to 2.1 recently and I had to refactor my custom UI component grid to get it working properly.

However, I didn't keep track how what I've done so I can't answer my own question.

I noticed that quite some changes had been done to the grid UI component thus I would like to know what are those changes ?


No more visible block class tab. But you still able to use Tab. Instead you define buttons in there. I don't know exactly why core team remove tab. All class render field of form now define in ui form. Some new change in core framework such as HydratorPool for get set data in form UI. Some new interfaces like DataPersistor, StoreSolver

Changes in UI Grid and Form
Ability to manager Buttons Action in top of Grid
Drag and Drop grid Columns built-in
Sticky Toolbar

Form UI:
Data bind via Knockout Javascript. Alot of js files. Form now Inline build by knockout template engine




vendor/magento/module-ui/view/base/web/js/form/components/insert.js For insert link component

Data source define for ui-form

<dataSource name="product_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider</argument>
        <argument name="name" xsi:type="string">product_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>

Some new type fieldset such as multiline dynamicRows you can see more in module-ui/etc/ui_components.xsd
Each field now can define jsComponent

<field name="position">
    <argument name="data" xsi:type="array">
         <item name="config" xsi:type="array">
             <item name="dataType" xsi:type="string">text</item>
                 <item name="formElement" xsi:type="string">input</item>
                     <item name="dataScope" xsi:type="string">position</item>
                     <item name="component" xsi:type="string">Magento_Catalog/js/form/element/input</item>
                     <item name="prefixName" xsi:type="string">option.order</item>
                     <item name="prefixElementName" xsi:type="string">option_</item>
                     <item name="visible" xsi:type="boolean">false</item>
                     <item name="additionalClasses" xsi:type="array">
                     <item name="_hidden" xsi:type="boolean">true</item>

One of a lot JsComponent in 2.1


One Benifit of all these to reduce task for server side

| improve this answer | |
  • I'm not asking for general Magento 2.0 vs Magento 2.1 changes, I'm asking for the changes related to the UI grid component. – Raphael at Digital Pianism Jul 13 '16 at 10:43
  • Will update later when i can access to computer – mrtuvn Jul 13 '16 at 10:49
  • @Raphael I already have updated my answer! – mrtuvn Jul 14 '16 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.