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: enter image description here


Yes you can

Define the options you need to display

<item name="options" xsi:type="object">Namespace\Modulename\Model\Config\Source\Options</item>

Rest Magento will handle Full code

<field name="field_name">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Namespace\Modulename\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Field Name</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">field_name</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="listens" xsi:type="array">
                <item name="newOption" xsi:type="string">toggleOptionSelected</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="source" xsi:type="string">conditions</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
  • thanks for your super quick response! :) Now I am wondering where to exactly put mentioned by you lines of xml code. My first thought is to extend one of ui_component in Magento_Catalog directory. But I am pretty new with magento, so I am not sure. Thanks in advance! – Rob Aug 9 '17 at 13:43
  • You need to display this in your ui_component form xml file. – Priyank Aug 9 '17 at 13:44
  • I am adding this as an eav attribute for Product Entity (InstallData), so I don't have any ui_component form specified for it. After setup:upgrade, the new attribute was added to the product page automatically with specified input type. – Rob Aug 10 '17 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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