Magento2 エクステンションの作成その4

Rev.4を表示中。最新版はこちら。

1. 概要

ここでは、管理画面に投稿内容の一覧表示ページを作成する。「Magento2 エクステンションの作成その2」で作成した/admin/topic/posts/indexのページに一覧データを表示する。

2. テンプレートの修正

まずはlayoutファイルを修正する。「Magento2 エクステンションの作成その2」でview/adminhtml/layout/topic_posts_index.xmlを作成したが、このファイルを修正する。

view/adminhtml/layout/topic_posts_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchem
aLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            Posts
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <!-- 外部のテンプレートファイルを読み込みview/adminhtml/templates/posts.htmlを参照 -->
            <block class="Magento\Backend\Block\Template" template="BitHive_Topic::posts.phtml"/>
            <!-- -view/adminhtml/ui_component/topic_listing.xmlを参照 -->
            <uiComponent name="topic_listing"/>
        </referenceContainer>
    </body>
</page>

赤の行を追加した。

Magento2ではUI componentsという仕組みを使い、xmlでGrid(一覧表示用のテーブル)やフォームの定義を行い、それを呼び出す形でページを作成していく。追加した<uiComponent name="topic_listing"/>はview/adminhtml/ui_component/topic_listing.xmlで定義したコンポーネントを呼び出すことを意味する。

次にUI componentsのコンポーネントであるview/adminhtml/ui_component/topic_listing.xmlを作成して一覧表示用のGridを定義する。このファイルで、Gridのカラム等を定義する。

view/adminhtml/ui_component/topic_listing.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">topic_listing.topic_listing_data_source</item>
        </item>
    </argument>
    <settings>
        <spinner>spinner_columns</spinner>
        <deps>
            <dep>topic_listing.topic_listing_data_source</dep>
        </deps>
        <buttons>
            <!-- 追加ボタンを置く -->
            <button name="add">
                <url path="*/*/new"/>
                <class>primary</class>
                <label translate="true">Add New Topic</label>
            </button>
        </buttons>
    </settings>
    <dataSource name="topic_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <storageConfig>
                <param name="indexField" xsi:type="string">post_id</param>
            </storageConfig>
            <updateUrl path="mui/index/render"/>
        </settings>
        <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="topic_listing_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>post_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <listingToolbar name="listing_top">
<!--
        <bookmark name="bookmarks"/>
-->
        <columnsControls name="columns_controls"/>
        <filters name="listing_filters"/>
        <paging name="listing_paging"/>
    </listingToolbar>
    <!-- Gridに表示するカラムの定義 -->
    <columns name="spinner_columns">
        <selectionsColumn name="ids">
            <settings>
                <resizeEnabled>false</resizeEnabled>
                <resizeDefaultWidth>60</resizeDefaultWidth>
                <indexField>post_id</indexField>
            </settings>
        </selectionsColumn>
        <column name="post_id">
            <settings>
                <filter>textRange</filter>
                <sorting>asc</sorting>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="message">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Message</label>
            </settings>
        </column>
        <column name="date" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
            <settings>
<!-- timezone設定をfalseにするとUTCのまま表示される
                <timezone>false</timezone>
-->
                <filter>dateRange</filter>
                <dataType>date</dataType>
                <label translate="true">Date</label>
            </settings>
        </column>
	<column name="created" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <filter>dateRange</filter>
                <dataType>date</dataType>
                <label translate="true">Created</label>
            </settings>
        </column>
	<column name="modified" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <filter>dateRange</filter>
                <dataType>date</dataType>
                <label translate="true">Updated</label>
            </settings>
        </column>
        <!-- Actionカラムの内容はBitHive\Topic\Ui\Component\Listing\Columns\PostActionsで作成する -->
        <actionsColumn name="actions" class="BitHive\Topic\Ui\Component\Listing\Columns\PostActions" sortOrder="200">
            <settings>
                <indexField>post_id</indexField>
            </settings>
        </actionsColumn>
    </columns>
</listing>

編集中

Magento2 エクステンションの作成 その4

1. 概要

2. テンプレートの修正

Magento2 エクステンションの作成その4