Magento – Magento 2: Add UI Multiselect Dropdown

category-treemagento2multiselect-attribute

How can I add categories multiselect (same as one used on product page – screen) to my custom module?

Edit:
Following @PrincePatel suggestion I have rewritten part of my code to use ui_component. The following code is working (though not doing what I am looking for) and displays grid with one column:

app/code/Patryk/Test/view/adminhtml/ui_component/patryk_test_config_categories.xml

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
  <argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
      <item name="provider" xsi:type="string">patryk_test_config_categories.patryk_test_config_listing_data_source</item>
      <item name="deps" xsi:type="string">patryk_test_config_categories.patryk_test_config_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">patryk_test_config_columns</item>
  </argument>
  <dataSource name="patryk_test_config_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
      <argument name="class" xsi:type="string">PatrykTestConfigGridDataProvider</argument>
      <argument name="name" xsi:type="string">patryk_test_config_listing_data_source</argument>
      <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
          <item name="update_url" xsi:type="url" path="mui/index/render"/>
        </item>
      </argument>
    </argument>
    <argument name="data" xsi:type="array">
      <item name="js_config" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
      </item>
    </argument>
  </dataSource>
  <columns name="patryk_test_config_columns">
    <column name="status">
      <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
          <item name="label" xsi:type="string" translate="true">status</item>
        </item>
      </argument>
    </column>
  </columns>
</listing>

I have tried to change listing to form and insert inside (like here), but it doesn't work (form is not showing and spinner keeps spinning forever). How to change the code to display categories selector? I don't need it to connect with any data, just display all categories and allow selection like on screen, because I am planning to handle this with JavaScript.

Edit2:
I have created empty data provider

namespace Patryk\Test\Model\ResourceModel\Config\Grid;

class Emptycollection extends \Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider
{
    public function getData(){
        return [];
    }
}

And custom_ui form

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">
  <argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
      <item name="provider" xsi:type="string">patryk_test_config_categories2.patryk_test_config_categories2_data_source</item>
      <item name="deps" xsi:type="string">patryk_test_config_categories2.patryk_test_config_categories2_data_source</item>
    </item>
  </argument>
  <dataSource name="patryk_test_config_categories2_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
      <argument name="class" xsi:type="string">Patryk\Test\Model\ResourceModel\Config\Grid\Emptycollection</argument>
      <argument name="name" xsi:type="string">patryk_test_config_categories2_data_source</argument>
      <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
          <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
      </argument>
    </argument>
    <argument name="data" xsi:type="array">
      <item name="js_config" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
      </item>
    </argument>
  </dataSource>
  <fieldset name="sample_fieldset">
    <argument name="data" xsi:type="array">
      <item name="config" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Sample Fieldset</item>
      </item>
    </argument>
    <field name="status">
      <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
          <item name="sortOrder" xsi:type="number">10</item>
          <item name="dataType" xsi:type="string">boolean</item>
          <item name="formElement" xsi:type="string">checkbox</item>
          <item name="source" xsi:type="string">category</item>
          <item name="prefer" xsi:type="string">toggle</item>
          <item name="label" xsi:type="string" translate="true">Enable</item>
          <item name="valueMap" xsi:type="array">
            <item name="true" xsi:type="string">1</item>
            <item name="false" xsi:type="string">0</item>
          </item>
          <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">false</item>
          </item>
          <item name="default" xsi:type="string">1</item>
        </item>
      </argument>
    </field>
  </fieldset>
</form>

But it returns an error (simple pop-up alert saying Attention – Something went wrong.) without any further info in logs.

What am I doing wrong?

Best Answer

Try This

<field name="category_id">
            <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="label" xsi:type="string" translate="true">Category</item>
                    <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">category_id</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">30</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>

Related Solutions

Add Store Multiselect to Magento System Configuration

This goes in the system.xml under the fields tag.

<field_name_here translate="title" module="[module]">
    <label>Label goes here</label>
    <frontend_type>multiselect</frontend_type>
    <source_model>[module]/store</source_model>
    <sort_order>10</sort_order> <!-- feel free to change this value -->
    <show_in_default>1</show_in_default><!-- can be 0 or 1 -->
    <show_in_website>0</show_in_website><!-- can be 0 or 1 -->
    <show_in_store>0</show_in_store><!-- can be 0 or 1 -->
</field_name_here>

Then create the source model.
For that you need a class inside your module.

app/code/[codebool]/[Namespace]/[Module]/Model/Store.php with this code:

<?php
class [Namespace]_[Module]_Model_Store {
    public function toOptionArray() {
        return Mage::getSingleton('adminhtml/system_store')->getStoreValuesForForm(false, true);
    }
}

Replace in the code above the values between [] with the appropriate values and you are done.

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Best Answer

Related Solutions

Add Store Multiselect to Magento System Configuration

Magento 2 – How to Rewrite TierPrice Block

Related Topic