Таблица в панели: компоненты интерфейса

Таблицы и формы в панели управления Magento строят не шаблонами, а компонентами интерфейса (UI components). Таблицу описывают в файле XML, а сортировку, фильтры, постраничный вывод и выбор столбцов Magento добавляет сам. Это одна из самых громоздких частей платформы: XML получается длинным, и опечатка в имени даёт пустую страницу без объяснений. Поэтому здесь показан только минимальный рабочий вариант.

Из чего состоит таблица

Часть	Где находится
Описание таблицы	`view/adminhtml/ui_component/hello_review_listing.xml`
Источник данных	Запись в `etc/di.xml`
Подключение к странице	Макет `view/adminhtml/layout/hello_review_index.xml`

app/code/Acme/Hello/
├── etc/
│   └── di.xml                                  изменён
└── view/
    └── adminhtml/
        ├── layout/
        │   └── hello_review_index.xml          изменён
        └── ui_component/
            └── hello_review_listing.xml        новый файл

Источник данных

Таблице нужна коллекция. Отдельный класс писать не обязательно — достаточно виртуального типа в etc/di.xml:

<!-- app/code/Acme/Hello/etc/di.xml -->
<virtualType name="Acme\Hello\Model\ResourceModel\Review\Grid\Collection"
             type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">acme_hello_review</argument>
        <argument name="resourceModel" xsi:type="string">Acme\Hello\Model\ResourceModel\Review</argument>
    </arguments>
</virtualType>
 
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="hello_review_listing_data_source" xsi:type="string">Acme\Hello\Model\ResourceModel\Review\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Первая запись создаёт коллекцию для таблицы acme_hello_review, вторая регистрирует её под именем hello_review_listing_data_source. Это имя ещё трижды встретится в следующем файле и должно совпадать везде.

Описание таблицы

<?xml version="1.0"?>
<!-- app/code/Acme/Hello/view/adminhtml/ui_component/hello_review_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="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">hello_review_listing.hello_review_listing_data_source</item>
        </item>
    </argument>
    <settings>
        <spinner>hello_review_columns</spinner>
        <deps>
            <dep>hello_review_listing.hello_review_listing_data_source</dep>
        </deps>
    </settings>
 
    <dataSource name="hello_review_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <storageConfig>
                <param name="indexField" xsi:type="string">review_id</param>
            </storageConfig>
            <updateUrl path="mui/index/render"/>
        </settings>
        <aclResource>Acme_Hello::reviews</aclResource>
        <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider"
                      name="hello_review_listing_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>review_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
 
    <listingToolbar name="listing_top">
        <columnsControls name="columns_controls"/>
        <filters name="listing_filters"/>
        <paging name="listing_paging"/>
    </listingToolbar>
 
    <columns name="hello_review_columns">
        <column name="review_id" sortOrder="10">
            <settings>
                <filter>textRange</filter>
                <label translate="true">ID</label>
                <sorting>desc</sorting>
            </settings>
        </column>
        <column name="author" sortOrder="20">
            <settings>
                <filter>text</filter>
                <label translate="true">Author</label>
            </settings>
        </column>
        <column name="rating" sortOrder="30">
            <settings>
                <filter>textRange</filter>
                <label translate="true">Rating</label>
            </settings>
        </column>
    </columns>
</listing>

Раздел	За что отвечает
`dataSource`	Откуда брать строки и какое право для этого нужно
`listingToolbar`	Панель над таблицей: фильтры, страницы, выбор столбцов
`columns`	Столбцы; имя столбца совпадает с именем поля таблицы

Подключение к странице

В макете страницы из прошлого урока замените блок с шаблоном на компонент:

<!-- app/code/Acme/Hello/view/adminhtml/layout/hello_review_index.xml -->
<referenceContainer name="content">
    <uiComponent name="hello_review_listing"/>
</referenceContainer>

Имя компонента — имя файла без расширения. Выполните bin/magento cache:clean и откройте «Каталог → Отзывы Hello»: появится таблица с отзывами из заплатки, с сортировкой по щелчку на заголовке, фильтрами и переключением страниц.

Что нужно для формы

Форма редактирования строится так же, но частей больше:

файл view/adminhtml/ui_component/hello_review_form.xml с полями;
собственный класс источника данных, наследник Magento\Ui\DataProvider\AbstractDataProvider, который отдаёт форме значения записи;
действия Edit, Save и Delete в Controller/Adminhtml/Review;
столбец с действиями в таблице, ведущий на форму.

Писать всё это с нуля тяжело. Обычный приём — взять за образец небольшой модуль ядра, например блоки CMS в vendor/magento/module-cms, скопировать его файлы и заменить имена.

Частая ошибка

Имена не совпали: файл назван hello_review_listing.xml, а в provider, deps или di.xml стоит hello_reviews_listing_data_source. Страница открывается, но вместо таблицы бесконечно крутится индикатор загрузки. Проверьте все места, где встречается имя источника данных, и загляните в консоль браузера и в var/log/system.log.

Спасибо, что читаете!