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:

• How to create module in magento 2
• How to create helper class in magento 2

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.