How to Add Multi-select UI Dropdown in UI Form in Magento 2?

Mage Delight - October 02, 2020

In this tutorial, today we will explain how to add a multi-select UI dropdown in UI form in Magento 2. Magento 2 offers a multi-select UI dropdown to display data with tree structure and search functionality. The product edit form can be found in categories dropdown.

How to Add Magento 2 Multi-select UI Dropdown in UI Form?

If there is a requirement of adding a multi-select UI dropdown in the custom module UI form, here is a guide to doing the same.

How to Add Magento 2 Multi-select UI Dropdown in UI Form?

Follow below steps to add multi-select UI dropdown in UI form in magento 2.

Step 1. Prepare Your Module with a UI Form

First of all, we assume that you have a pre-developed module with UI form. If you are looking for steps on how to develop UI form, this article can help you.

Step 2. Add Custom Code to the UI Form

Post that, add the below code in the UI form. We added this code in the app/code/MageDelight/Helloworld/view/adminhtml/ui_component/custom_form.xml file. You need to add this code in your UI file:

<!--

-->
<field name="custom_options_list">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">MageDelight\Helloworld\Model\Source\CustOptions</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">custom_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 3. Create a Custom Options Source File

After this, Create CustOptions.php file to add options in UI drop-down. Create file at app/code/MageDelight/Helloworld/Model/Source/ and paste the below code:

<?php

namespace MageDelight\Helloworld\Model\Source;

use Magento\Framework\Data\OptionSourceInterface;

class AttributeListOptions implements OptionSourceInterface
{

    protected $attributeOptionsList = [];

    /**
     * @return array
     */
    public function toOptionArray()
    {
        $this->attributeOptionsList = [
            [
                'value' => "Test 1",
                "label" => "Test 1",
                "__disableTmpl" => 1,
                "optgroup" => [
                    [
                        'value' => "Test 1.1",
                        "label" => "Test 1.1",
                        "__disableTmpl" => 1,
                    ],
                ],
            ],
        ];
        return $this->attributeOptionsList;
    }
}

You need to create an array structure like this as mention in the above file.