Chuyển tới nội dung
Trang chủ » Tạo form admin trong Magento 2 với Ui Component

Tạo form admin trong Magento 2 với Ui Component

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

Bước 1: Tạo Controller

ViMagento/HelloWorld/Controller/Adminhtml/Post/AddNew.php

Bước 2: Tạo Layout file

Bạn tạo file: ViMagento/HelloWorld/view/adminhtml/layout/helloworld_post_addnew.xml

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

ViMagentoHelloWorldModelConfigStatus – Source Model

Bước 4: Tạo DataProvider

ViMagento/HelloWorld/Model/Config/DataProvider.php

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

Thêm một form trong admin sử dụng Ui Component Magento 2
Thêm một form trong admin sử dụng Ui Component Magento 2

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:

Đối với trường hợp này mỗi fieldset sẽ tương ứng với một tab:

Tạo form với tabs

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

Trả lời

Email của bạn sẽ không được hiển thị công khai.