How to add Tab in Form Ui Component

Question

I want to create the Tab in Edit Form by Ui Component. Can someone give me a direction to do that. Thanks. This is the code work with ui component now:

enter image description here I want the code work like below:

enter image description here

I spot that the Magento provide an tab component. But I don't know how to use it. EDIT: Here my 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">roaming_form.roaming_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">Roaming Details</item>
 <item name="template" xsi:type="string">templates/form/collapsible</item>
 </argument>
 <settings>
 <buttons>
 <button name="delete" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Delete"/>
 <button name="save" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Save"/>
 <button name="back">
 <url path="*/*/"/>
 <class>back</class>
 <label translate="true">Back</label>
 </button>
 </buttons>
 <namespace>roaming_form</namespace>
 <dataScope>data</dataScope>
 <deps>
 <dep>roaming_form.roaming_form_data_source</dep>
 </deps>
 </settings>
 <dataSource name="roaming_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Form\RoamingDataProvider</argument>
 <argument name="name" xsi:type="string">roaming_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_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="mobifone/roaming/save"/>
 </settings>
 </dataSource>
 <fieldset name="roaming_details">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Roaming Details</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="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 <!--<field name="product_id">-->
 <!--<argument name="data" xsi:type="array">-->
 <!--<item name="config" xsi:type="array">-->
 <!--<item name="label" xsi:type="string">Product ID</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">current_roaming</item>-->
 <!--</item>-->
 <!--</argument>-->
 <!--</field>-->
 <field name="roaming_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Roaming 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">current_roaming</item>
 </item>
 </argument>
 </field>
 <field name="roaming_image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">string</item>
 <item name="source" xsi:type="string">current_roaming</item>
 <item name="label" xsi:type="string" translate="true">Roaming Image</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">fileUploader</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
 <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
 <item name="dataScope" xsi:type="string">image</item>
 <item name="required" xsi:type="boolean">false</item>
 <item name="sortOrder" xsi:type="number">13</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="mobifone/roaming_image/upload"/>
 </item>
 </item>
 </argument>
 </field>
 <field name="description">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 <item name="label" xsi:type="string">Description</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">wysiwyg</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="wysiwyg" xsi:type="boolean">true</item>
 <item name="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 </fieldset>
 <fieldset name="list_product">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">List Products</item>
 </item>
 </argument>
 <insertListing name="products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">products</item>
 </item>
 </argument>
 <settings>
 <externalData>id</externalData>
 <externalProvider>${ $.ns }.product_listing_roaming</externalProvider>
 <selectionsProvider>${ $.ns }.${ $.ns }.columns.ids</selectionsProvider>
 <autoRender>true</autoRender>
 <dataScope>product_listing_roaming</dataScope>
 <ns>product_listing_roaming</ns>
 </settings>
 </insertListing>
 </fieldset>
</form>

Answer 1

Unfortunately, I don't think any of the other answers will work. One (the link to a tutorial) isn't even a UI Component. It is possible to add tabs with a UI Component. My example is for Magento 2.2 +, but I suspect it will work in earlier versions if adjusted for the old UI Component syntax.

Step #1

The following are the necessary requirements for making a UI Component with tabs work (replace all references to "referral" with your UI Component name):

<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="label" xsi:type="string" translate="true">Referral</item>
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">referral_form.referral_form_data_source</item>
 </item>
 </argument>
 <settings>
 <layout>
 <!-- I assume there are other options; set the layout handle accordingly -->
 <navContainerName>left</navContainerName>
 <type>tabs</type>
 </layout>
 <deps>
 <dep>referral_form.referral_form_data_source</dep>
 </deps>
 </settings>
 <dataSource name="referral_form_data_source">
 <!-- ... -->
 </dataSource>
 <fieldset name="referral_fieldset">
 <settings>
 <label translate="true">General Info</label>
 </settings>
 <!-- Each fieldset is a new tab -->
 </fieldset>
</form>

Note: most of your example UI Component code is correct, but you need to add the following to the <settings> node:

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

Step #2

Set the layout on the page in the layout XML file: <page layout="admin-2columns-left"/>

---

Magento_Customer/view/base/ui_component/customer_form.xml is a good example in the core.

• Gaurav Khatri: I am facing to create a new tab in form. I set the 2-column layout and added the <setting> tag and it's working fine. I can see the tab in left side but now form is not loaded. It's showing only loading spinner. I used the customer_form.xml for reference. Do have any idea about this?
• Bram Gerritsen: @GauravKhatri I have the same issue. Did you found a solution
• Michiel: If you have a spinner that keeps loading: This is caused by using the collapsible template. See this answer: magento.stackexchange.com/a/249814/29032

