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…