Linuxなどのメモ書き

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


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

1. 概要

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

ここでは、新規登録と編集機能を実装する。

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>

 

 

編集中

 


最終更新 2018/12/10 14:34:35 - kztomita
(2018/12/10 14:24:38 作成)
添付ファイル
edit.jpg - kztomita


リンク

その他のWiki
Linuxメモ
Xnuメモ

会社
(有)ビットハイブ
受託開発やってます。

よくやる仕事

・Webシステム開発(LAMP環境)
・Linuxサーバー設定関連
サーバー移転作業代行

開発事例にデジタルカタログ/マンガビューワーを追加しました。

draggable.jsのスマホ対応版デモページを追加しました。説明はこちら

検索

Adsense
最近のコメント