Magento2 : How to set filter for an insert listing component while loading edit view form

Question

I want to display all contacts of a supplier on the supplier edit page.

For this, I use an insert listing component and I include the contact grid in a field set.

How can I use the supplier_id to show only the contacts of the current/selected supplier?

Much Appreciated your help, Thanks in Advance :)

Answer 1

I am assuming that your supplier's contact listing UI component file name is supplier_contacts_listing.xml

So in supplier_listing.xml, we import supplier_id from the current data source and pass it to the contact's grid source as a parameter.

<insertListing name="supplier_contacts">
    <settings>
        <dataLinks>
            <exports>false</exports>
            <imports>true</imports>
        </dataLinks>
        <autoRender>true</autoRender>
        <selectionsProvider>supplier_contacts_listing.supplier_contacts_listing.columns.ids</selectionsProvider>
        <externalProvider>supplier_contacts_listing.supplier_contacts_listing_data_source</externalProvider>
        <dataScope>supplier_contacts_listing</dataScope>
        <ns>supplier_contacts_listing</ns>
        <exports>
            <link name="supplier_id">${ $.externalProvider }:params.supplier_id</link>
        </exports>
        <imports>
            <link name="supplier_id">${ $.provider}:data.supplier_id</link>
        </imports>
    </settings>
</insertListing>

In di.xml define a class for contact's data provider.

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="supplier_contacts_listing.supplier_contacts_listing_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\Contacts\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Finally in Collection.php

namespace Vendor\Module\Model\ResourceModel\Contacts\Grid;


class Collection extends \Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult
{
    /**
     * @var ContextInterface
     */
    private $context;

    /**
     * ApplicableFilter constructor.
     * @param ContextInterface $context
     * @param \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory
     * @param \Psr\Log\LoggerInterface $logger
     * @param \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy
     * @param \Magento\Framework\Event\ManagerInterface $eventManager
     * @param string $mainTable
     * @param string $resourceModel
     * @param string $identifierName
     * @param null $connectionName
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory,
        \Psr\Log\LoggerInterface $logger,
        \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy,
        \Magento\Framework\Event\ManagerInterface $eventManager,
        $mainTable = "supplier_contacts",
        $resourceModel = "\Vendor\Module\Model\ResourceModel\Contacts",
        $identifierName = "entity_id",
        $connectionName = null
    ) {
        $this->context = $context;
        parent::__construct(
            $entityFactory,
            $logger,
            $fetchStrategy,
            $eventManager,
            $mainTable,
            $resourceModel,
            $identifierName,
            $connectionName
        );
    }

    protected function _initSelect()
    {
        parent::_initSelect();
        $supplier_id = $this->context->getRequestParam("supplier_id");

        if ($supplier_id) {
            $this->addFieldToFilter("supplier_id", $supplier_id);
        }
        return $this;
    }
}

Answer 2

In your form ui component:

<insertListing name="supplier_contacts">
    <settings>
        <dataLinks>
            <exports>false</exports>
            <imports>true</imports>
        </dataLinks>
        <autoRender>true</autoRender>
        <selectionsProvider>supplier_contacts_listing.supplier_contacts_listing.columns.ids</selectionsProvider>
        <externalProvider>supplier_contacts_listing.supplier_contacts_listing_data_source</externalProvider>
        <dataScope>supplier_contacts_listing</dataScope>
        <ns>supplier_contacts_listing</ns>
        <exports>
            <link name="supplier_id">${ $.externalProvider }:params.supplier_id</link> <!-- field_name of the external provider you want to filter by -->
        </exports>
        <imports>
            <link name="supplier_id">${ $.provider}:data.supplier_id</link> <!-- your form id field name goes here -->
        </imports>
    </settings>
</insertListing>

Then in your supplier_contacts_listing

<dataSource name="supplier_contacts_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <filterUrlParams>
                <param name="supplier_id">*</param> <!-- Make sure supplier_id is in the filterUrlParams -->
            </filterUrlParams>
            ...
            <updateUrl path="mui/index/render"/>
        </settings>
        ...
</dataSource>

Hope it helps