How To Create Magento 2 Module with Admin Grid and Form using UI Component
For every beginner, the most challenging part in Magento 2 is how to create a custom module with UI Component Grid and Form. As we all know UI Component is the heart of Magento but it's tough for beginners to understand.
Luckily there are lots of blogs are available over the internet but almost all blogs are explained everything in a single post and it's hard to understand for beginners. So, we are going to write a series of articles and explain it in each separate part.
In this series, we'll learn How to Create UI Component Grid and Form in Magento 2 in the below part.
- How To Create Magento 2 Module
- How to Create Custom Database in Magento 2
- How to Insert Sample Data in Magento 2
- How to Create Model, Resource Model, and Collection in Magento 2
- How to Add Custom Admin Menu In Magento 2
- How to Create UI Component Grid In Magento 2
- How to Add Mass Action in UI Component Grid in Magento 2
- How to Create UI Component Form and CRUD Operation In Magento 2
- How to Create Custom GraphQL in Magento 2
So, in this article, first we are going to guide you on how to create a basic Magento 2 module.
Let's get started!!
To Create a basic module you have to follow the simple step which are listed the below.
Before we create any files for module you need to create folders under the app/code/
directory. In this article we use Devhooks
as a Vendor Name and HelloWorld
as a module name. You can change the folders as you want.
Now, let's start to create files. For your information to register any module in Magento 2 we've to create the below files.
- etc/module.xml
- registration.php
Step 1: Create module.xml at app/code/Devhooks/HelloWorld/etc/ and paste the below code.
saveCopyzoom_out_map<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Devhooks_HelloWorld" schema_version="1.0.0" setup_version="1.0.0">
</module>
</config>
In the above code, you see we've used Devhooks_HelloWorld
you can change it as per your vendor and module name.
Step 2: Create registration.php file at app/code/Devhooks/HelloWorld/ and paste the below code.
saveCopyzoom_out_map<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Devhooks_HelloWorld', __DIR__ );
Now it's time to active Devhooks_HelloWorld
module. For that open Command line in folder root of magento and run both commands
saveCopyzoom_out_mapphp bin/magento setup:upgrade php bin/magento cache:flush
For more informations about Magento 2 Useful Commands List Click Here and read our another technical note.
To confirm whether your module is installed or not you need check it in your database. To check open the setup_module
table in your database and find Devhooks_HelloWorld
in this table.
If you are able to find any record with Devhooks_HelloWorld
then you are successfully able to create your basic Magento 2 module.
Stay Tuned...
Our first step is done, we hope this article helped you to know How To Create Magento 2 Module. Now let's move to the next step which is How to Create Custom Table and Insert Sample Data in Magento 2 .
If you want to know How To Create a Magento 2 Module with Frontend Controller then Click Here and review it. Bookmark it for your future reference. Do comment below if you have any other questions or doubts.
P.S. Do share this post with your team.
Special thanks to Rutvik Monpara, He helped me a lot to write a series of How to Create UI Component Grid and Form in Magento 2
Review other articles maybe it'll help you too.
- How to Add Image Uploader on Store Configuration in Magento 2
- How to Add Custom Select/MultiSelect Options on Store Configuration in Magento 2
- How to Add Dynamic Row on Store Configuration in Magento 2
- How to Add Date & time Picker on Store Configuration in Magento 2
- How to Add Link on Store Configuration Fields Comment in Magento 2
- How to Use Javascript Mixins in Magento 2
- How to Add Custom Validation Rule in Magento 2
- How to Get Product Collection
- How to Setup Magento 2 PWA Studio
- How to Get Current Category
- How to Get Current Product
- Get Product Collection with Filters
- How to Create And Use Plugin In Magento 2