I am trying to use Magento 2 product add/edit form category tree structure in the custom form

I got some sol. from StackOverflow and some other websites

but it is not working properly

I have tried :

            'name' => 'category_ids',
            'title' => 'Category',
            'label' => 'Category'

    <css src="Magento_Catalog::catalog/category-selector.css"/>

this code and added this CSS in my custom form

but it is showing like this

enter image description here

but I need as same as product add/edit form

enter image description here

how can I do that

please share some suggestions.....

  • 1
    Hello @Yagendra, Did you find any solution? – Vinaya Maheshwari Jul 12 '17 at 12:19

If you are creating the form using ui component you can get category input from following xml

<field name="parent">
            <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">Parent 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">data.parent</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="showCheckbox" xsi:type="boolean">false</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    <item name="listens" xsi:type="array">
                        <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>

I am trying to figure how I can create a button and modal to it.


There is a multiselect solution below:

<field name="category_ids" component="Magento_Catalog/js/components/new-category" sortOrder="20" formElement="select">
    <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">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <rule name="required-entry" xsi:type="boolean">true</rule>
        <label translate="true">Categories</label>
            <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
                <options class="Magento\Catalog\Ui\Component\Product\Form\Categories\Options"/>
  • Is this possible to get this tree structure in PHP ? – Siranjeevi K S Jul 23 '20 at 15:35
  • You should try using options class: Magento\Catalog\Ui\Component\Product\Form\Categories\Options – Yonn Trimoreau Jul 24 '20 at 6:26

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.