Skip to content

MediaGalleryUi DataProvider

Gabriel da Gama edited this page Jun 15, 2020 · 1 revision

Functionality

MediaGalleryUi provides the UI implementation that allows the user to organize and manage their media assets on the server. This interface is accessible through the Content -> Media Gallery page, features like filters, pagination, and sorting are available to the user to facilitate the management of assets.

MediaGalleryUi Updates

Magento\MediaGalleryUi will use Magento\Framework\Api\SearchCriteria\CollectionProcessorInterface to process the SearchCriteria, we will replace the internal implementation that is using SelectModifierInterface as extension point for the DataProvider.

MediaGalleryUi Diagram

Changes required

In order to achieve the behavior described above we will need to:

  • Inject the Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory directly to our DataProvider in order to create the collection required on the SearchCriteria.
  • Inject the Magento\Framework\Api\SearchCriteria\CollectionProcessorInterface that will be responsible to process the SearchCriteria
  • Override the getSearchResult() method to create the collection and call the CollectionProcessorInterface with the collection and SearchCriteria.
  • Update the di.xml to introduce collection processors for Filters, Sorting, Pagination and Joins.

Extending MediaGalleryUi DataProvider

Magento\MediaGalleryUi will provide the CollectionProcessorInterface for Filters, Sorting, Pagination, and Joins and these will be the extension points for other modules to extend the DataProvider behavior. Follow below some examples:

Adding a new filter

To add a new filter we first need to create a new class that will handle the new filter, this class must implement the Magento\Framework\Api\SearchCriteria\CollectionProcessor\FilterProcessor\CustomFilterInterface interface, as shown below:

class Directory implements CustomFilterInterface
{
    /**
     * @inheritDoc
     */
    public function apply(Filter $filter, AbstractDb $collection)
    {
        $value = str_replace('%', '', $filter->getValue());
        $collection->getSelect()->where('path REGEXP ? ', '^' . $value . '/[^\/]*$');

        return true;
    }
}

After the class is created we need to add this new filter to the respective collection processor, using di.xml"

    <virtualType name="Magento\MediaGalleryUi\Model\Api\SearchCriteria\CollectionProcessor\FilterProcessor" type="Magento\Framework\Api\SearchCriteria\CollectionProcessor\FilterProcessor">
        <arguments>
            <argument name="customFilters" xsi:type="array">
                <item name="path" xsi:type="object">Magento\MediaGalleryUi\Model\SearchCriteria\CollectionProcessor\FilterProcessor\Directory</item>
            </argument>
        </arguments>
    </virtualType>

Adding a new join

Adding a new join to the collection processor is similar to adding a filter, but we need to implement a different interface, which is Magento\Framework\Api\SearchCriteria\CollectionProcessor\JoinProcessor\CustomJoinInterface, here is an example:

class IsLicensed implements CustomJoinInterface
{
    ...

    /**
     * @inheritDoc
     */
    public function apply(AbstractDb $collection)
    {
        $collection->getSelect()->joinLeft(
            ['asa' => $this->connection->getTableName(self::ADOBE_STOCK_ASSET_TABLE_NAME)],
            'asa.media_gallery_id = main_table.id',
            ['is_licensed']
        );
    }

}

Also after creating the class we will have to introduce our new custom join to the respective collection processor, using di.xml:

    <virtualType name="Magento\MediaGalleryUi\Model\Api\SearchCriteria\CollectionProcessor\JoinProcessor" type="Magento\Framework\Api\SearchCriteria\CollectionProcessor\JoinProcessor">
        <arguments>
            <argument name="customJoins" xsi:type="array">
                <item name="is_licensed" xsi:type="object">Magento\AdobeStockImageAdminUi\Model\SearchCriteria\CollectionProcessor\JoinProcessor\IsLicensed</item>
            </argument>
        </arguments>
    </virtualType>

More information

More information on how CollectionProcessorInterface works and how to use it as an extension point can be found here.

Clone this wiki locally