Magento2 エクステンションの作成 その5
Rev.4を表示中。最新版はこちら。
1. 概要
ここでは、新規登録と編集機能を実装する。
2. テンプレートの作成
まず、編集ページのlayoutファイルを作成する。layoutファイルの命名規則はMagento2 エクステンションの作成 その2でも説明したが、
./view/{area}/layout/{route_id}_{controller_name}_{action_name}.xml
のようなルールになっている。編集ページのURLはtopic/posts/edit/xxxxなので、view/adminhtml/layout/topic_posts_edit.xmlというレイアウトファイルを作成する。
view/adminhtml/layout/topic_posts_edit.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">
<head>
<title>
Posts
</title>
</head>
<body>
<referenceContainer name="content">
<!-- -view/adminhtml/ui_component/topic_edit_form.xmlを参照 -->
<uiComponent name="topic_edit_form"/>
</referenceContainer>
</body>
</page>
編集ページでは入力フォームを表示するが、これもGridと同じようにUI componentsを使って表示する。上記のレイアウトファイルでは、<uiComponent name="topic_edit_form"/>として、view/adminhtml/layout/topic_posts_edit.xmlを読み込んでいる。
次にview/adminhtml/layout/topic_posts_edit.xmlを作成して、フォームの内容を定義する。
view/adminhtml/ui_component/topic_edit_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<form 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_edit_form.topic_edit_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Topic Information</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<settings>
<!-- 保存ボタン、戻るボタンの定義 -->
<buttons>
<button name="save" class="BitHive\Topic\Block\Adminhtml\Edit\SaveButton"/>
<button name="back" class="BitHive\Topic\Block\Adminhtml\Edit\BackButton"/>
</buttons>
<namespace>topic_edit_form</namespace>
<dataScope>data</dataScope>
<deps>
<dep>topic_edit_form.topic_edit_form_data_source</dep>
</deps>
</settings>
<!-- Modelにデータを読み込むためのDataProviderの定義 -->
<dataSource name="topic_edit_form_data_source" component="Magento_Ui/js/form/provider">
<settings>
<submitUrl path="topic/posts/save"/>
</settings>
<dataProvider class="BitHive\Topic\Model\DataProvider" name="topic_edit_form_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>post_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<!-- フォームに表示する要素の定義 -->
<fieldset name="post_details">
<settings>
<collapsible>false</collapsible>
<label translate="true">Post Details</label>
</settings>
<field name="message" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">posts</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
<rule name="max_text_length" xsi:type="number">255</rule>
</validation>
<dataType>text</dataType>
<dataScope>message</dataScope>
<label translate="true">Message</label>
</settings>
</field>
<field name="date" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">posts</item>
</item>
</argument>
<settings>
<dataType>datetime</dataType>
<dataScope>date</dataScope>
<label translate="true">Date</label>
</settings>
</field>
</fieldset>
</form>
編集中
