How to use Product Chooser Widget with UI Component Form

Question

I want to have a field in my UI Component form and a "Select Product..." Button where I can choose a product and it gets inserted into the input. Similar to the "Catalog Product Link" Widget.

Started by adding this to my ui_component form.xml but without desired result:

<fieldset name="assign_products" sortOrder="40">
    <settings>
        <collapsible>true</collapsible>
        <label translate="true">Products</label>
    </settings>
    <container name="assign_products_container" sortOrder="160">
        <htmlContent name="html_content">
            <block name="my_assigned_products" class="Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser">
                <arguments>
                    <argument name="button" xsi:type="array">
                        <item name="open" xsi:type="string" translate="true">Select Product...</item>
                    </argument>
                </arguments>
            </block>
        </htmlContent>
    </container>
</fieldset>

Any tips?

Answer 1

You can"t use widget block in uiform. It will not work, because it rendering differently as in widget form. But you can use this functionality creating form extending Magento\Backend\Block\Widget\Form\Generic But it is deprecated

Example

class Form extends \Magento\Backend\Block\Widget\Form\Generic
{  


    protected $_entityRepository;

    public function __construct(
        Context $context,
        Registry $registry,
        FormFactory $formFactory,      
        EntityRepositoryInterface $_entityRepository,
        array $data = []
    ) {
        $this->_entityRepository= $_entityRepository;
        parent::__construct($context, $registry, $formFactory, $data);
    }

    protected function _prepareForm()
    {
        $entityId = $this->_coreRegistry->registry('entity_id');
        if($entityId ){
            $entity = $this->_entityRepository->getById($entityId );
        }
        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create(
            ['data' => ['id' => 'edit_form', 'action' => $this->getData('action'), 'method' => 'post']]
        );

        $fieldset = $form->addFieldset('entity_details', ['legend' => __('EntityDetails')]);

        if ($entityId ) {
            $fieldset->addField('id', 'hidden', ['name' => 'id']);
        }

        $productChooser = $fieldset->addField(
            'product_id',
            'label',
            [
                'label' => __('Product'),
                'required' => true,
                'class' => 'widget-option',
                'visible' => '1',
                'name' => 'product_id',
                'value' => $entityId ?'product/'.$entity ->getProductId():''
            ]
        );
        $chooser = $this->_layout->createBlock('\Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser');
        $configChooser = [
            'button' => [
                'open' => __('Select Products'),
                'type' => '\Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser',
            ]
        ];
        $chooser->setConfig($configChooser)
            ->setFieldsetId('entity_details')
            ->prepareElementHtml($productChooser);

        $this->setForm($form);
        return parent::_prepareForm();
    }

Answer 2

You can try to use this Magento 2 module. https://github.com/graschik/magento-2-admin-ui/blob/master/docs/ui-components/entities-selector/README.md

Example:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    ...
    <fieldset>
        ...
        <component name="products" class="Grasch\AdminUi\Component\EntitiesSelector" component="Grasch_AdminUi/js/view/components/entities-selector">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Products</item>
                    <item name="namespace" xsi:type="string">product_listing</item>
                    <item name="columnsName" xsi:type="string">product_columns</item>
                    <item name="selectionsColumnName" xsi:type="string">ids</item>
                    <item name="grid" xsi:type="array">
                        <item name="columns" xsi:type="array">
                            <item name="id" xsi:type="array">
                                <item name="original_name" xsi:type="string">entity_id</item>
                                <item name="type" xsi:type="string">text</item>
                                <item name="label" xsi:type="string">ID</item>
                                <item name="sortOrder" xsi:type="number">10</item>
                                <item name="fit" xsi:type="boolean">true</item>
                            </item>
                            <item name="sku" xsi:type="array">
                                <item name="original_name" xsi:type="string">sku</item>
                                <item name="type" xsi:type="string">text</item>
                                <item name="label" xsi:type="string">SKU</item>
                                <item name="sortOrder" xsi:type="number">15</item>
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                            <item name="name" xsi:type="array">
                                <item name="original_name" xsi:type="string">name</item>
                                <item name="type" xsi:type="string">text</item>
                                <item name="label" xsi:type="string">Name</item>
                                <item name="sortOrder" xsi:type="number">20</item>
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                            <item name="thumbnail" xsi:type="array">
                                <item name="original_name" xsi:type="string">thumbnail_src</item>
                                <item name="type" xsi:type="string">thumbnail</item>
                                <item name="label" xsi:type="string">Thumbnail</item>
                                <item name="sortOrder" xsi:type="number">16</item>
                                <item name="fit" xsi:type="boolean">true</item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </component>
        ...
    </fieldset>
    ...
</form>