Magento – Magento 2: UI Listing Component for a CRUD Model

magento2PHPuicomponentxml

Assuming I have a custom Magento 2 CRUD/AbstractModel model setup with a

  • Model Class
  • Resource Model Class
  • Resource Model Collection Class

What is the bare minimum ui_component configuration I need to create a product grid listing?

Best Answer

I think you need the listing component with at least the basic arguments

  • js_config -> define which datasource to use
  • buttons
  • spinner (on which component)
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">form_name.data_source_name</item>
        <item name="deps" xsi:type="string">form_name.data_source_name</item>
    </item>
    <item name="spinner" xsi:type="string">columns_component_name</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add New Item</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>

The you need to define the data source in your listing and create the needed types.

<dataSource name="data_source_name">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">EntityItemGridDataProvider</argument>
        <argument name="name" xsi:type="string">data_source_name</argument>
        <argument name="primaryFieldName" xsi:type="string">id_field_of_model</argument>
        <argument name="requestFieldName" xsi:type="string">id_for_request</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

di.xml:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="data_source_name" xsi:type="string">EntityItemGridCollection</item>
        </argument>
    </arguments>
</type>
<virtualType name="EntityItemGridCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">table_name</argument>
        <argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Entity</argument>
    </arguments>
</virtualType>
<virtualType name="EntityItemGridDataProvider"
             type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Vendor\Module\Model\ResourceModel\Entity\Collection</argument>
    </arguments>
</virtualType>

And last but not least you have to define the columns.

Still I did not figure out all of it but that seems pretty minimum.

It also seems like the ui_components have already been changed again in the develop branch. First when I tried an example of the develop branch it did not work with 2.0.2. So I think - more to come

===== UPDATE =====

just learned that the DataProvider does nothing with the collection provided in the VirtualType. So you only need the VirtualType for the DataProvider if you want to change its behaviour.

Otherwise you can insert the Frameworks DataProvider directly in the ui-components datasource component and remove the virtual type:

<dataSource name="data_source_name">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
        <argument name="name" xsi:type="string">data_source_name</argument>
        <argument name="primaryFieldName" xsi:type="string">id_field_of_model</argument>
        <argument name="requestFieldName" xsi:type="string">id_for_request</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

di.xml:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="data_source_name" xsi:type="string">EntityItemGridCollection</item>
        </argument>
    </arguments>
</type>
<virtualType name="EntityItemGridCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">table_name</argument>
        <argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Entity</argument>
    </arguments>
</virtualType>
Related Topic