Raul Watson Jun 12, 2018 1 min read

HowTo: Magento 2 Admin Grid using Ui Components

Recently I was tasked to create an admin grid to let users manage the records of a custom entity from the backoffice.

Although I had read and heard plenty about it, I had never had the chance to build one myself, because none of the tasks I had been assigned to before required it.

In this post I am going to describe how I did it.

Define you Ui Component in the layout

xml
<?xml version="1.0"?>
<!--
/**
 * app/code/Vendor/CustomModule/view/adminhtml/your-layout-name.xml
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="page.content">
            <block class="Magento\SalesRuleStaging\Block\Adminhtml\Update\Upcoming" name="salesrule.staging.update.grid.wrapper" before="page_main_actions">
                <container name="salesrule.staging.update.grid" htmlTag="div" htmlClass="block-schedule block">
                    <block class="Magento\Staging\Block\Adminhtml\Update\Entity\Toolbar" name="staging.schedule.title" template="Magento_Staging::schedule-title.phtml">
                        <arguments>
                            <argument name="requestFieldName" xsi:type="string">id</argument>
                            <argument name="modalPath" xsi:type="string">salesrulestaging_upcoming_form.salesrulestaging_upcoming_form.salesrulestaging_update_form_modal</argument>
                            <argument name="loaderPath" xsi:type="string">salesrulestaging_upcoming_form.salesrulestaging_upcoming_form.salesrulestaging_update_form_modal.update_form_loader</argument>
                        </arguments>
                    </block>
                    <uiComponent name="salesrulestaging_upcoming_form"/>
                </container>
            </block>
        </referenceContainer>
    </body>
</page>

Create your Ui Component

xml
<!-- app/code/Vendor/CustomModule/view/adminhtml/ui_component/xxx_listing.xml -->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="context" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
        <argument name="namespace" xsi:type="string">cms_page_listing</argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="provider" xsi:type="string">cms_page_listing.cms_page_listing_data_source</item>
            </item>
            <item name="deps" xsi:type="string">cms_page_listing.cms_page_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">cms_page_columns</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 Page</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
</listing>