Hire Magento 2 developers (up to 5 years exp, Magento 2 experience since beta release) Contact us now!

Featured

How to create Magento 2 UI Grid part 1

images

One of the biggest improvements of Magento 2 is a new admin panel.

In this article, I will explain how to create a custom UI grid for the admin panel.

Overview.

There are two types of grid tables in Magento 2 admin.

The first type is a standard one like we’ve used to in Magento 1 admin and the new one called UI Grid, based on UI components.

1

This a basic grid of an admin panel. Now let’s take a look at what UI grid looks like.

grid

UI grids were introduced to improve the overall Magento management experience for merchants by allowing them to customize the standard grid layout of an Admin panel.

Also, there is a special button called filter, which helps to sort your grid data.

fil

As a store administrator, you can easily modify, columns, sort their positions directly from the admin panel.

filter

This feature works for all EAV Grid pages (like add a catalog page, users list page etc). You can add any attribute to the grid page as well.
Another cool thing about grids is that you can save different grid sets and switch between them.

set

If you have many entries on the page, the navigation bar position remains fixed while scrolling down, so you can navigate throughout the page easier.

fixed-bar

Another great improvement is a full-text search on grid pages.

search

You can search any text and if there is at least one entry which contains the search query – it will be displayed on the grid page.

Another important amendment is a product image column in the “Catalog” section. If you click on the product picture you will see the full image of the product.

picture

The last feature I would like to outline is a quick edit directly from the grid or so-called inline edit. It allows you to edit the grid entries without opening the product.

edit-inline

You can also edit few entries at a time with the help of feature called, mass action. Just check the products you would like to edit massively and choose «edit» in the «Actions» menu.

The new architecture of Magento 2 admin layout allows you to see the changes without even reloading the page.

How to customize Magento 2 admin grid. 

All new features look really promising, but you may ask: how to use or customize them?

So let’s talk a little bit more about the process of creating a UI Grid with the help of Magento 2. First of all, we will need to create a custom extension for that.

First of all, we will need to create an extension for that.

The new extension should have the following structure:

  • {NameSpace}/{ExtensionName}/registration.php
  • {NameSpace}/{ExtensionName}/etc/module.xml
  • {NameSpace}/{ExtensionName}/etc/di.xml
  • {NameSpace}/{ExtensionName}/etc/acl.xml
  • {NameSpace}/{ExtensionName}/etc/adminhtml/menu.xml
  • {NameSpace}/{ExtensionName}/etc/adminhtml/routes.xml
  • {NameSpace}/{ExtensionName}/Model/{Entity}.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}/Collection.php
  • {NameSpace}/{ExtensionName}/Model/ResourceModel/{Entity}/Grid/Collection.php
  • {NameSpace}/{ExtensionName}/Setup/InstallSchema.php
  • {NameSpace}/{ExtensionName}/Controller/Adminhtml/Index/Index.php
  • {NameSpace}/{ExtensionName}/view/adminhtml/layout/{frontnameId}_index_index.xml
  • {NameSpace}/{ExtensionName}/view/adminhtml/ui_component/{entity_grid_listing}.xml

* {entity_grid_listing} is a unique identifier of your UI component. Magento is merging xml files based on their names, so you should name them like {entity}_grid_listing, similar to CMS pages sample (page_grid_listing).

In my example:

  • {NameSpace} — Test,
  • {ExtensionName} — UIGrid,
  • {Entity} – Grid.

Let’s overview the files structure in detail:

registration.php, module.xml should contain the information about Magento 2  module declaration. You can look up the module structure at Magento 2 github code samples.

registration.php

module.xml

acl.xml, menu.xml, routes.xml contain the information about admin panel menu links and routes.

acl.xml

menu.xml

routes.xml

Index.php Controller – simple admin controler, which doesn’t contain any special methods.

Index.php

InstallSchema.php – should contain all the information about table schemes, which will be used by your module.
Your Model, ResourceModel and Collection model should contain general methods, to connect your model with resource model and resource model with the database and a model collection between both of them.

model

ResourceModel

Collection

So now, when we’ve created a module structure, we can start building custom UI components to extend the functionality of Magento 2 admin grids. In the next articles, we will walk through the overview of UI components, edit section and finish creating a custom module for extending the UI grid functionality…

Stay tuned!

Pavlo Okhrem
Article by Pavlo Okhrem

CEO/Co-founder at eLogic Commerce. E-commerce expert. International conferences speaker.