はじめに

この記事は Magento Advent Calendar 2018 の13日目です。

今回は、Magentoモジュールにおける管理画面のグリッドを作成する方法の一つ、UIComponentの書き方について、備忘録も兼ねて簡単に解説していこうと思います。

また私が初めてグリッドを作成した際、こちらの質問が大いに参考になりました。なので今回の記事もこれに準じていますが、コードは私が実際に書いたものを基にしているので幾分か差があります。

グリッドについて

まず始めにグリッドがどのような部品でできているのか画像で見てみましょう。

これから書くコードをコピペすれば大体こんな感じのグリッドになります。（ちなみに上部のGridというタイトル表示はControllerで変更できます。）
これらの要素をUIComponentで記述していくことになります。

定義

今回のグリッドで扱うモジュール名やデータベース名は以下のものとします。
適宜自分のものと読み替えてください。

ベンダー名: Company
モジュール名: Module
テーブル名: table
カラム１: table_id; →主キー、int型、 auto_increment
カラム２: table_name; →varchar(255)

書き方

layoutファイルでUIComponentファイルを定義します。
このファイルはapp/code/Company/Module/adminhtml/view/layout/に配置します。

app/code/Company/Module/adminhtml/view/layout/module_table_index.xml

<?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="module_table_list"/>
        </referenceContainer>
    </body>
</page>

この場合、uiComponentノードで"module_table_list"と指定されているので、UIComponentファイルの名前はmodule_table_list.xmlとなります。
UIComponentファイルはapp/code/Company/Module/adminhtml/view/ui_component/に配置します。

UIComponentファイルは一見複雑そうに見えますが、実際には下記のシンプルな構造になっています。

<listing>
- <argument>
- <dataSource>
- <container>
- <columns>

作りたいグリッドによって、これらのノードが増えたり減ったりします。特に<container>の子ノードは不要なものを省くことができます。実際にコードを書くときは量が多いのでコピペしてリプレースする方が楽でしょう。コード内で出てくるmoduleやtableといった部分は適宜自分のモジュール名やテーブル名に置き換えてください。ではノードごとにコードを分けて解説していきます。