Categories
Magento

How to Load Ui Component in Custom Tab inside Admin in Magento2

In the previous blog, we learned how to create custom tab in customer form and now we will learn how to load grid inside admin in customer form in magento 2.

You will remember that we made two files: customer_index_edit.xml and customer_form.xml. So now we have to edit customer_form.xml and paste below 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">
    <fieldset name="demo-amit-tab">
        <settings>
            <collapsible>false</collapsible>
            <label translate="true">Demo Tab</label>
            <componentType>fieldset</componentType>
            <additionalClasses>
                <class name="customer-warranty-form">true</class>
            </additionalClasses>
        </settings>

        <insertListing name="product_listing">
            <settings>
                <dataLinks>
                    <exports>false</exports>
                    <imports>true</imports>
                </dataLinks>
                <externalProvider>product_listing.product_listing_data_source</externalProvider>
                <selectionsProvider>product_listing.product_listing.product_columns.ids</selectionsProvider>
                <autoRender>true</autoRender>
                <dataScope>product_listing</dataScope>
                <ns>product_listing</ns>
                <exports>
                    <link name="parent_id">${ $.externalProvider }:params.parent_id</link>
                </exports>
                <imports>
                    <link name="parent_id">${ $.provider }:data.customer.entity_id</link>
                    <link name="onAction">ns = ${ $.ns }, index = actions:action</link>
                    <link name="onMassAction">ns = ${ $.ns }, index = listing_massaction:massaction</link>
                </imports>
            </settings>
        </insertListing>
    </fieldset>
</form>

Here we load product grid. We hope this article on load ui grid in custom tab to the Magento 2 customer form inside admin is simple to grasp.

If you still have any issue feel free to ask and let us know your views to make the better. Share this solution with your other Magento buddies via social media.

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *