Till now we have seen two ways to create form. There are multiple ways to create form and there are multiple types of form that can be created.
In this blog we will see how to create multi tab form like you see in the customer edit section. You can create this form with ui component or the widget. Here I will create it with widget. But I will advise you to create the multi tab structure with ui component as an exercise.
First of all we will edit the layout file view/adminhtml/layout/blogmanager_manage_edit.xml
Since we will be using 2 columns layout, one for tab and the other for the form itself, we need to specify the layout type as admin-2columns-left. In the left column we have added the tabs block and in the right or the main column we have added the main form class which is same as before.
We will keep the Block/Adminhtml/Blog/Edit.php class as same as before. But we have to edit the form class Block/Adminhtml/Blog/Edit/Form.php as shown below
class Form extends \Magento\Backend\Block\Widget\Form\Generic
{
protectedfunction_prepareForm()
{
$form = $this->_formFactory->create(
['data' =>[
'id' =>'edit_form',
'enctype' =>'multipart/form-data',
'action' =>$this->getData('action'),
'method' =>'post'
]
]
);
$form->setUseContainer(true);
$this->setForm($form);
returnparent::_prepareForm();
}
}
As you can see we have removed all the field from this class. And we have kept only the form attributes that is because this class will act as the main form. And in this main form we will attach the fields related to each tabs. Also note that the form id is edit_form.
Now let’s create the tabs block class as, Block/Adminhtml/Blog/Edit/Tabs.php
Now here you can see with setDestElementId method we have set the destination element for the tabs output as edit_form which is the id of the form that we created earlier.
In the _prepareLayout function we can add the tabs. The code for adding the tab is very self explanatory. We have given an id to the tab and added label. We have also mentioned which tab should be active when we first load the page. In the content param we have mentioned the block class that will produce the html content for this tab.
Important thing to mention here is that we can also load ajax content in the tab. And this is very common practice when we show data in grid form in a tab. The syntax for tab with ajax data is given below,
Instead of content we are using url param and we pass the ajax url to load. We can also pass some param if we want to load the relevant data. One use case in our scenario can be if we show the comments of a blog in a grid. There we will pass the blog id in param and load the comments with ajax.
Let’s see how we can create the two tab classes. First we will create the main tab as Block/Adminhtml/Blog/Edit/Tab/Main.php
It is very similar to what we saw in previous blog. There are only two differences. We have removed the $form->setUseContainer(true); line from the code because it will create nested form. Also you can see while creating the form we have not passed the data param as we did earlier. That is because we are using the main form itself.
Now let’s create the other tab, Block/Adminhtml/Blog/Edit/Tab/Status.php
It is essentially same as the main class. So no explanation is needed here.
Now when you click on edit, you should see something like,
Note that sometimes you may want to create a custom form with custom design. You can do that too in magento by creating own form with phtml file. I will not cover it but you can easily find it in many blogs and follow along.
