13

I am trying to place the category input for my custom form using uicomponent form.

enter image description here

I am able to create dropdown but how I can create the button and open a new modal from it?

Can I create a button using uicomponent and open a modal from it. I want a button instead of new category I want to add select products button and want to add show list of products from selected categories in grid.

Here is the xml for creating the category input

<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>
            <item name="listens" xsi:type="array">
                  <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
             </item>
      </item>
     </argument>
</field>
  • Until I can understand what's in there and maybe come up with an answer, I can recommend you to take a look at Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Categories class. It is the one that adds the category tree selector to the product add/edit screen. Maybe you have more luck understanding what's in there. – Marius Nov 28 '16 at 7:21
  • @Marius Ya looking at same thing looks thats the best way to do it. – Priyank Nov 29 '16 at 4:38
  • Hey I think adding modifiers is used only for product form and its very difficult to add it for custom model after looking it for about 3 days I have gone nuts. I just get Invalid UI Component element name: 'category_mapping_form' – Priyank Dec 1 '16 at 5:33
  • How are the selected options work here? – Amrit Pal Singh Dec 7 '18 at 13:38
3

This code below working with me:

     <container>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="formElement" xsi:type="string">container</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
        </item>
        </argument>
        <field name="category_ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="chipsEnabled" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string">Categories</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="options" xsi:type="array">
                            <item name="0" xsi:type="array">
                                <item name="value" xsi:type="number">1</item>
                                <item name="label" xsi:type="string" translate="true">Category 1</item>
                                <item name="optgroup" xsi:type="array">
                                    <item name="0" xsi:type="array">
                                        <item name="value" xsi:type="number">2</item>
                                        <item name="is_active" xsi:type="boolean">true</item>
                                        <item name="label" xsi:type="string" translate="true">Category 1.1</item>
                                    </item>
                                </item>
                            </item>
                            <item name="1" xsi:type="array">
                                <item name="value" xsi:type="number">2</item>
                                <item name="is_active" xsi:type="boolean">true</item>
                                <item name="label" xsi:type="string" translate="true">Category 2</item>
                            </item>
                    </item>
                   <item name="config" xsi:type="array">
                       <item name="dataScope" xsi:type="string">category_ids</item>
                   </item>
                </item>
            </argument>
        </field>
    </container>

This is result:

Demo

Note: With item options you should change xsi:type="object" and declare a Class for it.

I hope it was helpful !

  • 1
    my concern is not how I should create the tree. My Question is to create a button beside the drop down as shown in my screen shot and open a modal from it and to show list of products grid in it. – Priyank Dec 2 '16 at 9:39
  • How to get selected options in this ? – Amrit Pal Singh Dec 13 '18 at 5:40

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.