Magento 2: How to Create Admin Grid


To show how to add custom ui grid to the admin panel, we will use MageDirect_Faq module from this article.

Create ACL

Create Access Control List Rules (ACL) file to control access to our Faq grid:

role resources

Add new menu item

Add new menu item by editing etc/adminhtml/menu.xml inside the module. In this case, we will add an item under Content > Elements:


“Add” directive has next attributes:

  • the id attribute is the unique name in format VendorName_ModuleName::menu_name;
  • the title attribute will be visible in the menu bar;
  • the module attribute specifies the module which this menu item belongs to;
  • the action attribute contains the url of the page on which our admin grid will be shown;
  • the resource attribute is used to define the ACL rule which the admin user must have in order to access this menu item;
  • the parent attribute defines parent menu item;
  • the sortOrder attribute defines menu item position inside menu bar.

Add routes.xml

  1. To etc/adminhtml folder add routes.xml file with the next content:

Create admin controller class

Clean cache

Clean cache and we will see the new empty page in the admin panel:


Now we can add a simple grid to this page by using UI Component. Let’s do it.

Сreate layout file

Our UI Component will have a name faq_listing.

Create faq_listing.xml

Create faq_listing.xml inside ui_component folder:


Add the class

It is important to add the class that is responsible for preparing data for the grid (faq_listing_data_source):

Clean cache and check the result:

all faqs
Was this article helpful?
Dislike 1
Views: 2059
Lilya Gogoleva

Lilya GogolevaMagento Developer

Rate us
Please wait...