Use of UiComponent InsertListing – How to insert a listing inside a Form Element

Many times we face the issue of having a listing of customers or products inside a form for mass selection. Magento UIComponent has provided a very useful feature which we can use to solve such issues. InsertListing UI Component is basically a component which allows us to insert the listing with all its features such as pagination, mass-actions, sorting, inside other UI Components.

Today, we are going to insert a product listing inside our form. Our purpose is to mass select the product and save it in the database. I will show you two different ways you can add the listing :-

1-Directly in the form

<form xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc/ui_configuration.xsd”>
    …

    <fieldset name=”main”>
        <argument name=”data” xsi:type=”array”>
            <item name=”config” xsi:type=”array”>
                <item name=”label” xsi:type=”string” translate=”true”>General</item>
                <item name=”sortOrder” xsi:type=”number”>10</item>
            </item>
        </argument>
        <field name=”id”>
           …
        </field>
        <field name=”title”>
           …
        </field>

        <insertListing name=”product_listing” >
            <settings>
                <dataLinks>
                    <exports>false</exports>
                    <imports>true</imports>
                </dataLinks>
                <autoRender>true</autoRender>
                <selectionsProvider>
                    product_listing.product_listing.columns.ids
                </selectionsProvider>
                <dataScope>product_listing</dataScope>
                <ns>product_listing</ns>
            &lt;/settings>
        </insertListing>
    </fieldset>
</form>

This will insert the product listing in your form.

2-Using a modal

<fieldset name=”main”>
           …
        <container name=”products_btn”>
            <button name=”products”
                    component=”Magento_Ui/js/form/components/button”>
                <argument name=”data” xsi:type=”array”>
                    <item name=”config” xsi:type=”array”>
                        <item name=”label” xsi:type=”string” translate=”true”>
                            Select Products
                        </item>
                        <item name=”title” xsi:type=”string” translate=”true”>
                            Products
                        </item>
                        <item name=”displayAsLink” xsi:type=”boolean”>true</item>
                        <item name=”labelVisible” xsi:type=”boolean”>true</item>
                        <item name=”template” xsi:type=”string”>
                            ui/form/components/button/container
                        </item>
                        <item name=”actions” xsi:type=”array”>
                            <item name=”0″ xsi:type=”array”>
                                <item name=”targetName” xsi:type=”string”>
                                    my_form.my_form.products_model
                                </item>
                                <item name=”actionName” xsi:type=”string”>
                                    toggleModal
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </button>
        </container>

    </fieldset>

This will display a link for product selection

Now add the code for modal which will have our insertListing component

<fieldset name=”main”>
   …
    <container name=”products_btn”>
       …
    </container>
    <modal name=”products_model”>
        <argument name=”data” xsi:type=”array”>
            <item name=”config” xsi:type=”array”>
                <item name=”provider” xsi:type=”string”>
                    my_form.my_form_data_source
                </item>
                <item name=”onCancel” xsi:type=”string”>
                    actionDone
                </item>
                <item name=”options” xsi:type=”array”>
                    <item name=”title” xsi:type=”string”>
                        All Products
                    </item>
                    <item name=”buttons” xsi:type=”array”>
                        <item name=”0″ xsi:type=”array”>
                            <item name=”text” xsi:type=”string”>
                                Selected
                            </item>
                            <item name=”class” xsi:type=”string”>
                                action-primary
                            </item>
                            <item name=”actions” xsi:type=”array”>
                                <item name=”0″ xsi:type=”array”>
                                    <item name=”targetName” xsi:type=”string”>
                                        index = product_listing
                                    </item>
                                    <item name=”actionName” xsi:type=”string”>save</item>
                                </item>
                                <item name=”1″ xsi:type=”string”>
                                    closeModal
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
        <insertListing name=”product_listing” >
            <settings>
                <dataLinks>
                    <exports>false</exports>
                    <imports>true</imports>
                </dataLinks>
                <autoRender>true</autoRender>
                <selectionsProvider>
                    product_listing.product_listing.columns.ids
                </selectionsProvider>
                <dataScope>product_listing</dataScope>
                <ns>product_listing</ns>
            </settings>
        </insertListing>
    </modal>
</fieldset>

Now our modal with listing is ready.

Saving

On our save controller, we can get our selected rows of listing by using below code.

$this->getRequest()->getParam(‘namespace-of-your-listing’);

In our case the namespace was ‘product_listing’, so the code will be :-

$this->getRequest()->getParam(‘product_listing’);