Magento – Magento 2 – How to add ajax tab on admin user edit page in admin section

adminajaxmagento-2.0.6tabs

I want to add a tab on User edit page which can be accessed from grid in section System -> All users. I have managed to add tab but it is not loading through AJAX. When I click on tab it redirects to another URL.

Please see screen shot and code below.

Code:-

/app/code/Namespace/Module/Block/Adminhtml/Edit/Tab/Customer.php

<?php
namespace Namespace\Module\Block\Adminhtml\Edit\Tab;

class Customer extends \Magento\Backend\Block\Widget\Tabs
{
    /**
     * Class constructor
     *
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setId('page_tabs');
        $this->setDestElementId('edit_form');
    }

    /**
     * @return $this
     */
    protected function _beforeToHtml()
    {

        $this->addTab(
            'magcr_customer_section',
            [
                'label' => __('Select Customer(s)'),
                'title' => __('Select Customer(s)'),
                'url' => $this->getUrl('magcr/index/customer'),
                'class' => 'ajax',
                'active' => FALSE
            ]
        );
        return parent::_beforeToHtml();
    }
}

/app/code/Namespace/Module/view/adminhtml/layout/adminhtml_user_edit.xml

<?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>
        <referenceContainer name="left">
            <block class="Namespace\Module\Block\Adminhtml\Edit\Tab\Customer" name="adminhtml.user.edit.tabs1"/>
        </referenceContainer>
    </body>
</page>

Please help what am I doing wrong.

UPDATE

When I modify below code in constructor of block class, the tabs loads through ajax.

$this->setId('magcr_page_tabs');

But now problem is both 'User Info' and 'Select Customer(s)' load automatically on page load.

Best Answer

For example, I add Websites tab

Find current tabs reference "adminhtml.user.edit.tabs" https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/User/view/adminhtml/layout/adminhtml_user_edit.xml#L11
Create your module view xml

/app/code/Namespace/Module/view/adminhtml/layout/adminhtml_user_edit.xml

    <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="adminhtml.user.edit.tabs">
                <block class="Magento\Catalog\Block\Adminhtml\Product\Edit\Action\Attribute\Tab\Websites" name="tab_websites" template="Magento_Catalog::catalog/product/edit/action/websites.phtml"/>
                <action method="addTab">
                    <argument name="name" xsi:type="string">websites</argument>
                    <argument name="block" xsi:type="string">tab_websites</argument>
                </action>
            </referenceBlock>
        </body>
    </page>

Related Solutions

Magento2 Customer Account Tabs UIComponent – How to Add Tab and Grid to Admin Customer View

I'm going to answer my own question here. After a lot of digging through core... The Magento_Customer module is just not built properly yet. Unlike the sales order view the customer view does not render the grids on the page using knockout but rather makes separate ajax request when you select the different tabs. For now I think you just need to do it the M1 way by defining your fields etc in a block class and rendering that out to html.

Eventually however, i'm sure Magento will get around to adhering to their own standards and it'll stop working. So just be ready for that. Here's a tutorial for doing it the wrong way : http://www.ibnab.com/en/blog/magento-2/magento-2-backend-create-custom-tab-in-customer-view-and-load-grid-inside-admin

Magento 1.9.2.4 – Adding New Tab in Custom Module Admin Side

In your custom module add below code in layout xml file

<adminhtml_customer_edit>
    <reference name="customer_edit_tabs">
        <action method="addTab"><name>customtab_name</name><block>modulename/adminhtml_customer_tab</block></action>
    </reference>
</adminhtml_customer_edit>

Create block file in your custom module

<?php
class Namespace_Modulename_Block_Adminhtml_Customer_Tab
extends Mage_Adminhtml_Block_Template
implements Mage_Adminhtml_Block_Widget_Tab_Interface {
   /**
     * Set the template for the block
     *
     */
    public function _construct()
    {
        parent::_construct();
       $this->setTemplate('template path here');
    }
   /**
     * Retrieve the label used for the tab relating to this block
     *
     * @return string
     */
    public function getTabLabel()
    {
        return $this->__('My Custom Tab');
    }
   /**
     * Retrieve the title used by this tab
     *
     * @return string
     */
    public function getTabTitle()
    {
        return $this->__('Click here to view your custom tab content');
    }
   /**
     * Determines whether to display the tab
     * Add logic here to decide whether you want the tab to display
     *
     * @return bool
     */
    public function canShowTab()
    {
        return true;
    }
    /**
     * Stops the tab being hidden
     *
     * @return bool
     */
    public function isHidden()
    {
        return false;
    }
}

EDIT

add below code in file Customtab_Customeraccount.xml at app/etc/modules/Customtab_Customeraccount.xml

<?xml version="1.0"?>

<config>
    <modules>
        <Customtab_CustomerAccount>
            <active>true</active>
            <codePool>local</codePool>
            <depends />
        </Customtab_CustomerAccount>
    </modules>
</config>

You need to change your Action.php below code

public function canShowTab()
        {
            $customer = Mage::registry('current_customer');
            return (bool)$customer->getId();
        }

to:

public function canShowTab()
        {

            return true;
        }

Best Answer

Related Solutions

Magento2 Customer Account Tabs UIComponent – How to Add Tab and Grid to Admin Customer View

Magento 1.9.2.4 – Adding New Tab in Custom Module Admin Side

Related Topic