3

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?

3

2 Answers 2

2

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.