Read More
Read More
Menu Close

    Add ui-select with search filter in admin form magento2

    If in your application you want to add an ui-select in your ui-form with a search filter, then you can use following process:

    First you need to a field in your ui-form:

    <field name="customer" component="Webkul_Test/js/components/select-customer" sortOrder="20" formElement="select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filterOptions" xsi:type="boolean">true</item>//to add filter in select-ui
                <item name="multiple" xsi:type="boolean">false</item>//select multiple or not
                <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 Customer</label>//label to Field
            <dataScope>data.customer</dataScope>//To map
            <componentType>field</componentType>
            <listens>
                <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
            </listens>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="Webkul\Test\Ui\Component\Create\Form\Customer\Options"/>
                </settings>
            </select>
        </formElements>
    </field>

    Now create Js file to map the fields value:

    Webkul_Test/view/adminhtml/web/js/components/select-customer.js

    define([
        'Magento_Ui/js/form/element/ui-select'
    ], function (Select) {
        'use strict';
        return Select.extend({
            /**
             * Parse data and set it to options.
             *
             * @param {Object} data - Response data object.
             * @returns {Object}
             */
            setParsed: function (data) {
                var option = this.parseData(data);
                if (data.error) {
                    return this;
                }
                this.options([]);
                this.setOption(option);
                this.set('newOption', option);
            },
            /**
             * Normalize option object.
             *
             * @param {Object} data - Option object.
             * @returns {Object}
             */
            parseData: function (data) {
                return {
                    value: data.customer.entity_id,
                    label: data.customer.name
                };
            }
        });
    });
    

    Now create file to get options to display in select:

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Webkul\Test\Ui\Component\Create\Form\Customer\Options.php

    <?php
    namespace Webkul\Test\Ui\Component\Create\Form\Customer;
    
    use Magento\Framework\Data\OptionSourceInterface;
    use Magento\Customer\Model\ResourceModel\Customer\CollectionFactory as CustomerCollectionFactory;
    use Magento\Framework\App\RequestInterface;
    
    /**
     * Options tree for "Categories" field
     */
    class Options implements OptionSourceInterface
    {
        /**
         * @var \Magento\Customer\Model\ResourceModel\Customer\CollectionFactory
         */
        protected $customerCollectionFactory;
    
        /**
         * @var RequestInterface
         */
        protected $request;
    
        /**
         * @var array
         */
        protected $customerTree;
    
        /**
         * @param CustomerCollectionFactory $customerCollectionFactory
         * @param RequestInterface $request
         */
        public function __construct(
            CustomerCollectionFactory $customerCollectionFactory,
            RequestInterface $request
        ) {
            $this->customerCollectionFactory = $customerCollectionFactory;
            $this->request = $request;
        }
    
        /**
         * {@inheritdoc}
         */
        public function toOptionArray()
        {
            return $this->getCustomerTree();
        }
    
        /**
         * Retrieve categories tree
         *
         * @return array
         */
        protected function getCustomerTree()
        {
            if ($this->customerTree === null) {
                $collection = $this->customerCollectionFactory->create();
    
                $collection->addNameToSelect();
    
                foreach ($collection as $customer) {
                    $customerId = $customer->getEntityId();
                    if (!isset($customerById[$customerId])) {
                        $customerById[$customerId] = [
                            'value' => $customerId
                        ];
                    }
                    $customerById[$customerId]['label'] = $customer->getName();
                }
                $this->customerTree = $customerById;
            }
            return $this->customerTree;
        }
    }
    

    After this a select-ui with search filter will be displayed on your form.

     

    Hope, this will help you to implement your functionality.

    Thank you.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top