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
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:
I want the code work like below:
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
add a comment |
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:
I want the code work like below:
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
add a comment |
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:
I want the code work like below:
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
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:
I want the code work like below:
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
magento2 uicomponent
edited Jan 9 '18 at 7:23
Nero Phung
asked Jan 6 '18 at 7:56
Nero PhungNero Phung
8941520
8941520
add a comment |
add a comment |
6 Answers
6
active
oldest
votes
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.
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
add a comment |
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>
I try with your code but no luck.. magento.stackexchange.com/questions/249135/…
– Chirag Patel
Nov 12 '18 at 5:14
add a comment |
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>
add a comment |
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>
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
|
show 3 more comments
It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.
add a comment |
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.
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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>
I try with your code but no luck.. magento.stackexchange.com/questions/249135/…
– Chirag Patel
Nov 12 '18 at 5:14
add a comment |
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>
I try with your code but no luck.. magento.stackexchange.com/questions/249135/…
– Chirag Patel
Nov 12 '18 at 5:14
add a comment |
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>
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>
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
add a comment |
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
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
answered 6 mins ago
Abdul KadirAbdul Kadir
766
766
add a comment |
add a comment |
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>
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
|
show 3 more comments
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>
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
|
show 3 more comments
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>
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>
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
|
show 3 more comments
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
|
show 3 more comments
It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.
add a comment |
It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.
add a comment |
It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.
It works once I updated both xxx_new.xml and xxx_edit.xml within layout folder. Otherwise it doesn't work at all.
answered Jan 29 at 12:11
Lokesh DasLokesh Das
565
565
add a comment |
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered Sep 15 '18 at 19:37
Mguru48Mguru48
412
412
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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