Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    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:

    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.

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close