How to Add Custom Tab in Admin Edit Form in Magento 2

magento-2.1

In the custom edit form, I want to add a custom tab in admin form.

enter image description here

Someone plz help me to solve this

Best Answer

Try below way.

Follow Create UI form link to create simple form without tab structure.

Now replace below code in a given below form.

Namespace/ModuleName/view/adminhtml/ui_component/employee_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">employee_form_form.employee_form_form_data_source</item>
        <!--            <item name="deps" xsi:type="string">employee_form_form.employee_form_form_data_source</item>-->
    </item>
    <item name="label" translate="true" xsi:type="string">Label Options</item>
    <item name="config" xsi:type="array">
        <item name="dataScope" xsi:type="string">data</item>
        <item name="namespace" xsi:type="string">employee_form_form</item>
    </item>
    <item name="reverseMetadataMerge" xsi:type="boolean">true</item>        
</argument>
<settings>
    <buttons>
        <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\BackButton" name="back"/>
        <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\DeleteButton" name="delete"/>
        <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\SaveButton" name="save"/>
        <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\SaveAndContinueButton" name="save_and_continue"/>
        <button class="Namespace\Modulename\Block\Adminhtml\Productlabel\Edit\Duplicate" name="duplicate"/>
    </buttons>        
    <layout>
        <navContainerName>left</navContainerName>
        <type>tabs</type>
    </layout>
    <dataScope>data</dataScope>
    <deps>
        <dep>employee_form_form.employee_form_form_data_source</dep>
    </deps>
</settings>
<dataSource name="employee_form_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Namespace\Modulename\Model\Productlabel\DataProvider</argument>
        <argument name="name" xsi:type="string">employee_form_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">productlabel_id</argument>
        <argument name="requestFieldName" xsi:type="string">productlabel_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="url" path="managelabels/productlabel/save"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
    </argument>
</dataSource>
<fieldset name="general">
    <settings>
        <label translate="true">General Info</label>
    </settings>
    <field name="productlabel_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">false</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Productlabel ID</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">data</item>
                <item name="dataScope" xsi:type="string">productlabel_id</item>
            </item>
        </argument>
    </field>
    <field name="labelname" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Label Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">data</item>
                <item name="dataScope" xsi:type="string">labelname</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>        
</fieldset>

Let me know if you have any query/concern.

I hope it helps!

Note: Make sure you have created a route, controller, model & resource model and blok file. I have share only code to how to add Tab in form.

Related Topic