How to create a grid using UI component in Magento 2
Hi Everybody, I am Cuong, Welcome to my Magento 2 Tutorial video series.
In the previous lessons, I showed everyone:
1. How to create a new module in Magento 2 at the video link
2. How to add new tables for a custom module in Magento 2 at the video link
To continue the previous lessons, today, I am going to show everybody How to create a grid using UI component in Magento 2.
I will create a grid showing the banners saved in the table named phpcuong_banners_slider
To complete this best practice you need to complete the following high-level steps:
1. Create the new menu named Banner Slider
– Create the file named menu.xml in the path appcodePHPCuongBannerSlideretcadminhtml
– Create the file named acl.xml in the path appcodePHPCuongBannerSlideretc
2. Create the new route named phpcuong_banners_slider for using
– Create the file named routes.xml in the path appcodePHPCuongBannerSlideretcadminhtml
3. Create the new controller, action
– Create the folder named Banner in the path appcodePHPCuongBannerSliderControllerAdminhtml
– Create the file named Index.php in the path appcodePHPCuongBannerSliderControllerAdminhtmlIndex
4. Create the new layout
– Create the new layout named phpcuong_banners_slider_banner_index.xml in the path appcodePHPCuongBannerSliderviewadminhtmllayout
– The structure of a layout will be routeName_controllerName_actionName.xml
5. Create the new ui_component
– Create the new ui component named phpcuong_banners_slider_banner_listing.xml in the path appcodePHPCuongBannerSliderviewadminhtmlui_component
6. Create the di.xml
– Create the new file named di.xml in the path appcodePHPCuongBannerSlideretc
7. Create the new model named Banner
– Create the new file named Banner.php in the path appcodePHPCuongBannerSliderModel
8. Create the new ResourceModel named Banner
– Create the new file named Banner.php in the path appcodePHPCuongBannerSliderModelResourceModel
9. Create the new Collection
– Create the new file named Collection.php in the path appcodePHPCuongBannerSliderModelResourceModelBanner
10. Create the new grid collection
– Create the new file named Collection.php in the path appcodePHPCuongBannerSliderModelResourceModelBannerGrid
11. Flush the caches and See the results.
– php bin/magento cache:flush
It works perfectly.
Thank you for your watching. If you have any questions about this exercise please feel free to leave a comment below.
Don’t forget to like, comment, share and subscribe to my channel for getting the latest videos.
Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.
Get the source codes of this tutorial on the github