5

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

3 Answers 3

9

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>
            <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>
            </item>
        </item>
    </argument>
</field>  
3
  • 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
    Commented Aug 9, 2017 at 13:43
  • You need to display this in your ui_component form xml file.
    – Priyank
    Commented Aug 9, 2017 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
    Commented Aug 10, 2017 at 11:44
3

After Magento 2.2 you can add a searchable dropdown using the below code.

 <field name="category" sortOrder="50" formElement="select">
    <argument name="data" xsi:type="array">
    <item name="options" xsi:type="object">Namespace\Modulename\Model\Source\Category</item>
    <item name="config" xsi:type="array">
        <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="filterOptions" xsi:type="boolean">true</item>
        <item name="showCheckbox" xsi:type="boolean">true</item>
        <item name="chipsEnabled" xsi:type="boolean">true</item>
        <item name="multiple" xsi:type="boolean">false</item>
        <item name="disableLabel" xsi:type="boolean">true</item>
    </item>
    </argument>
    <settings>
     <label translate="true">Category</label>
     <validation>
        <rule name="required-entry" xsi:type="boolean">true</rule>
     </validation>
    </settings>
</field>
0

Did anyone find solution? I am trying to add search filter in a custom form, with this code. Can anyone guide what am I missing here?

$baseFieldset->addField(
            'magento_id',
            'select',
            [
                'label' => __('Magento Product1'),
                'title' => __('Magento Product2'),
                'name' => 'magento_id',
                'required' => true,
                'options' => $Mage_Product
            ]
        );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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