Home » Guide » Steps to Add Multi-select UI Dropdown in UI Form in Magento 2

Add multi-select UI Dropdown in UI form

Steps to Add Multi-select UI Dropdown in UI Form in Magento 2

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)
Loading IconLoading...

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. But 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.

Step 1:

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.

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 2:

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.

Now, Just need to clean the cache.

That’s it !!!

Output:

If you still need professional assistance with your Magento 2 Development, feel free to reach out.

Tags