Exploring Magento 2.2 UI Component – Part 1

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


Step 2:- Once the Basic module is created. We need to create the setup script which contains our custom database table and fields.

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.
tradeshows table structure

To show the data in the admin grid i enter some sample data directly in the database and it looks as shown below.
tradeshows dummy data

In our Next part of tutorial we will create model classes for this database table.