Magento 2 : Form component

Posted About 2 years ago. Visible to the public.

Adding searchable drop-down

Simply following steps to add searchable drop-down ui component in a form

1. Add element in form xml

<field name="rateselection" component="Vasan_Bidding/js/form/components/rate-select" 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 Rate</label>
                        <dataScope>rateselection</dataScope>
                        <componentType>field</componentType>
                        <listens>
                            <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
                        </listens>
                    </settings>
                    <formElements>
                        <select>
                            <settings>
                                <options class="Vasan\Bidding\Model\Stone\Config\Source\Rates"/>
                            </settings>
                        </select>
                    </formElements>
                </field>

vasan
Last edit
About 2 years ago
vasan
Keywords
searchable, drop-down, Select, Magento, 2, Form
Posted by vasan to vasan's deck (2022-04-05 17:11)