admingridmagento2product-attributeuicomponent
I would like to add select-box with search/filter option. Is it possible, Magento ui-components provide this kind of functionality? If so, how to achieve this?
Now I am working with Product Entity – adding an attribute programmatically. A new attribute was added by InstallData setup class. Input and source were specified like this:
'input' => 'select',
'source' => 'Vendor\ModuleName\Model\Attribute\Source\Data'
Desirable effect:
Your ui component xml should have this added:
<column name="image" class="Your\Modulename\Ui\Component\Listing\Column\Thumbnail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="altField" xsi:type="string">title</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
</item>
</argument>
</column>
..and then in Your\Modulename\Ui\Component\Listing\Column\Thumbnail.php something similar to this:
<?php
namespace Your\Modulename\Ui\Component\Listing\Column;
use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;
class Thumbnail extends Column
{
const ALT_FIELD = 'title';
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param Image $imageHelper
* @param UrlInterface $urlBuilder
* @param StoreManagerInterface $storeManager
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
Image $imageHelper,
UrlInterface $urlBuilder,
StoreManagerInterface $storeManager,
array $components = [],
array $data = []
) {
$this->storeManager = $storeManager;
$this->imageHelper = $imageHelper;
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if(isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach($dataSource['data']['items'] as & $item) {
$url = '';
if($item[$fieldName] != '') {
$url = $this->storeManager->getStore()->getBaseUrl(
\Magento\Framework\UrlInterface::URL_TYPE_MEDIA
).'pathtoyourimage/'.$item[$fieldName];
}
$item[$fieldName . '_src'] = $url;
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'your_module/yourentity/edit',
['yourentity_id' => $item['yourentity_id']]
);
$item[$fieldName . '_orig_src'] = $url;
}
}
return $dataSource;
}
/**
* @param array $row
*
* @return null|string
*/
protected function getAlt($row)
{
$altField = $this->getData('config/altField') ?: self::ALT_FIELD;
return isset($row[$altField]) ? $row[$altField] : null;
}
}
I hope that helps!
Install Data
<?php
namespace Vendor\Module\Setup;
use Magento\Customer\Setup\CustomerSetupFactory;
use Magento\Customer\Model\Customer;
use Magento\Eav\Model\Entity\Attribute\Set as AttributeSet;
use Magento\Eav\Model\Entity\Attribute\SetFactory as AttributeSetFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
class InstallData implements InstallDataInterface
{
/**
* @var CustomerSetupFactory
*/
protected $customerSetupFactory;
/**
* @var AttributeSetFactory
*/
private $attributeSetFactory;
/**
* @param CustomerSetupFactory $customerSetupFactory
* @param AttributeSetFactory $attributeSetFactory
*/
public function __construct(
CustomerSetupFactory $customerSetupFactory,
AttributeSetFactory $attributeSetFactory
) {
$this->customerSetupFactory = $customerSetupFactory;
$this->attributeSetFactory = $attributeSetFactory;
}
public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
/** @var CustomerSetup $customerSetup */
$customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);
$customerEntity = $customerSetup->getEavConfig()->getEntityType('customer');
$attributeSetId = $customerEntity->getDefaultAttributeSetId();
/** @var $attributeSet AttributeSet */
$attributeSet = $this->attributeSetFactory->create();
$attributeGroupId = $attributeSet->getDefaultGroupId($attributeSetId);
$customerSetup->addAttribute(Customer::ENTITY, 'testfield', [
'type' => 'varchar',
'label' => 'Test Field',
'input' => 'select',
'required' => false,
'visible' => true,
'user_defined' => true,
'visible_on_front' => true,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
'source' => Vendor\Module\Model\Customer\Attribute\Source\Test,
'system' => 0,
]);
$attribute = $customerSetup->getEavConfig()->getAttribute(Customer::ENTITY, 'testfield')
->addData([
'attribute_set_id' => $attributeSetId,
'attribute_group_id' => $attributeGroupId,
'used_in_forms' => ['adminhtml_customer','customer_account_create','customer_account_edit','checkout_register'],
]);
$attribute->save();
}
}
Source Model
<?php
namespace Vendor\Module\Model\Customer\Attribute\Source;
class Test extends \Magento\Eav\Model\Entity\Attribute\Source\Table
{
public function getAllOptions()
{
$obj = \Magento\Framework\App\ObjectManager::getInstance();
$helper = $obj->create('Vendor\Module\Helper\Data');
$tags = $helper->getCollection();
foreach($tags as $tag){
$label = $tag->getTitle();
$value = $tag->getTagsId();
$option[] = array('label'=>$label,'value'=>$value);
}
$this->_options = $option;
return $this->_options;
}
}
Helper Data.php
protected $_tagsCollectionFactory;
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Vendor\Module\Model\ResourceModel\Tags\CollectionFactory $tagsCollectionFactory
) {
$this->_tagsCollectionFactory = $tagsCollectionFactory;
parent::__construct($context);
}
public function getCollection()
{
$collection = $this->_tagsCollectionFactory->create();
return $collection;
}
Note: Tags is for example. You can load your collection and return to getAllOptions function.
If your install data script successfully installed your custom attribute, now you just need to override addition information phtml file and set your custom attribute in that.
Create Vendor/Module/view/frontend/layout/customer_account_create.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="form.additional.info">
<block class="Magento\Framework\View\Element\Template" name="additional_info_customer" template="Vendor_Module::attribute.phtml"/>
</referenceContainer>
</body>
</page>
Create Vendor/Module/view/frontend/templates/attribute.phtml
<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
<legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Additional Information') ?></span></legend>
<p>
<div class="field regulation">
<label for="regulation" class="label"><span><?php /* @escapeNotVerified */
echo __('Test Field') ?></span></label>
<div class="control">
<input type="text" name="testfield" id="testfield" title="<?php /* @escapeNotVerified */ echo __('Test Field') ?>" class="input-text" data-validate="{required:false}">
</div>
</div>
</p>
</fieldset>
Best Answer
Yes you can
Define the options you need to display
Rest Magento will handle Full code