How to add Tab in Form Ui ComponentMagento 2.2.6 How to add TAB structure in admin UI component formData population in UI formuiComponent Form. How to show data from DB tableHow to add a link in ui form component note?Magento 2 : How can I upload files of dynamically added file input fields in the adminMagento 2 - insertListing ui componentMagento 2 Add new field to Magento_User admin formMagento 2 : how to add custom grid using ui-component in admin Form TabMagento 2 How to add Tab Component in admin moduleError depending with fileuploader on text field validation while saving category in BOMagento 2.2.6 How to add TAB structure in admin UI component form

Why is this plane circling around the Lucknow airport every day?

My story is written in English, but is set in my home country. What language should I use for the dialogue?

Good for you! in Russian

A question on the ultrafilter number

What are the best books to study Neural Networks from a purely mathematical perspective?

Is it true that real estate prices mainly go up?

A three room house but a three headED dog

What is the likely impact of grounding an entire aircraft series?

Making a sword in the stone, in a medieval world without magic

How does airport security verify that you can carry a battery bank over 100 Wh?

MTG: Can I kill an opponent in response to lethal activated abilities, and not take the damage?

How much attack damage does the AC boost from a shield prevent on average?

Examples of a statistic that is not independent of sample's distribution?

How to create a hard link to an inode (ext4)?

Is Gradient Descent central to every optimizer?

Placing subfig vertically

Why would one plane in this picture not have gear down yet?

Is "history" a male-biased word ("his+story")?

Best approach to update all entries in a list that is paginated?

Accountant/ lawyer will not return my call

How do you like my writing?

Offered promotion but I'm leaving. Should I tell?

Should QA ask requirements to developers?

What is the meaning of triple curly braces in phtml template files? When and how do we use them?



How to add Tab in Form Ui Component


Magento 2.2.6 How to add TAB structure in admin UI component formData population in UI formuiComponent Form. How to show data from DB tableHow to add a link in ui form component note?Magento 2 : How can I upload files of dynamically added file input fields in the adminMagento 2 - insertListing ui componentMagento 2 Add new field to Magento_User admin formMagento 2 : how to add custom grid using ui-component in admin Form TabMagento 2 How to add Tab Component in admin moduleError depending with fileuploader on text field validation while saving category in BOMagento 2.2.6 How to add TAB structure in admin UI component form













6















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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
<button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
<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">VendorModuleUiDataProviderFormRoamingDataProvider</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>









