2

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

Magento2 categories multiselect

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?

0

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>

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.