MageDirect

Magento 2: How to Create Admin Grid

Overview

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:

faqs

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 0
Views: 56
Lilya Gogoleva

Lilya GogolevaMagento Developer

Rate us
1 Star2 Stars3 Stars4 Stars5 Stars
(5 votes, average: 4.80 out of 5)
rating-magedirectLoading...
Bottom Top