Magento 2: Using pestle to Create Grid Listings

I just updated pestle with a new magento2:generate:ui:grid command. Magento 2.1+ only, not likely to be ported backwards to the 2.0.x branch. A longer article over on alanstorm.com is forthcoming, but here’s the quickie version.

Here’s the arguments to use to create a UI Component Listing.

$ pestle.phar magento2:generate:ui:grid
Which Module? (Pulsestorm_Gridexample)] Pulsestorm_ToDoCrud
Create a unique ID for your Listing/Grid! (pulsestorm_gridexample_log)] pulsestorm_todo_listing
What Resource Collection Model should your listing use? (MagentoCmsModelResourceModelPageCollection)] PulsestormToDoCrudModelResourceModelTodoItemCollection
What's the ID field for you model? (pulsestorm_gridexample_log_id)] pulsestorm_todocrud_todoitem_id

The above assumes you’ve create a “To Do CRUD Model” by working through the Magento2: CRUD Models for Database Access tutorial, and then created yourself an admin/backend controller endpoint.

The Which Module? argument determines the already create module where pestle will generate the ui component configuration and classes.

The Create a unique ID for your Listing/Grid! argument is a unique name for your module, which you’ll use later in the <uiComponent/> layout handle XML file tag.

The What Resource Collection Model should your listing use? is the collection class to use. Most of (all of?) Magento’s core UI components use a collection for grid listings, so we’re following that best practice in our generated code.

The What’s the ID field for you model? is the database primary key for your generated column. Future versions of the command may try to parse this from the collection model – but for a 1.0 version of the command requiring this as an argument seemed like the best course of action.

After running the above, you should be able to add a <uiComponent node to your adminhtml layout handle XML files and have a working grid.

<uiComponent name="pulsestorm_todo_listing"/> 

The default grid will have pagination, a checkbox selection column, and ID column, and an editing actions column. If you wanted to add a column for the model’s title data field (or any other data field), you’d need to manually edit the UI Listing.

#File: app/code/Pulsestorm/ToDoCrud/view/adminhtml/ui_component/pulsestorm_todo_listing.xml
<!-- ... -->
<columns>

    <!-- ... --->

    <column name="title">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Item Title</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
    </column>

    <!-- ... ---> 

</columns>
<!-- ... -->    

The command also generates a PulsestormToDoCrudUiComponentListingDataProvidersPulsestormTodoListing class and a PulsestormToDoCrudUiComponentListingColumnPulsestormtodolistingPageActions class. The Listing class is a data provider that wraps the collection model you specified above. The PageActions class generates the link for the Edit action link in the column.