UI Component
UI Component is a New Concept introduced in Magento 2 for flexible UI Rendering.
As per the Magento 2 Official Documentation
"Magento UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. They are designed for simple and flexible user interface (UI) rendering.
Components are responsible for rendering result page fragments and providing/supporting further interactions of JavaScript components and server."
Part 1 Creating a Custom database table
In this tutorial we will explore the UI Components by creating a custom module from scratch and then build an admin Grid and Form using UI Component.
Lets assume a scenario where we need to display the upcoming Trade shows in our ecommerce website.
Admin will have the provision to enter upcoming trade show details. Existing Trade shows will be listed in the Grid UI Component.
Step 1:- Lets create a module.xml and registration.php for our custom module
[crayon-5bae2dbc7523a863259315/]
registration.php
[crayon-5bae2dbc75249337249055/]
Step 2:- Once the Basic module is created. We need to create the setup script which contains our custom database table and fields.
[crayon-5bae2dbc75253550893958/]
Step 3:- Once the Setup Script is completed, we need to enable our custom module using the commands in magento command line.
php bin/magento module:enable Mydons_Tradeshows
php bin/magento setup:upgrade
Once after the setup upgrade script the table will be created in the database.
To show the data in the admin grid i enter some sample data directly in the database and it looks as shown below.
In our Next part of tutorial we will create model classes for this database table.
The post Exploring Magento 2.2 UI Component – Part 1 appeared first on Mydons.