blog-page-header-bg

The Development Steps for Conventional Admin Form | Grid | Store Filter in Magento 2

COMMENTS (0)
Tweet

 

 

The learning curve for Magento 2, with all of the updates, has become even steeper. In this blog, I plan to showcase you how to develop admin form and grid in Magento 2.

Magento 2 provides two ways for development of admin form and grid.

1)   UI Component (New Approach).

2)   Conventional Approach (similar with Magento-1).

I have already blogged on “UI Component” approach link. In this blog, I will cover the second” Conventional” approach.

The most critical part in both approaches is appending of store-field and filter under admin form and grid. The reason for writing this blog, is to simplify the appending process of store-field and filter, by highlighting the necessary development steps.

The “Conventional” module development will be divided into 2 parts.

  • The 1st part will cover the admin form and grid without store field and filter.
  • The 2nd part will cover the addition of store-field and filter under admin grid and form.

For complete “conventional” approach, module overview and structure, I have provided multiple screen-shots:

SCREEN-SHOTS:

Magento 2 Blog folio3 - conventional approach for store grid filter

Magento 2 Blog folio3 - conventional approach for store grid filter

Magento 2 Blog folio3 - conventional approach for store grid filter

Magento 2 Blog folio3 - conventional approach for store grid filter

PART-1: 

MODULE STRUCTURE & DEVELOPMENT

(without store field & filter)

Step-1:

Create module required files and folder:

app/code/Folo3/ConventionalFormGridStoreFilter/registration.php

app/code/Folo3/ConventionalFormGridStoreFilter/etc/module.xml

 

Step-2:

Define admin menu configurations with necessary routes:

app/code/Folo3/ConventionalFormGridStoreFilter/etc/adminhtml/menu.xml

app/code/Folo3/ConventionalFormGridStoreFilter/etc/adminhtml/routes.xml

 

Step-3:

Write installer script that will create DB table “folio3_conventionalformgridstorefilter”:

app/code/Folo3/ConventionalFormGridStoreFilter/Setup/InstallSchema.php

 

Note:

From next steps we will cover (admin) MVC (module-view-contoller) part of the module.

Step-4:

Create (admin) required view XML files.

app/code/Folo3/ConventionalFormGridStoreFilter/view/adminhtml/layout/conventionalformgridstorefilter_index_edit.xml

app/code/Folo3/ConventionalFormGridStoreFilter/view/adminhtml/layout/conventionalformgridstorefilter_index_grid.xml

app/code/Folo3/ConventionalFormGridStoreFilter/view/adminhtml/layout/conventionalformgridstorefilter_index_index.xml

app/code/Folo3/ConventionalFormGridStoreFilter/view/adminhtml/layout/conventionalformgridstorefilter_index_new.xml

 

Step-5:

Create (admin) required view BLOCK files.

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Edit.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Grid.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Edit/Form.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Edit/Tabs.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Edit/Tab/Main.php

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/Form/Element/Image.php

 

Step-6:

Create MODEL files required for CRUD operations.

app/code/Folo3/ConventionalFormGridStoreFilter/Model/ConventionalFormGridStoreFilter.php

app/code/Folo3/ConventionalFormGridStoreFilter/Model/ResourceModel/ConventionalFormGridStoreFilter.php

app/code/Folo3/ConventionalFormGridStoreFilter/Model/ResourceModel/ConventionalFormGridStoreFilter/Collection.php

 

Step-7:

Create CONTROLLER file(s) required for routing and requests processing.

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Delete.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Edit.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Grid.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Index.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/NewAction.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/PostDataProcessor.php

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Save.php

 

Step-8:

Create HELPER file for accessing friendly methods, like image resizing etc.

app/code/Folo3/ConventionalFormGridStoreFilter/Helper/Data.php

 

 

PART-2:

MODULE STRUCTURE & DEVELOPMENT

(with store field & filter)

First we will show how to append store-field under form then will render under GRID with filter work.

Step-1:

Add new table “folio3_conventionalformgridstorefilter_store”, by upgradeschema script:

app/code/Folo3/ConventionalFormGridStoreFilter/Setup/UpgradeSchema.php

 

Step-2:

Update module version, to run (above) upgrade script.

app/code/Folo3/ConventionalFormGridStoreFilter/etc/module.xml

 

Step-3:

In order to show store-field under form, insert following code by editing the following file:

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/ConventionalFormGridStoreFilter/Edit/Tab/Main.php

 

Step-4:

Store field CRUD operation(s) can be code by editing the following MODEL and CONTROLLER file(s):

app/code/Folo3/ConventionalFormGridStoreFilter/Model/ResourceModel/ConventionalFormGridStoreFilter.php

 

Edit following CONTROLLER file, execute() method:

app/code/Folo3/ConventionalFormGridStoreFilter/Controller/Adminhtml/Index/Save.php

 

Note:

Rendering of store-field with CRUD operation is completed.

Step-5:

GRID work requires to edit following file(s).

Note:

The method “filterStoreCondition” will be used for filtering collection by store.

The addStoreData() will join store table with the main table collection.

app/code/Folo3/ConventionalFormGridStoreFilter/Block/Adminhtml/Lowstock/Grid.php

 

Step-6 (final step):

Insert the filtering logic by editing the following file:

app/code/Folo3/ConventionalFormGridStoreFilter/Model/ResourceModel/ConventionalFormGridStoreFilter/Collection.php

 

Please feel free to comment or reach out if you have any questions. If you need any help with customizing your Magento 2 web store, please get in touch with us.

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

7 best Website performance test tips to increas...

March 6, 2019
Website Performance and speed are considered major elements that drive user experiences and pave way for business growth, especially in the ecommer...
Read more

Amazon DynamoDB, from development to deployment

March 4, 2019
Amazon DynamoDB is a fully managed proprietary NoSQL database service that supports key-value and document data structures and is offered by Amazon...
Read more

Using LESS in React without Ejecting

February 28, 2019
I recently came across a problem while configuring my React application to use LESS styling. The misleading information on the web made the solutio...
Read more