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"

• Nero Phung: Have you found out the solution? I'm having same issue
• Solide: Same here, there seem to be no examples on how to do this.
• Prachi Saxena: Can you add the code that you have done to add Ui Tab component, it would help to debug the error better.
• Solide: 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.
• Herve Tribouilloy: 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?

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

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();
}

Answer 5

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".

Answer 6

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>