How to Customize Admin Forms & Store Fields in Magento 2

Magento 2, as we all know, is one of the most popular e-commerce platforms. Not only does it offer enhanced performance and scalability, it also offers advanced features, such as the creation of custom Magento modules .

Although Magento provides multiple ways to create custom modules, in this pose we’ll be looking at the relatively newer approach to creating custom modules, which is by using a Ui-Component.

The most important and crucial step when creating a custom Magento module using Ui-component is the implementation of the “multi-store-field and filter”.

To make the understanding easier, I’ve divided this tutorial in to 3 parts.

• In the first part I’ll show you how to create a simple Multi Store Form  (without the multi-store-field-filter) titled “Folio3_MultiStoreForm”
• Next, we’ll take a look at how you can add a new “multi-store field” under the admin form
• In the last step, I’ll show you how to add the “multi-store-filter” under the admin grid

Please note that each part of the module we’ll be creating in this tutorial is listed below and all are available for download.

• Folio3_MultiStoreForm (without multi-store-field & filter)
• Folio3_MultiStoreForm (with multi-store-field under admin form)
• Folio3_MultiStoreForm (with multi-store-filter under admin grid)

The tutorial consist of the front-end view of the module without any content. The focus will be only on the admin-view and the store-field/filter.

PART-1

 In this part we’ll see howe you can create the ‘Folio3_MultiStoreForm’ (without the multi-store-field-filter) along with relevant file structure and the files required to create the module.

Folio3_MultiStoreForm (without multi-store-field & filter) – as shown below

Here we’re only focusing on the steps necessary for creating the above mentioned Folio3_MultiStoreForm (without multi-store-field & filter).

File structure
The file structure for creating this form is as follows.

-Folio3
	/MultiStoreForm
		/Api
			/Data
				/MultiStoreFormInterface.php
				/MultiStoreFormSearchResultsInterface.php
			/MultiStoreFormRepositoryInterface.php
		/Block
			/Adminhtml
				/Index
					/Index.php
				/MultiStoreForm
					/Edit
						/BackButton.php
						/DeleteButton.php
						/GenericButton.php
						/SaveAndContinueButton.php
						/SaveButton.php
			/Index
				/Index.php
			/MultiStoreForm.php
		/Controller
			/Adminhtml
				/Index
					/Index.php
				/MultiStoreForm
					/Delete.php
					/Edit.php
					/Index.php
					/InlineEdit.php
					/NewAction.php
					/Save.php
				/MultiStoreForm.php
			/Index
				/Index.php
		/etc
			/adminhtml
				/menu.xml
				/routes.xml
				/system.xml
			/frontend
				/routes.xml
			/acl.xml
			/config.xml
			/di.xml
			/module.xml
		/Model
			/MultiStoreForm
				/Source
					/Gender.php
			/ResourceModel
				/MultiStoreForm
					/Collection.php
				/MultiStoreForm.php
			/MultiStoreForm.php
			/MultiStoreFormRepository.php
		/Setup
			/InstallSchema.php
		/Ui
			/Component
				/Listing
					/Column
						/MultiStoreFormActions.php
		/view
			/adminhtml
				/layout
					/folio3_multistoreform_edit.xml
					/folio3_multistoreform_index.xml
					/folio3_multistoreform_new.xml
					/multistoreform_index_index.xml
				/templates
					/index
						/index.phtml
				/ui_component
					/folio3_multistoreform_form.xml
					/folio3_multistoreform_index.xml
			/frontend
				/layout
					/multistoreform_index_index.xml
				/templates
					/index
						/index.phtml
					/multistoreform.phtml
		-composer.json
		-registration.php

Important files

Apart from the file structure, you also need the following key files, in order to utilize the View, Save and Grid features of the form.

i. File(s) responsible for rendering/saving field(s) under admin form

app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_form.xml
app/code/Folio3/MultiStoreForm/Model/MultiStoreForm.php
app/code/Folio3/MultiStoreForm/Api/Data/MultiStoreFormInterface.php
app/code/Folio3/MultiStoreForm/Setup/InstallSchema.php

ii. File(s) responsible for showing grid under admin

app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_index.xml

This brings us to the end of the first part of the tutorial.

PART-2

In this part, we will look at the steps required to show the multi-store-field in the form (as shown in the screenshot below). To do that, we’ll need to edit some files and create some new files in the existing module.

Files need to be edited and created

app/code/Folio3/MultiStoreForm/etc/module.xml (edit)
app/code/Folio3/MultiStoreForm/etc/di.xml (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm.php (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Collection.php (edit)
app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_form.xml (edit)
app/code/Folio3/MultiStoreForm/Setup/UpgradeSchema.php (new)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Relation/Store/ReadHandler.php (new)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Relation/Store/SaveHandler.php (new)

Explanation of the (above) files

app/code/Folio3/MultiStoreForm/etc/module.xml (edit)
app/code/Folio3/MultiStoreForm/Setup/UpgradeSchema.php (new)

Please note that ”UpgradeSchema.php” is responsible for creating a new table “folio3_multistoreform_store” with 2 FOREIGN KEY constraints with the parent table (titled) “folio3_multistoreform”.Also keep in mind that the version of “module.xml” being used, must be updated, in order to run the newly upgrade script.

app/code/Folio3/MultiStoreForm/etc/di.xml (edit)

Next, you’ll need to add multiple dependencies required for the CRUD store information.

app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm.php (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Collection.php (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Relation/Store/ReadHandler.php (new)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Relation/Store/SaveHandler.php (new)

The above files consist of multiple methods together with the queries and logic required for making a relation between the two tables and the CRUD process.

	app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_form.xml (edit)

This file is responsible for rendering the fields under admin → form. We will need to add new xml code here for our new “multi-store-field”.

Congratulations. If you’ve gotten this far, you have completed the second part of the tutorial.

PART-3

Folio3_MultiStoreForm (with multi-store-filter under admin grid)

In the last part of the tutorial, we’ll need to render the “store-filter” under admin → grid. Again, you’ll need to edit and create some files in the existing module, in order to render the “store-filter”.

Files that need to be edited and created

app/code/Folio3/MultiStoreForm/etc/di.xml (edit)
app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_index.xml (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Collection.php (edit)
app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Grid/Collection.php (new)

Explanation of (above) files

app/code/Folio3/MultiStoreForm/etc/di.xml (edit)

In this file, you’ll need to add a dependency which consists of the table name, resource model and grid collection information.

app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Grid/Collection.php (new)

This is a new file you will need to create, that consists of all the methods required for searching and filtering the collection under admin → grid.

app/code/Folio3/MultiStoreForm/Model/ResourceModel/MultiStoreForm/Collection.php (edit)

You’ll need to edit this file to provide the mapping information the two tables under the method name “protected function _construct()” (as shown below).

<code>
        $this->_map['fields']['multistoreform_id'] = 'main_table.multistoreform_id';
        $this->_map['fields']['store'] = 'store_table.store_id';
</code>

app/code/Folio3/MultiStoreForm/view/adminhtml/ui_component/folio3_multistoreform_index.xml (edit)

This file is responsible for rendering the filters under admin → grid. You will need to add new xml code in this file, for the new “multi-store-filter”.

And that’s it! You’ve just completed the third part of the tutorial.

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

Blog Post