Raul Watson Jun 12, 2018 1 min de lectura

Como: Admin Grid en Magento 2 usando Ui Components

Recientemente me asignaron la tarea de crear un admin grid para que los usuarios pudieran administrar los registros de una entidad personalizada desde el backoffice.

Aunque había leído y escuchado bastante sobre el tema, nunca había tenido la oportunidad de construir uno yo mismo, porque ninguna de las tareas que me habían asignado antes lo requería.

En este post voy a describir cómo lo hice.

Define tu Ui Component en el 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>

Crea tu 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>