Answer 2

Replace below code in your roaming_form.xml file

 <?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">roaming_form.roaming_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">Roaming Details</item>
 <!--item name="template" xsi:type="string">templates/form/collapsible</item-->
 </argument>
 <settings>
 <buttons>
 <button name="delete" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Delete"/>
 <button name="save" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Save"/>
 <button name="back">
 <url path="*/*/"/>
 <class>back</class>
 <label translate="true">Back</label>
 </button>
 </buttons>
 <namespace>roaming_form</namespace>
 <dataScope>data</dataScope>
 <deps>
 <dep>roaming_form.roaming_form_data_source</dep>
 </deps>
 <layout>
 <navContainerName>left</navContainerName>
 <type>tabs</type>
 </layout>
 </settings>
 <dataSource name="roaming_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Form\RoamingDataProvider</argument>
 <argument name="name" xsi:type="string">roaming_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_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="mobifone/roaming/save"/>
 </settings>
 </dataSource>
 <fieldset name="roaming_details">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Roaming Details</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="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 <field name="roaming_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Roaming 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">current_roaming</item>
 </item>
 </argument>
 </field>
 <field name="roaming_image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">string</item>
 <item name="source" xsi:type="string">current_roaming</item>
 <item name="label" xsi:type="string" translate="true">Roaming Image</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">fileUploader</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
 <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
 <item name="dataScope" xsi:type="string">image</item>
 <item name="required" xsi:type="boolean">false</item>
 <item name="sortOrder" xsi:type="number">13</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="mobifone/roaming_image/upload"/>
 </item>
 </item>
 </argument>
 </field>
 <field name="description">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 <item name="label" xsi:type="string">Description</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">wysiwyg</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="wysiwyg" xsi:type="boolean">true</item>
 <item name="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
</fieldset>
<fieldset name="list_product">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">List Products</item>
 <item name="sortOrder" xsi:type="number">10</item>
 </item>
 </argument>
 <insertListing name="products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">products</item>
 </item>
 </argument>
 <settings>
 <externalData>id</externalData>
 <externalProvider>${ $.ns }.product_listing_roaming</externalProvider>
 <selectionsProvider>${ $.ns }.${ $.ns }.columns.ids</selectionsProvider>
 <autoRender>true</autoRender>
 <dataScope>product_listing_roaming</dataScope>
 <ns>product_listing_roaming</ns>
 </settings>
 </insertListing>
</fieldset>

Answer 3

Replace below code in your roaming_form.xml file.

<?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">roaming_form.roaming_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">Roaming Details</item>
 <item name="template" xsi:type="string">templates/form/collapsible</item>
 </argument>
 <settings>
 <buttons>
 <button name="delete" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Delete"/>
 <button name="save" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Save"/>
 <button name="back">
 <url path="*/*/"/>
 <class>back</class>
 <label translate="true">Back</label>
 </button>
 </buttons>
 <namespace>roaming_form</namespace>
 <dataScope>data</dataScope>
 <deps>
 <dep>roaming_form.roaming_form_data_source</dep>
 </deps>
 </settings>
 <dataSource name="roaming_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Form\RoamingDataProvider</argument>
 <argument name="name" xsi:type="string">roaming_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_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="mobifone/roaming/save"/>
 </settings>
 </dataSource>
 <fieldset name="roaming_details">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="collapsible" xsi:type="boolean">true</item>
 <item name="label" xsi:type="string" translate="true">Roaming Details</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="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 <!--<field name="product_id">-->
 <!--<argument name="data" xsi:type="array">-->
 <!--<item name="config" xsi:type="array">-->
 <!--<item name="label" xsi:type="string">Product ID</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">current_roaming</item>-->
 <!--</item>-->
 <!--</argument>-->
 <!--</field>-->
 <field name="roaming_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Roaming 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">current_roaming</item>
 </item>
 </argument>
 </field>
 <field name="roaming_image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">string</item>
 <item name="source" xsi:type="string">current_roaming</item>
 <item name="label" xsi:type="string" translate="true">Roaming Image</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">fileUploader</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
 <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
 <item name="dataScope" xsi:type="string">image</item>
 <item name="required" xsi:type="boolean">false</item>
 <item name="sortOrder" xsi:type="number">13</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="mobifone/roaming_image/upload"/>
 </item>
 </item>
 </argument>
 </field>
 <field name="description">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 <item name="label" xsi:type="string">Description</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">wysiwyg</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="wysiwyg" xsi:type="boolean">true</item>
 <item name="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 </fieldset>
 <fieldset name="list_product">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="collapsible" xsi:type="boolean">true</item>
 <item name="label" xsi:type="string" translate="true">List Products</item>
 </item>
 </argument>
 <insertListing name="products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">products</item>
 </item>
 </argument>
 <settings>
 <externalData>id</externalData>
 <externalProvider>${ $.ns }.product_listing_roaming</externalProvider>
 <selectionsProvider>${ $.ns }.${ $.ns }.columns.ids</selectionsProvider>
 <autoRender>true</autoRender>
 <dataScope>product_listing_roaming</dataScope>
 <ns>product_listing_roaming</ns>
 </settings>
 </insertListing>
 </fieldset>
