Multiselect Ui field at admin product edit form in Magento 2 - Magesan

Multiselect Ui field at admin product edit form in Magento 2

Multiselect Ui field at admin product edit form in Magento 2

Create a file at Magesan/extension/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="newFields" xsi:type="array">
                    <item name="class" xsi:type="string">Magesan\Extension\Ui\DataProvider\Product\Form\Modifier\UiContent</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Create a file at path :- Magesan/Extension/Model/Source/UiContent.php

This file is responsible for returning options to the multiselect field.

<?php
 
namespace Magesan\Extension\Model\Source;
 
use Magento\Eav\Model\Entity\Attribute\Source\AbstractSource;
 
class UiContent extends AbstractSource
{
    public function getAllOptions()
    {
        $this->_options[] = ['label' => 'Hello', 'value' => 'hello'];
 
        return $this->_options;
    }
 
    public function toOptionArray()
    {
        return $this->getAllOptions();
    }
}
?>

Create a file at Magesan\Extension\Ui\DataProvider\Product\Form\Modifier\UiContent.php

<?php
 
namespace Magesan\Extension\Ui\DataProvider\Product\Form\Modifier;
 
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\MultiSelect;
use Magento\Ui\Component\Form\Field;
use Magesan\Extension\Model\Source\UiContent;
use Magento\Ui\Component\Form\Fieldset;
 
class UiContent extends AbstractModifier
{
 
    const CREATOR_ID = "creator_id";
 
    /**
     * @var UiContent
     */
    protected $uiContentList;
 
    /**
     * @var LocatorInterface
     */
    protected $locator;
 
    public function __construct(
        UiContent $uiContentList,
        LocatorInterface $locator
    ) {
        $this->uiContentList = $uiContentList;
        $this->locator       = $locator;
    }
 
    public function modifyMeta(array $meta)
    {
        $meta = array_replace_recursive(
            $meta,
            [
                'product-details' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'label' => __('Ui Content'),
                                'componentType' => Fieldset::NAME,
                                'dataScope'     => 'data.product',
                                'collapsible'   => false,
                                'sortOrder'     => 5,
                            ],
                        ],
                    ],
                    'children' => [
                        self::CREATOR_ID => $this->getUiComponent(),
                    ],
                ],
                'general' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'label' => __('Ui Content'),
                                'componentType' => Fieldset::NAME,
                                'dataScope'     => 'data.product',
                                'collapsible'   => false,
                                'sortOrder'     => 5,
                            ],
                        ],
                    ],
                    'children' => [
                        self::CREATOR_ID => $this->getUiComponent(),
                    ],
                ]
            ]
        );
 
        return $meta;
    }
 
    public function getUiComponent()
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Ui Content'),
                        'componentType' => Field::NAME,
                        'component'     => 'Magento_Catalog/js/components/new-category',
                        'elementTmpl'   => 'ui/grid/filters/elements/ui-select',
                        'levelsVisibility' => 1,
                        'disableLabel' => true,
                        'formElement'  => MultiSelect::NAME,
                        'dataScope'    => self::CREATOR_ID,
                        'chipsEnabled' => true,
                        'dataType'   => Text::NAME,
                        'sortOrder'  => 30,
                        'required'   => false,
                        'options'    => $this->getUiOptions()
                    ],
                ],
            ],
        ];
    }
 
    public function getUiOptions()
    {
        return $this->uiContentList->toOptionArray();
    }
 
    public function modifyData(array $data)
    {
        return $data;
    }
}

Happy Coding…

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>