Magento 2 How to add Tab Component in admin module

Question

How can I add UI Tab Component in the custom admin module with the help of the below user guide?

http://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-tab.html

There are not enough information and options for adding Tab Component.

When I am using tab component in custom phtml for one of my module, it's working but when I am using the same component in modal popup with php form modifier, it is not working and giving me the error

"TypeError: require is not a function"

Can you add the code that you have done to add Ui Tab component, it would help to debug the error better. — Prachi Saxena
– Prachi Saxena, Commented Nov 19, 2018 at 5:12
The topic starter explained he has got the tab component working with custom phtml. This is a different implementation and the question is how to do this using the UI component XML. I assume there is no working or not working code to debug. The problem is that there is no documentation on how to do this at all. — Solide
– Solide, Commented Nov 21, 2018 at 12:47
Ok i have removed my answer for now. Will try to dig this tab display and as fallback will start a bounty on your question, does this work? — Herve Tribouilloy
– Herve Tribouilloy, Commented Nov 26, 2018 at 19:16

Msquare · Accepted Answer · 2020-10-24 12:22:33Z

Try this code

<?xml version="1.0" encoding="UTF-8"?>

<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">view_product_inquiry_form.view_product_inquiry_form_data_source</item>
            <item name="deps" xsi:type="string">view_product_inquiry_form.view_product_inquiry_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">view_product_inquiry_form</item>
        </item>
        <item name="spinner" xsi:type="string">general_information</item>
        <item name="buttons" xsi:type="array">
            <!-- <item name="back" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\BackButton</item>
            <item name="delete" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\DeleteButton</item>
            <item name="save" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\SaveEmailButton</item> -->
        </item>
<!--         <item name="template" xsi:type="string">templates/form/collapsible</item> -->
    </argument>
    <settings>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>view_product_inquiry_form.view_product_inquiry_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="view_product_inquiry_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendorename\ModuleName\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">view_product_inquiry_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                 <item name="submit_url" xsi:type="url" path="*/*/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_information">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Inquiry Details</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="prd_sku">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Product SKU</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">prd_sku</item>
                    <item name="dataScope" xsi:type="string">prd_sku</item>
                    <item name="visible" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
        <field name="usr_name">
            <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">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">usr_name</item>
                    <item name="dataScope" xsi:type="string">usr_name</item>
                </item>
            </argument>
        </field>
        <field name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">email</item>
                    <item name="dataScope" xsi:type="string">email</item>
                </item>
            </argument>
        </field>
        <field name="subject">
            <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">Subject</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">subject</item>
                    <item name="dataScope" xsi:type="string">subject</item>
                </item>
            </argument>
        </field>
        <field name="inq_msg">
            <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">Massage</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">inq_msg</item>
                    <item name="dataScope" xsi:type="string">inq_msg</item>
                </item>
            </argument>
        </field>
        <field name="storeviews">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</item>
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">int</item>
                    <item name="label" xsi:type="string" translate="true">Store View</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">storeviews</item>
                    <item name="dataScope" xsi:type="string">storeviews</item>
                </item>
            </argument>
        </field>
    </fieldset>
    <fieldset name="message_reply">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Reply Customer</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="inq_reply">
            <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">Massage</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">inq_msg</item>
                    <item name="dataScope" xsi:type="string">inq_msg</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Bhavin Gohil · Accepted Answer · 2021-12-10 05:46:34Z

Firstly I would suggest you create your own module. In the module create the following classes :

Under Namespace\ModuleName\Block\Adminhtml\Product\Edit\Action\Attribute\Tab create the class Tab ->

<?php

declare(strict_types=1);

namespace Namespace\ModuleName\Block\Adminhtml\Product\Edit\Action\Attribute\Tab;

use Magento\Backend\Block\Widget\Tab\TabInterface;
use Magento\Catalog\Block\Adminhtml\Form;
use Magento\Framework\Phrase;

class Tab extends Form implements TabInterface
{
    public function getTabLabel(): Phrase
    {
        return __('Tab');

    }

    public function getTabTitle(): Phrase
    {
        return __('Tab');

    }

    public function canShowTab(): bool
    {
        return true;

    }

    public function isHidden(): bool
    {
        return false;

    }

    public function getFieldSuffix(): string
    {
        return 'product';
    }
}

Then under view/adminhtml/layout create an XML file catalog_product_action_attribute_edit (this should be the layout file where you want the tab to be added, so find a core example and use the same name for the XML file)

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="attributes_tabs">
            <block class="Namespace\ModuleName\Block\Adminhtml\Product\Edit\Action\Attribute\Tab\Tab" name="tab_block" template="Namespace_ModuleName::catalog/product/edit/tab.phtml"/>
            <action method="addTab">
                <argument name="name" xsi:type="string">tab_name</argument>
                <argument name="block" xsi:type="string">tab_block</argument>
            </action>
        </referenceBlock>
    </body>
</page>

And just create the needed phtml template for that Tab so it's not empty.

Bhavin Gohil · Accepted Answer · 2021-12-10 06:10:06Z

For the UI form, you can refer to the below code to add tabs

