UIコンポーネントは、Magento 2ソフトウェアのために設計されたもので、シンプルかつ柔軟な方法でユーザーインターフェース（UI）をレンダリングします。この記事では、Magento 2でUIコンポーネントを使ってUIフォームを作成する方法を説明します。管理画面のUIフォームとして、従業員名、従業員ID、従業員給与、従業員住所の各フィールドを持つ従業員フォームを作成したいとします。テーブル名は employee_details を想定しています。まず、このemployee_detailsテーブルのモデルとリソースモデルを作成する必要があります。ここでは、すでにテーブルのモデルとリソースモデルを作成できているものとします。
目次
ステップ1：コントローラ用ルータの作成
最初のステップでは、Webkul/UiForm/view/adminhtml/layoutフォルダにroutes.xmlファイルを作成する必要があります。
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="uiform" frontName="uiform">
<module name="Webkul_UiForm"/>
</route>
</router>
</config>ステップ2：コントローラーの作成
では、Webkul/UiForm/Controller/Adminhtml/EmployeefolderフォルダにEdit.phpファイルを作成してください。
<?php
namespace Webkul\UiForm\Controller\Adminhtml\Employee;
use Magento\Framework\Controller\ResultFactory;
class Edit extends \Magento\Backend\App\Action
{
/**
* @return \Magento\Backend\Model\View\Result\Page
*/
public function execute()
{
$resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
return $resultPage;
}
}ステップ3：レイアウトファイルの作成
このステップでは、uiform_employee_edit.xmlレイアウトファイルをWebkul/UiForm/view/adminhtml/layoutフォルダに作成する必要があります。
<?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">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="employee_form"/>
</referenceContainer>
</body>
</page>ステップ4: Webkul/UiForm/view/adminhtml/ui_componentにemployee_form.xmlファイルを作成する
ここで、Webkul/UiForm/view/adminhtml/ui_componentにemployee_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">employee_form.employee_form_data_source</item>
<item name="deps" xsi:type="string">employee_form.employee_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Employee Information</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">employee_form</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="employee_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Webkul\UiForm\Model\DataProvider</argument>
<argument name="name" xsi:type="string">employee_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">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/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="employee_details">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Employee Details</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
<field name="employee_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Id</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_id</item>
</item>
</argument>
</field>
<field name="employee_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Name</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_name</item>
</item>
</argument>
</field>
<field name="employee_salary">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Salary</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_salary</item>
</item>
</argument>
</field>
<field name="employee_address">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Address</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_address</item>
</item>
</argument>
</field>
</fieldset>
</form>ステップ 5: Webkul/UiForm/ModelフォルダにDataProvider.phpファイルを作成する
最後に、Webkul/UiForm/ModelフォルダにDataProvider.phpファイルを作成する必要があります。
<?php
namespace Webkul\UiForm\Model;
use Webkul\UiForm\Model\ResourceModel\Employee\CollectionFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param CollectionFactory $employeeCollectionFactory
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $employeeCollectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $employeeCollectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* Get data
*
* @return array
*/
public function getData()
{
return [];
}
}以上の5つのステップを経て、UIフォームが完成しました。
UIコンポーネントの一覧
ここでは、Formコンポーネントの範囲内で使用できるコンポーネントを紹介します。
- ActionDelete
- チェックボックス
- チェックボックスセット
- データソース
- フィールドセット
- ファイルアップローダ
- 非表示
- 入力
- マルチライン
- マルチセレクト
- ラジオセット
- セレクト
- テキスト
- テキストエリア
- Wysiwyg
まとめ
以上、Magento 2 で UI フォームを作成するための詳細な手順を説明しました。 この記事があなたのオンラインビジネスを効率的に管理し、成長させるのに役立つことを願っています。ご質問やご相談がありましたら、お気軽にコメントをお寄せください。
