How to Add Multi Select UI Dropdown in UI Form in Magento 2
In this tutorial, I will guide you through the process of adding a multi-select UI dropdown to a custom module’s UI form in Magento 2. Magento 2 offers a built-in feature for creating multi-select UI dropdowns, which allows for displaying data in a tree structure and includes a search function, as demonstrated in the product edit form’s categories dropdown. However, if you need to include a multi-select UI dropdown in a custom module’s UI form, I will provide a detailed explanation of the necessary steps to accomplish this task.
You may also like:
Procedure to add a Multi-Select UI Dropdown in a UI Form In Magento 2
Step 1
Assuming that you have already created a module with a UI form, this article can guide you on how to add the following code to it. Specifically, the code should be placed in the “app/code/GDBlogger/DemoModule/view/adminhtml/ui_component/custom_form.xml” file of your project.
However, if you haven’t created the UI form yet, you can follow the steps provided in the linked article.
Code of custom_form.xml
<field name="options_list"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">GDBlogger\DemoModule\Model\Source\Options</item> <item name="config" xsi:type="array"> <item name="additionalClasses" xsi:type="string">required</item> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Custom Options List</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">options_list</item> <item name="filterOptions" xsi:type="boolean">true</item> <item name="showCheckbox" xsi:type="boolean">true</item> <item name="disableLabel" xsi:type="boolean">true</item> <item name="multiple" xsi:type="boolean">true</item> <item name="levelsVisibility" xsi:type="number">1</item> <item name="sortOrder" xsi:type="number">70</item> <item name="required" xsi:type="boolean">true</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> </item> <item name="listens" xsi:type="array"> <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item> </item> </item> </argument> </field>
Step 2
After completing the previous steps, you will need to create a file named “Options.php” in order to add options to the UI dropdown. This file should be created in the “app/code/GDBlogger/DemoModule/Model/Source/” directory and the following code should be pasted inside it.
Code of Options.php
<?php namespace GDBlogger\DemoModule\Model\Source; use Magento\Framework\Data\OptionSourceInterface; class Options implements OptionSourceInterface { protected $attributeOptionsList = []; /** * @return array */ public function toOptionArray() { $this->attributeOptionsList = [ [ 'value' => "Parent Option", "label" => "Parent Option", "__disableTmpl" => 1, "optgroup" => [ [ 'value' => "Child Option", "label" => "Child Option", "__disableTmpl" => 1, ], ], ], ]; return $this->attributeOptionsList; } }
You can change the options structure according to yours.
Step 3
Now run the command to clean the cache,
Php bin/magento cache:clean
After this reload your page and you can check the multi-select dropdown in your form.
This blog explains how to add a multi-select dropdown in a UI form in Magento 2. If you have any questions or need further information, please leave a comment and I will respond with a solution.