12

How can I add UI Tab Component in custom admin module with the help of 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"

6
  • Have you found out the solution? I'm having same issue – Nero Phung Jan 6 '18 at 8:50
  • Same here, there seem to be no examples on how to do this. – Solide Nov 18 '18 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 '18 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 '18 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 '18 at 19:16
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 an 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 the just create the needed phtml tempalte for that Tab so its not empty.

0

For the ui form you can refer 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>
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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