0

How to change dropdown to multi-select in product page .Screenshot is attached below . enter image description here

Need to change the third drop-box to multi-select or checkbox

my product_form.xml is

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="fieldname">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Available Slots</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">200</item>
            </item>
        </argument>
        <container name="fieldname_container" >
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">160</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Today\Slot\Block\Adminhtml\Catalog\Product\Tabs\Demo</argument>
            </htmlContent>
        </container>
    </fieldset>
    <fieldset name="fieldname2">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">ADD/REMOVE SLOTS</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">1000</item>
            </item>
        </argument>
        <field name="customer_id"  formElement="select" component="Today_Slot/js/components/select-customer" >
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filterOptions" xsi:type="boolean">true</item>
                <item name="multiple" xsi:type="boolean">false</item>
                <item name="showCheckbox" xsi:type="boolean">true</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <item name="mapper" xsi:type="object">Today\Slot\Model\Mapper</item>
                <item name="sortOrder" xsi:type="number">5</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 Slot Type</label>
            <dataScope>data.customer</dataScope>
            <componentType>field</componentType>
            <listens>
                <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
            </listens>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="Today\Slot\Ui\Component\Create\Form\Customer\CustomerOptions"/>
                </settings>
            </select>
        </formElements>
    </field>
    <field name="order_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Today_Slot/js/components/select-order</item>
                <item name="label" xsi:type="string" translate="true">Select Dates</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="mapper" xsi:type="object">Today\Slot\Model\Mapper</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="source" xsi:type="string">order_id</item>
                <item name="sortOrder" xsi:type="number">6</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
        <settings>
            <dataScope>data.order_id</dataScope>
            <listens>
                <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
            </listens>
        </settings>
    </field>
    <field name="order_for">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Select Slots</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="sortOrder" xsi:type="number">7</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    </fieldset>
</form>
1

The Multiselect component provides the interface for a list or a data set. Multiselect allows selecting multiple items.

<form>
    ...
    <fieldset>
        ...
        <field name="multiselect_example" formElement="multiselect">
            <settings>
                <dataType>text</dataType>
                <label translate="true">Multiselect Example</label>
                <dataScope>multiselect_example</dataScope>
            </settings>
            <formElements>
                <multiselect>
                    <settings>
                        <options>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">1</item>
                                <item name="label" xsi:type="string">Option #1</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">2</item>
                                <item name="label" xsi:type="string">Option #2</item>
                            </option>
                            <option name="3" xsi:type="array">
                                <item name="value" xsi:type="string">3</item>
                                <item name="label" xsi:type="string">Option #3</item>
                            </option>
                        </options>
                    </settings>
                </multiselect>
            </formElements>
        </field>
        ...
    </fieldset>
    ...
</form>

You can find more explaination here... https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/ui-multiselect.html

|improve this answer|||||
0
    <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <listingToolbar name="listing_top">
    <filters name="listing_filters">
    <filterSelect name="private_group" provider="${ $.parentName }" component="Magento_Ui/js/form/element/ui-select" template="ui/grid/filters/elements/ui-select">
    <settings>
    <options class="Vendor\Module\Model\PrivateGroup\GroupList"/>
    <caption translate="true">Select...</caption>
    <label translate="true">Private Groups</label>
    <dataScope>private_group</dataScope>
    <imports>
    <link name="visible">componentType = column, index = ${ $.index }:visible</link>
    </imports>
    </settings>
    </filterSelect>
    </filters>
    </listingToolbar>
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
    <column name="private_group" class="Vendor\Module\Ui\Component\Listing\Column\Customer\Groups" sortOrder="100">
    <settings>
    <dataType>select</dataType>
    <sortable>false</sortable>
    <label translate="true">Private Groups</label>
    </settings>
    </column>
    </columns>
    </listing>

class file

    <?php
    namespace Vendor\Module\Model\PrivateGroup;

    class GroupList implements \Magento\Framework\Option\ArrayInterface
    {
        public function toOptionArray()
        {
            $options = [];
            $options[] = ['label' => 'VIP Group', 'value' => '1'];
            $options[] = ['label' => 'Premium Type', 'value' => '2'];
            return $options;
        }
    }
|improve this answer|||||
0

I have Added this for Categories you can change options to Yours

<field name="select_Categories">
   <argument name="data" xsi:type="array">
       <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
       <item name="config" xsi:type="array">
       <item name="componentType" xsi:type="string">field</item>
       <item name="formElement" xsi:type="string">select</item>
       <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
       <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
       <item name="dataScope" xsi:type="string">select_Categories</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="listens" xsi:type="array">
          <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
          </item>
       </item>
    </argument>
</field>
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.