Magento 2 Agregar entrada de renderizador de árbol de categoría con botón modal

Estoy tratando de colocar la entrada de categoría para mi formulario personalizado usando el formulario uicomponent.

Puedo crear un menú desplegable, pero ¿cómo puedo crear el botón y abrir un nuevo modal desde él?

¿Puedo crear un botón usando uicomponent y abrir un modal desde él? Quiero un botón en lugar de una nueva categoría. Deseo agregar el botón de seleccionar productos y agregar mostrar la lista de productos de las categorías seleccionadas en la cuadrícula.

Aquí está el xml para crear la entrada de categoría

<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>

— Priyank
fuente

Hasta que pueda entender lo que hay allí y tal vez encontrar una respuesta, puedo recomendarle que eche un vistazo a la Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Categoriesclase. Es el que agrega el selector de árbol de categorías a la pantalla de agregar / editar producto. Quizás tengas más suerte entendiendo lo que hay allí.

— Marius

@Marius Ya mirando lo mismo parece que esa es la mejor manera de hacerlo.

— Priyank

Oye, creo que agregar modificadores se usa solo para la forma del producto y es muy difícil agregarlo para un modelo personalizado después de buscarlo durante aproximadamente 3 días. Me he vuelto loco. Acabo de recibir el nombre del elemento del componente UI no válido: 'category_mapping_form'

— Priyank

¿Cómo funcionan las opciones seleccionadas aquí?

— Amrit Pal Singh

Este código a continuación trabaja conmigo:

     <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>

Este es el resultado:

Nota: Con las opciones de elementos, debe cambiar xsi:type="object"y declarar una Clase para ello.

Espero que haya sido de ayuda !

— Thao Pham
fuente

Mi preocupación no es cómo debo crear el árbol. Mi pregunta es crear un botón al lado del menú desplegable como se muestra en mi captura de pantalla y abrir un modal desde él y mostrar la lista de productos en ella.

— Priyank

¿Cómo obtener las opciones seleccionadas en esto?

— Amrit Pal Singh