<?xml version="1.0"?>
<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">module_index_form.module_index_form_data_source</item>
            <item name="deps" xsi:type="string">module_index_form.module_index_form_data_source</item>
        </item>

        <item name="label" xsi:type="string">Form Name</item>
        <item name="layout" xsi:type="array">
            <item name="navContainerName" xsi:type="string">left</item>
            <item name="type" xsi:type="string">tabs</item>
        </item>

        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="array">
                <item name="name" xsi:type="string">back</item>
                <item name="label" xsi:type="string">Back</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/index</item>
            </item>
            <item name="save" xsi:type="array">
                <item name="name" xsi:type="string">save</item>
                <item name="label" xsi:type="string">Save</item>
                <item name="class" xsi:type="string">primary</item>
            </item>
        </item>

        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">module_index_form</item>
        </item>
    </argument>

    <dataSource name="module_index_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Module\Form\ModuleDataProvider</argument>
            <argument name="name" xsi:type="string">module_index_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</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>
        <settings>
            <submitUrl path="*/*/save" />
        </settings>
    </dataSource>

    <fieldset name="general">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">General Information</item>
            </item>
        </argument>

        <field name="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">int</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">id</item>
                </item>
            </argument>
        </field>

        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Name</item>        
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">module</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

    </fieldset>

    <fieldset name="display_info">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Display Information</item>
            </item>
        </argument>
        
        <field name="background_color" sortOrder="10" formElement="colorPicker">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Background Color</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="source" xsi:type="string">module</item>
                </item>
            </argument>

            <settings>
                <componentType>colorPicker</componentType>
                <placeholder translate="true">No Color</placeholder>
                <dataScope>background_color</dataScope>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </field>
    </fieldset>
</form>

ersandeepgu · Accepted Answer · 2023-02-16 10:58:11Z

0

Add this line of code in Block/Adminhtml/Items/Edit/Tabs.php

 /** 
 * @return $this
 */
protected function _beforeToHtml()
{
    $this->addTab(
        'info',
        [
            'label' => __('Test Tab'),
            'title' => __('Test Tab'),
            // 'content' => $this->getLayout()->createBlock(\Namespace\ModuleName\Block\Adminhtml\Profile\Edit\Tab\Info::class)->toHtml(),
            'active' => true
        ]
    );           
    return parent::_beforeToHtml();
}

answered Feb 16, 2023 at 10:58

ersandeepgu

12 bronze badges

Add a comment |

Alguve · Accepted Answer · 2024-02-08 10:57:01Z

This should work for you:

<?xml version="1.0" encoding="UTF-8"?>
<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">
      <!-- Your content -->
    </argument>
    <settings>
      <!-- Your Settings content -->
    </settings>
    <dataSource name="your_module_data_source">
      <!-- Your data source content -->
    </dataSource>

<!-- Tabs content -->
    <!-- Tab content 1 -->
    <fieldset name="custom_tab_name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Tyour Tab Label</item>
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="entity_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="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">entity_id</item>
                </item>
            </argument>
        </field>
        <field name="data_identifier_x" sortOrder="10" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">your_data_source</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Data Identifier X - label</label>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
    </fieldset>

    <!-- Tab content 2 -->
    <fieldset name="custom_tab_name_2">
        <settings>
            <label translate="true">Your Tab Label 2</label>
        </settings>
        <field name="entity_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="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">entity_id</item>
                </item>
            </argument>
        </field>

        <!-- The fieldset is optional -->
        <fieldset name="fieldset_identifier">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Label</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">true</item>
                </item>
            </argument>
            <field name="data_identifier_x_2">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="sortOrder" xsi:type="number">20</item>
                        <item name="dataType" xsi:type="string">boolean</item>
                        <item name="formElement" xsi:type="string">checkbox</item>
                        <item name="source" xsi:type="string">your_data_source_2</item>
                        <item name="prefer" xsi:type="string">toggle</item>
                        <item name="label" xsi:type="string" translate="true">label</item>
                        <item name="valueMap" xsi:type="array">
                            <item name="true" xsi:type="string">1</item>
                            <item name="false" xsi:type="string">0</item>
                        </item>
                        <item name="default" xsi:type="string">0</item>
                    </item>
                </argument>
                <settings>
                    <dataScope>your_data_scope</dataScope>
                </settings>
            </field>
        </fieldset>
    </fieldset>
</form>

You'll also need to set the data on different arrays on the Data Provider by the identifier you want to use (in the examples "custom_tab_name" and "custom_tab_name_2".

Divyarajsinh Barad · Accepted Answer · 2024-04-10 09:20:26Z

Add tabs in listing form using ui component :

Change your lauout form like below :

must use : layout="admin-2columns-left"

<?xml version="1.0" ?>
<page layout="admin-2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="test_form"/>
        </referenceContainer>
    </body>
</page>

In your test_form.xml check below points :

remove this line:

<item name="template" xsi:type="string">templates/form/collapsible</item>

add below lines :

    <layout>
        <navContainerName>left</navContainerName>
        <type>tabs</type>
    </layout>

and add your tab using fieldset in listing like below:

 <fieldset name="formfield_1">
          add your details here of tab 1
    </fieldset>
    <fieldset name="formfield_2">
          add your details here of tab 2
    </fieldset>

Stack Exchange Network

Magento 2 How to add Tab Component in admin module

6 Answers 6

Your Answer

Hot Network Questions

Magento 2 How to add Tab Component in admin module

6 Answers 6

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions