listing.xml Grundgerüst: DataSource, Columns, Toolbar
listing.xml Grundgerüst: DataSource, Columns, Toolbar
~8 Min. Lesezeit Zuletzt aktualisiert am 9. August 2026
Der Grid selbst wird in einer XML-Datei unter view/adminhtml/ui_component/ deklariert, benannt nach dem Namen, den die Layout-XML später referenziert - hier mironsoft_announcement_listing.xml. Dieses Kapitel baut das Grundgerüst: eine leere, aber funktionierende Tabelle mit einer einzigen Spalte.
Controller und Layout-XML
Zuerst braucht es einen Index-Controller, der die entsprechende Layout-Handle aufruft:
<?php
declare(strict_types=1);
namespace Mironsoft\Announcement\Controller\Adminhtml\Announcement;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\Page;
use Magento\Framework\View\Result\PageFactory;
/**
* Renders the announcement grid page.
*/
class Index extends Action
{
public const ADMIN_RESOURCE = 'Mironsoft_Announcement::announcement';
/**
* @param Context $context Backend action context.
* @param PageFactory $resultPageFactory Factory for the page result.
*/
public function __construct(
Context $context,
private readonly PageFactory $resultPageFactory,
) {
parent::__construct($context);
}
/**
* Builds the grid page result.
*
* @return Page
*/
public function execute(): Page
{
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('Mironsoft_Announcement::announcement');
$resultPage->getConfig()->getTitle()->prepend('Announcements');
return $resultPage;
}
}<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="mironsoft_announcement_listing"/>
</referenceContainer>
</body>
</page>Der Layout-Dateiname folgt dem Schema {frontname}_{controllerOrdner}_{action} in Kleinschreibung, das <uiComponent name="..."/>-Element referenziert exakt den Dateinamen (ohne Endung) der Listing-XML.
Das listing.xml-Skelett
Eine minimale, aber vollständige Listing-Deklaration besteht aus vier Teilen: der argumente-Konfiguration (Namensraum, Buttons), der dataSource (Verweis auf den DataProvider, Kapitel 5), der columns-Sektion und optional listingToolbar für Suche, Filter, Massenaktionen und Export-Button.
<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_components.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">mironsoft_announcement_listing.mironsoft_announcement_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">announcement_columns</item>
<item name="deps" xsi:type="string">mironsoft_announcement_listing.mironsoft_announcement_listing_data_source</item>
</argument>
<dataSource name="mironsoft_announcement_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Mironsoft\Announcement\Ui\DataProvider\Listing\AnnouncementDataProvider</argument>
<argument name="name" xsi:type="string">mironsoft_announcement_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">announcement_id</argument>
<argument name="requestFieldName" xsi:type="string">id</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>
<columns name="announcement_columns">
<column name="announcement_id">
<settings>
<filter>text</filter>
<label translate="true">ID</label>
<sorting>desc</sorting>
</settings>
</column>
</columns>
</listing>Die provider-Kette ({listing_name}.{listing_name}_data_source) ist die häufigste Fehlerquelle bei einer leeren Seite: Name, dataSource-Name und die provider-Angabe im js_config müssen exakt übereinstimmen, sonst findet das JavaScript keine Daten (Kapitel 26 behandelt genau dieses Symptom).
Sichtbar machen
bin/magento setup:upgrade
bin/cache-cleanTipp: In der lokalen Entwicklung reicht in der Regel bin/cache-clean, um Änderungen an listing.xml/form.xml sichtbar zu machen - diese Dateien landen im UI-Component- und Layout-Cache, nicht in pub/static, daher ist hier kein Static-Content-Deploy nötig.
Aufgerufen wird der Grid jetzt schon unter mironsoft_announcement/announcement/index - allerdings noch ohne echte Daten, weil die referenzierte DataProvider-Klasse noch fehlt. Genau die baut Kapitel 5.