13

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

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

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

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

"TypeError: require is not a function"

Improve this question
6
  • Have you found out the solution? I'm having same issue
    – Nero Phung
    Jan 6, 2018 at 8:50
  • Same here, there seem to be no examples on how to do this.
    – Solide
    Nov 18, 2018 at 21:37
  • 1
    Can you add the code that you have done to add Ui Tab component, it would help to debug the error better.
    – Prachi Saxena
    Nov 19, 2018 at 5:12
  • The topic starter explained he has got the tab component working with custom phtml. This is a different implementation and the question is how to do this using the UI component XML. I assume there is no working or not working code to debug. The problem is that there is no documentation on how to do this at all.
    – Solide
    Nov 21, 2018 at 12:47
  • Ok i have removed my answer for now. Will try to dig this tab display and as fallback will start a bounty on your question, does this work?
    – Herve Tribouilloy
    Nov 26, 2018 at 19:16

4 Answers 4

Reset to default
0

Try this code

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

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">view_product_inquiry_form.view_product_inquiry_form_data_source</item>
            <item name="deps" xsi:type="string">view_product_inquiry_form.view_product_inquiry_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">view_product_inquiry_form</item>
        </item>
        <item name="spinner" xsi:type="string">general_information</item>
        <item name="buttons" xsi:type="array">
            <!-- <item name="back" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\BackButton</item>
            <item name="delete" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\DeleteButton</item>
            <item name="save" xsi:type="string">Vendorename\ModuleName\Block\Adminhtml\Edit\Button\SaveEmailButton</item> -->
        </item>
<!--         <item name="template" xsi:type="string">templates/form/collapsible</item> -->
    </argument>
    <settings>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>view_product_inquiry_form.view_product_inquiry_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="view_product_inquiry_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendorename\ModuleName\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">view_product_inquiry_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                 <item name="submit_url" xsi:type="url" path="*/*/save"/>
              </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="general_information">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Inquiry Details</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="prd_sku">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Product SKU</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">prd_sku</item>
                    <item name="dataScope" xsi:type="string">prd_sku</item>
                    <item name="visible" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
        <field name="usr_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">usr_name</item>
                    <item name="dataScope" xsi:type="string">usr_name</item>
                </item>
            </argument>
        </field>
        <field name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">email</item>
                    <item name="dataScope" xsi:type="string">email</item>
                </item>
            </argument>
        </field>
        <field name="subject">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Subject</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">subject</item>
                    <item name="dataScope" xsi:type="string">subject</item>
                </item>
            </argument>
        </field>
        <field name="inq_msg">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Massage</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">inq_msg</item>
                    <item name="dataScope" xsi:type="string">inq_msg</item>
                </item>
            </argument>
        </field>
        <field name="storeviews">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</item>
                <item name="config" xsi:type="array">
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">int</item>
                    <item name="label" xsi:type="string" translate="true">Store View</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">storeviews</item>
                    <item name="dataScope" xsi:type="string">storeviews</item>
                </item>
            </argument>
        </field>
    </fieldset>
    <fieldset name="message_reply">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Reply Customer</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="inq_reply">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Massage</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">inq_msg</item>
                    <item name="dataScope" xsi:type="string">inq_msg</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>
Improve this answer
0

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

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

<?php

declare(strict_types=1);

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

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

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

    }

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

    }

    public function canShowTab(): bool
    {
        return true;

    }

    public function isHidden(): bool
    {
        return false;

    }

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

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

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

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

Improve this answer
0

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

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">module_index_form.module_index_form_data_source</item>
            <item name="deps" xsi:type="string">module_index_form.module_index_form_data_source</item>
        </item>

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

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

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

    <dataSource name="module_index_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Module\Form\ModuleDataProvider</argument>
            <argument name="name" xsi:type="string">module_index_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <settings>
            <submitUrl path="*/*/save" />
        </settings>
    </dataSource>

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

        <field name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">int</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">id</item>
                </item>
            </argument>
        </field>

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

    </fieldset>

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

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.