In this article, Today I will instruct on How to Add UI-select component with search filter in admin form Magento 2.
Using the below codes, you can Add An UI-select In Your Ui-Form With A Search Filter In Magento 2.
Step:1 First We will start with the field in your ui-form:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <field name="color" component="Dolphin_Customoptionextend/js/components/select-color" sortOrder="20" formElement="select"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filterOptions" xsi:type="boolean">true</item> <item name="multiple" xsi:type="boolean">false</item> <item name="showCheckbox" xsi:type="boolean">true</item> <item name="disableLabel" xsi:type="boolean">true</item> </item> </argument> <settings> <required>true</required> <validation> <rule name="required-entry" xsi:type="boolean">true</rule> </validation> <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl> <label translate="true">Select Color</label> <dataScope>data.color</dataScope> <componentType>field</componentType> <listens> <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link> </listens> </settings> <formElements> <select> <settings> <options class="Dolphin\Customoptionextend\Ui\Component\Form\Color\Options"/> </settings> </select> </formElements> </field> |
-
- component: The path to the component’s .js file in terms of RequireJS.(Dolphin_Customoptionextend/js/components/select-color)
- elementTmpl: The path to the .html template of the particular type of field (select).(ui/grid/filters/elements/ui-select)
- template: The path to the general field .html template.
- options: The array of the options to be displayed in the list for selection. (Dolphin\Customoptionextend\Ui\Component\Form\Color\Options)
Also like to Read: How to create UI Form and UI Grid in Magento 2?
Step:2 Now create component (Js) file to map the field’s value:
File: app/code/Dolphin/Customoptionextend/view/adminhtml/web/js/components/select-color.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | define([ 'Magento_Ui/js/form/element/ui-select' ], function (Select) { 'use strict'; return Select.extend({ /** * Parse data and set it to options. * * @param {Object} data - Response data object. * @returns {Object} */ setParsed: function (data) { var option = this.parseData(data); if (data.error) { return this; } this.options([]); this.setOption(option); this.set('newOption', option); }, /** * Normalize option object. * * @param {Object} data - Option object. * @returns {Object} */ parseData: function (data) { return { value: data.color.id, label: data.color.name }; } }); }); |
Step:3 Now create a file to get options(return array) to display in select:
File: app/code/Dolphin/Customoptionextend/Ui/Component/Form/Color/Options.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <?php namespace Dolphin\Customoptionextend\Ui\Component\Form\Color; use Magento\Framework\App\RequestInterface; use Magento\Framework\Data\OptionSourceInterface; use \Magento\Eav\Model\Config; class Options implements OptionSourceInterface { /** * @var RequestInterface */ protected $request; /** * @var Config */ protected $_eavConfig; /** * @param Config $eavConfig * @param RequestInterface $request */ public function __construct( Config $eavConfig, RequestInterface $request ) { $this->_eavConfig = $eavConfig; $this->request = $request; } /** * {@inheritdoc} */ public function toOptionArray() { $coloOptions = $this->getColorOption(); return $coloOptions; } protected function getColorOption() { $attribute = $this->_eavConfig->getAttribute('catalog_product', 'color');//color is a product attribute $options = $attribute->getSource()->getAllOptions(); return $options; } } |
Like to Read: Product Labels for Magento 2
Result:
I Hope, This instruction will be helpful for you.
If you have any difficulties regarding this blog, do consider them posting in the Comments section below!
I’m here to help.
Thank you!