Magento – How to use Product Chooser Widget with UI Component Form

adminformmagento2product-chooseruicomponentwidget

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.

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?

Best Answer

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();
    }
Related Topic