share|improve this question




























    6















    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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
    <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
    <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>









    share|improve this question


























      6












      6








      6


      3






      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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
      <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
      <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>









      share|improve this 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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
      <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
      <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






      magento2 uicomponent






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 9 '18 at 7:23







      Nero Phung

















      asked Jan 6 '18 at 7:56









      Nero PhungNero Phung

      8941520




      8941520




















          6 Answers
          6






          active

          oldest

          votes


















          4














          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.






          share|improve this answer


















          • 1





            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?

            – Gaurav Khatri
            Dec 14 '18 at 9:10











          • @GauravKhatri I have the same issue. Did you found a solution

            – Bram Gerritsen
            Feb 20 at 15:00


















          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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
          <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
          <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





          share|improve this answer























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

            – Chirag Patel
            Nov 12 '18 at 5:14


















          1














          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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
          <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
          <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






          share






























            0














            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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
            <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
            <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





            share|improve this answer

























            • Do I change any fieldset like this?

              – Nero Phung
              Jan 6 '18 at 8:34











            • 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!

              – Nero Phung
              Jan 6 '18 at 8:39











            • can u please add you code in question

              – Abdul
              Jan 6 '18 at 8:54











            • I have updated my code

              – Nero Phung
              Jan 6 '18 at 8:57











            • I have updated my ans pls check now and let me know any issue

              – Abdul
              Jan 6 '18 at 9:08


















            0














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






            share|improve this answer






























              -1














              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.






              share|improve this answer






















                Your Answer








                StackExchange.ready(function()
                var channelOptions =
                tags: "".split(" "),
                id: "479"
                ;
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function()
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled)
                StackExchange.using("snippets", function()
                createEditor();
                );

                else
                createEditor();

                );

                function createEditor()
                StackExchange.prepareEditor(
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: false,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: null,
                bindNavPrevention: true,
                postfix: "",
                imageUploader:
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                ,
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                );



                );













                draft saved

                draft discarded


















                StackExchange.ready(
                function ()
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f208308%2fhow-to-add-tab-in-form-ui-component%23new-answer', 'question_page');

                );

                Post as a guest















                Required, but never shown

























                6 Answers
                6






                active

                oldest

                votes








                6 Answers
                6






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                4














                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.






                share|improve this answer


















                • 1





                  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?

                  – Gaurav Khatri
                  Dec 14 '18 at 9:10











                • @GauravKhatri I have the same issue. Did you found a solution

                  – Bram Gerritsen
                  Feb 20 at 15:00















                4














                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.






                share|improve this answer


















                • 1





                  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?

                  – Gaurav Khatri
                  Dec 14 '18 at 9:10











                • @GauravKhatri I have the same issue. Did you found a solution

                  – Bram Gerritsen
                  Feb 20 at 15:00













                4












                4








                4







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Oct 11 '18 at 1:31









                bassplayer7bassplayer7

                1,5781120




                1,5781120







                • 1





                  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?

                  – Gaurav Khatri
                  Dec 14 '18 at 9:10











                • @GauravKhatri I have the same issue. Did you found a solution

                  – Bram Gerritsen
                  Feb 20 at 15:00












                • 1





                  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?

                  – Gaurav Khatri
                  Dec 14 '18 at 9:10











                • @GauravKhatri I have the same issue. Did you found a solution

                  – Bram Gerritsen
                  Feb 20 at 15:00







                1




                1





                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?

                – Gaurav Khatri
                Dec 14 '18 at 9:10





                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?

                – Gaurav Khatri
                Dec 14 '18 at 9:10













                @GauravKhatri I have the same issue. Did you found a solution

                – Bram Gerritsen
                Feb 20 at 15:00





                @GauravKhatri I have the same issue. Did you found a solution

                – Bram Gerritsen
                Feb 20 at 15:00













                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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                share|improve this answer























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

                  – Chirag Patel
                  Nov 12 '18 at 5:14















                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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                share|improve this answer























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

                  – Chirag Patel
                  Nov 12 '18 at 5:14













                2












                2








                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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                share|improve this answer













                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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Apr 3 '18 at 10:32









                Emipro Technologies Pvt. Ltd.Emipro Technologies Pvt. Ltd.

                2,6011825




                2,6011825












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

                  – Chirag Patel
                  Nov 12 '18 at 5:14

















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

                  – Chirag Patel
                  Nov 12 '18 at 5:14
















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

                – Chirag Patel
                Nov 12 '18 at 5:14





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

                – Chirag Patel
                Nov 12 '18 at 5:14











                1














                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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






                share



























                  1














                  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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                  <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                  <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






                  share

























                    1












                    1








                    1







                    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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                    <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                    <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






                    share













                    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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                    <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                    <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>







                    share











                    share


                    share










                    answered 6 mins ago









                    Abdul KadirAbdul Kadir

                    766




                    766





















                        0














                        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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                        <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                        <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                        share|improve this answer

























                        • Do I change any fieldset like this?

                          – Nero Phung
                          Jan 6 '18 at 8:34











                        • 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!

                          – Nero Phung
                          Jan 6 '18 at 8:39











                        • can u please add you code in question

                          – Abdul
                          Jan 6 '18 at 8:54











                        • I have updated my code

                          – Nero Phung
                          Jan 6 '18 at 8:57











                        • I have updated my ans pls check now and let me know any issue

                          – Abdul
                          Jan 6 '18 at 9:08















                        0














                        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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                        <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                        <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                        share|improve this answer

























                        • Do I change any fieldset like this?

                          – Nero Phung
                          Jan 6 '18 at 8:34











                        • 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!

                          – Nero Phung
                          Jan 6 '18 at 8:39











                        • can u please add you code in question

                          – Abdul
                          Jan 6 '18 at 8:54











                        • I have updated my code

                          – Nero Phung
                          Jan 6 '18 at 8:57











                        • I have updated my ans pls check now and let me know any issue

                          – Abdul
                          Jan 6 '18 at 9:08













                        0












                        0








                        0







                        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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                        <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                        <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>





                        share|improve this answer















                        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="VendorModuleBlockAdminhtmlRoamingEditButtonsDelete"/>
                        <button name="save" class="VendorModuleBlockAdminhtmlRoamingEditButtonsSave"/>
                        <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">VendorModuleUiDataProviderFormRoamingDataProvider</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>






                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Jan 6 '18 at 9:07

























                        answered Jan 6 '18 at 8:19









                        AbdulAbdul

                        8,15311136




                        8,15311136












                        • Do I change any fieldset like this?

                          – Nero Phung
                          Jan 6 '18 at 8:34











                        • 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!

                          – Nero Phung
                          Jan 6 '18 at 8:39











                        • can u please add you code in question

                          – Abdul
                          Jan 6 '18 at 8:54











                        • I have updated my code

                          – Nero Phung
                          Jan 6 '18 at 8:57











                        • I have updated my ans pls check now and let me know any issue

                          – Abdul
                          Jan 6 '18 at 9:08

















                        • Do I change any fieldset like this?

                          – Nero Phung
                          Jan 6 '18 at 8:34











                        • 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!

                          – Nero Phung
                          Jan 6 '18 at 8:39











                        • can u please add you code in question

                          – Abdul
                          Jan 6 '18 at 8:54











                        • I have updated my code

                          – Nero Phung
                          Jan 6 '18 at 8:57











                        • I have updated my ans pls check now and let me know any issue

                          – Abdul
                          Jan 6 '18 at 9:08
















                        Do I change any fieldset like this?

                        – Nero Phung
                        Jan 6 '18 at 8:34





                        Do I change any fieldset like this?

                        – Nero Phung
                        Jan 6 '18 at 8:34













                        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!

                        – Nero Phung
                        Jan 6 '18 at 8:39





                        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!

                        – Nero Phung
                        Jan 6 '18 at 8:39













                        can u please add you code in question

                        – Abdul
                        Jan 6 '18 at 8:54





                        can u please add you code in question

                        – Abdul
                        Jan 6 '18 at 8:54













                        I have updated my code

                        – Nero Phung
                        Jan 6 '18 at 8:57





                        I have updated my code

                        – Nero Phung
                        Jan 6 '18 at 8:57













                        I have updated my ans pls check now and let me know any issue

                        – Abdul
                        Jan 6 '18 at 9:08





                        I have updated my ans pls check now and let me know any issue

                        – Abdul
                        Jan 6 '18 at 9:08











                        0














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






                        share|improve this answer



























                          0














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






                          share|improve this answer

























                            0












                            0








                            0







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






                            share|improve this answer













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







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Jan 29 at 12:11









                            Lokesh DasLokesh Das

                            565




                            565





















                                -1














                                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.






                                share|improve this answer



























                                  -1














                                  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.






                                  share|improve this answer

























                                    -1












                                    -1








                                    -1







                                    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.






                                    share|improve this answer













                                    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.







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Sep 15 '18 at 19:37









                                    Mguru48Mguru48

                                    412




                                    412



























                                        draft saved

                                        draft discarded
















































                                        Thanks for contributing an answer to Magento Stack Exchange!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid


                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.

                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function ()
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f208308%2fhow-to-add-tab-in-form-ui-component%23new-answer', 'question_page');

                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Magento 2 - Add success message with knockout Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Success / Error message on ajax request$.widget is not a function when loading a homepage after add custom jQuery on custom themeHow can bind jQuery to current document in Magento 2 When template load by ajaxRedirect page using plugin in Magento 2Magento 2 - Update quantity and totals of cart page without page reload?Magento 2: Quote data not loaded on knockout checkoutMagento 2 : I need to change add to cart success message after adding product into cart through pluginMagento 2.2.5 How to add additional products to cart from new checkout step?Magento 2 Add error/success message with knockoutCan't validate Post Code on checkout page

                                        Fil:Tokke komm.svg

                                        Where did Arya get these scars? Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Favourite questions and answers from the 1st quarter of 2019Why did Arya refuse to end it?Has the pronunciation of Arya Stark's name changed?Has Arya forgiven people?Why did Arya Stark lose her vision?Why can Arya still use the faces?Has the Narrow Sea become narrower?Does Arya Stark know how to make poisons outside of the House of Black and White?Why did Nymeria leave Arya?Why did Arya not kill the Lannister soldiers she encountered in the Riverlands?What is the current canonical age of Sansa, Bran and Arya Stark?