Ui Component được thiết kế để kết xuất một số thành phần giao diện người dùng đơn giản và phức tạp. Trong bài viết này tôi sẽ hướng dẫn các bạn tạo form admin đơn giản trong Magento 2 sử dụng Ui Component.
Để tiết kiệm thời gian tôi sẽ không tạo lại module và model…mà tôi sử dụng module của các bài trước. Nếu bạn nào chưa có module có thể tham khảo bài này:
- Tạo module trong Magento 2
- Tạo Model, Resource Model, Collection trong Magento 2
Trong bài viết này tôi sử dụng bảng helloworld_post với các cột: post_id, name, status, content, created_at được tạo trong bài Tạo bảng với db_schema.xml trong Magento 2
Contents
Bước 1: Tạo Controller
ViMagento/HelloWorld/Controller/Adminhtml/Post/AddNew.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?php
namespace ViMagentoHelloWorldControllerAdminhtmlPost;
use MagentoFrameworkControllerResultFactory;
use MagentoBackendAppAction;
/**
* Class AddNew
* @package ViMagentoHelloWorldControllerAdminhtmlPost
*/
class AddNew extends Action
{
public function execute()
{
$resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
$resultPage->getConfig()->getTitle()->prepend(__(‘Add New Post’));
return $resultPage;
}
}
|
Bước 2: Tạo Layout file
Bạn tạo file: ViMagento/HelloWorld/view/adminhtml/layout/helloworld_post_addnew.xml
|
1
2
3
4
5
6
7
8
9
10
11
|
<?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>HelloWorld</title>
</head>
<body>
<referenceContainer name=“content”>
<uiComponent name=“helloworld_post_form” />
</referenceContainer>
</body>
</page>
|
Trong đó component name chính là tên file ui component sẽ được tạo ở bước sau:
Bước 3: Tạo Ui Component Form
ViMagento/HelloWorld/view/adminhtml/ui_component/helloworld_post_form.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<?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”>helloworld_post_form.helloworld_post_form_data_source</item>
</item>
<item name=“label” xsi:type=“string” translate=“true”>Post Information</item>
<item name=“reverseMetadataMerge” xsi:type=“boolean”>true</item>
</argument>
<settings>
<buttons>
<button name=“back”>
<url path=“helloworld/post/index”/>
<class>back</class>
<label translate=“true”>Back</label>
</button>
<button name=“save”>
<url path=“helloworld/post/save”/>
<class>primary</class>
<label translate=“true”>Save</label>
</button>
</buttons>
<namespace>helloworld_post_form</namespace>
<dataScope>data</dataScope>
<deps>
<dep>helloworld_post_form.helloworld_post_form_data_source</dep>
</deps>
</settings>
<dataSource name=“helloworld_post_form_data_source”>
<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>
<settings>
<submitUrl path=“helloworld/post/save”/>
</settings>
<dataProvider class=“ViMagentoHelloWorldModelConfigDataProvider” name=“helloworld_post_form_data_source”>
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>post_id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
<fieldset name=“general” sortOrder=“10”>
<settings>
<label translate=“true”>Post Details</label>
</settings>
<field name=“name” formElement=“input”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“source” xsi:type=“string”>post_rules</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>
<label translate=“true”>Name</label>
<dataType>text</dataType>
<visible>true</visible>
</settings>
</field>
<field name=“content” formElement=“textarea”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“source” xsi:type=“string”>post_rules</item>
</item>
</argument>
<settings>
<validation>
<rule name=“required-entry” xsi:type=“boolean”>true</rule>
</validation>
<label translate=“true”>Content</label>
<dataType>text</dataType>
<visible>true</visible>
</settings>
</field>
<field name=“status” formElement=“select”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“validation” xsi:type=“array”>
<item name=“required-entry” xsi:type=“boolean”>true</item>
</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate=“true”>Status</label>
<dataScope>status</dataScope>
</settings>
<formElements>
<select>
<settings>
<options class=“ViMagentoHelloWorldModelConfigStatus”/>
</settings>
</select>
</formElements>
</field>
</fieldset>
</form>
|
ViMagentoHelloWorldModelConfigStatus – Source Model
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
namespace ViMagentoHelloWorldModelConfig;
/**
* Class Status
* @package ViMagentoHelloWorldModelConfig
*/
class Status implements MagentoFrameworkOptionArrayInterface
{
/**
* @return array[]
*/
public function toOptionArray()
{
return [
[‘value’ => 1, ‘label’ => __(‘Pending’)],
[‘value’ => 2, ‘label’ => __(‘Published’)]
];
}
}
|
Bước 4: Tạo DataProvider
ViMagento/HelloWorld/Model/Config/DataProvider.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<?php
namespace ViMagentoHelloWorldModelConfig;
use ViMagentoHelloWorldModelPostFactory;
use ViMagentoHelloWorldModelResourceModelPostCollectionFactory;
class DataProvider extends MagentoUiDataProviderAbstractDataProvider
{
protected $_loadedData;
protected $collection;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
)
{
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
if (isset($this->_loadedData)) {
return $this->_loadedData;
}
$items = $this->collection->getItems();
foreach ($items as $item) {
$this->_loadedData[$item->getId()] = $item->getData();
}
return $this->_loadedData;
}
}
|
Sau đó bạn xóa cache với câu lệnh php bin/magento cache:clean và truy cập vào controller vừa tạo
Bên cạnh đó bạn cũng có thể tạo form với các tabs bằng cách thêm đoạn code sau bên trong thẻ settings:
|
1
2
3
4
5
6
|
<settings>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
</settings>
|
Đối với trường hợp này mỗi fieldset sẽ tương ứng với một tab:
Kết luận
Trong bài viết tôi đã hướng dẫn các bạn thêm một form admin trong Magento 2 với Ui Component. Ngoài cách sử dụng Ui Component các bạn cũng có thể sử dụng Block để tạo các form có tính phức tạp hơn.
Ở bài viết tiếp theo tôi sẽ hướng dẫn các bạn save, edit và delete trong Magento 2.
Bài viết để các bạn tham khảo: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-form.html