</form>

You have to just add below line to make any tab collapsible.

<item name="collapsible" xsi:type="boolean">true</item>

• Chirag Patel: I try with your code but no luck.. magento.stackexchange.com/questions/249135/…

Answer 4

Add below code in your your_form.xml file

 <?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">roaming_form.roaming_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">Roaming Details</item>
 <item name="template" xsi:type="string">templates/form/collapsible</item>
 </argument>
 <settings>
 <buttons>
 <button name="delete" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Delete"/>
 <button name="save" class="Vendor\Module\Block\Adminhtml\Roaming\Edit\Buttons\Save"/>
 <button name="back">
 <url path="*/*/"/>
 <class>back</class>
 <label translate="true">Back</label>
 </button>
 </buttons>
 <namespace>roaming_form</namespace>
 <dataScope>data</dataScope>
 <deps>
 <dep>roaming_form.roaming_form_data_source</dep>
 </deps>
 </settings>
 <dataSource name="roaming_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Form\RoamingDataProvider</argument>
 <argument name="name" xsi:type="string">roaming_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_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="mobifone/roaming/save"/>
 </settings>
 </dataSource>
 <fieldset name="roaming_details">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Roaming Details</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="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 <!--<field name="product_id">-->
 <!--<argument name="data" xsi:type="array">-->
 <!--<item name="config" xsi:type="array">-->
 <!--<item name="label" xsi:type="string">Product ID</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">current_roaming</item>-->
 <!--</item>-->
 <!--</argument>-->
 <!--</field>-->
 <field name="roaming_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Roaming 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">current_roaming</item>
 </item>
 </argument>
 </field>
 <field name="roaming_image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">string</item>
 <item name="source" xsi:type="string">current_roaming</item>
 <item name="label" xsi:type="string" translate="true">Roaming Image</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">fileUploader</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
 <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
 <item name="dataScope" xsi:type="string">image</item>
 <item name="required" xsi:type="boolean">false</item>
 <item name="sortOrder" xsi:type="number">13</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="mobifone/roaming_image/upload"/>
 </item>
 </item>
 </argument>
 </field>
 <field name="description">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 <item name="label" xsi:type="string">Description</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">wysiwyg</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="wysiwyg" xsi:type="boolean">true</item>
 <item name="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 </fieldset>
 <fieldset name="list_product">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">List Products</item>
 </item>
 </argument>
 <insertListing name="products">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">products</item>
 </item>
 </argument>
 <settings>
 <externalData>id</externalData>
 <externalProvider>${ $.ns }.product_listing_roaming</externalProvider>
 <selectionsProvider>${ $.ns }.${ $.ns }.columns.ids</selectionsProvider>
 <autoRender>true</autoRender>
 <dataScope>product_listing_roaming</dataScope>
 <ns>product_listing_roaming</ns>
 </settings>
 </insertListing>
 </fieldset>
 <fieldset name="list_product2">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">List Products2</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="source" xsi:type="string">current_roaming</item>
 </item>
 </argument>
 </field>
 </fieldset>
</form>

• Nero Phung: Do I change any fieldset like this?
• Nero Phung: I have add <item name="is_collection" xsi:type="boolean">true</item> and <item name="source" xsi:type="string">new-tab</item> </item> with each fieldset and field. Still not working!
• Abdul: can u please add you code in question
• Nero Phung: I have updated my code
• Abdul: I have updated my ans pls check now and let me know any issue

Answer 5

It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.

Answer 6

You can follow this tutorial https://www.mage-world.com/blog/grid-and-form-in-magento-2-admin-panel-part-2.html

You can't create tab using the ui component you have to mention this as a layout ,you will get the detail in above link.