Magento 2 Adminhtml distribuye formularios en varias pestañas

Estoy tratando de crear un módulo de back-end, en el que en mi página de edición uso el admin-2column-leftdiseño.

Quiero tener un formulario en cada pestaña, pero no entiendo cómo puedo hacer esto.
Idealmente, me gustaría saber cómo asignar diferentes formularios uiComponentsa diferentes pestañas, o cómo puedo definir uno uiComponentpara mi formulario, pero poder asignar qué conjunto de campos va en cada pestaña.

Mi situación específica, que provoca esta pregunta, es que quiero tener un formulario estándar en una pestaña (múltiples entradas de texto), y en otra pestaña, quiero tener un dynamicRowscomponente de interfaz de usuario. Hemos llamado a estas pestañas Main y Line Items.

Actualmente, estoy implementando esto de la siguiente manera: Main se define en el _prepareFormmétodo dentro de su bloque, que es una extensión de clase Form\Generic. Este formulario aparece y funciona bien hasta que agregue las filas dinámicas.

Mi archivo de diseño tiene código para agregar la pestaña Principal y asignar bloque de contenido. También tiene un contenedor llamado line_items, que contiene un uiComponentpara el formulario que contiene filas dinámicas.

La pestaña Elementos de línea se crea en el _beforeToHtmlmétodo de Widget\Tab, y su contenido se asigna mediante una llamada a getChildHtmlun contenedor line_items.

La pestaña funciona y se completa con la estructura correcta, lo que me permite agregar y eliminar filas.

El problema es que cuando envío la página, solo se envían las entradas en la pestaña Elementos de línea.

Así que sé que no lo configuré correctamente y necesito alguna forma de indicarle que realice un seguimiento y envíe todos los elementos del formulario. La mayor parte de esta implementación se deriva de mis intentos de aplicar ingeniería inversa a la configuración del formulario de Atributos del producto de categoría, que es similar a lo que quiero hacer.

Alguien tiene idea al respecto?

— Stephen Fritz
fuente

¿Alguna vez resolviste esto?

— jamil

Stephen: ¿Asumo que has encontrado una solución después de todo este tiempo? Si es así, ¿puede actualizar esto con su solución?

— brentwpeterson

@Stephen Fritz: ¿podría proporcionar una captura de pantalla, cómo lo busca?

— Praful Rajput

¿Puedo preguntar si esta pregunta aún necesita una respuesta? Si es así, podría verificar que entiendo el problema: ¿estamos tratando de construir una pantalla de fondo con formularios separados? ¿o es una pantalla con múltiples pestañas (uiComponent fashion) una solución a este problema?

— Herve Tribouilloy

@stephen Fritz: intente cambiar el nombre del conjunto de campos porque debe ser único, ya que puede estar en conflicto en otro lugar. He emitido lo mismo y su solución al cambiar el nombre del campo

— Abdul Kadir

Use el siguiente código para crear pestañas con una sola forma usando el componente UI

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">custom_form.custom_form_data_source</item>
        <!--This is for tab -->
        <item name="deps" xsi:type="string">custom_form.custom_form_data_source</item>
    </item>

    <!--following tag add the tab into form-->
    <item name="label" xsi:type="string" translate="true">Test Details</item>
    <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
   <item name="layout" xsi:type="array">
        <item name="type" xsi:type="string">tabs</item>
        <item name="navContainerName" xsi:type="string">left</item>
    </item>

</argument>

Crear un elemento de formulario

 <fieldset name="general">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">General Information</item>
        </item>
    </argument>

    <field name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">general</item>
                <item name="label" xsi:type="string">Name</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="dataScope" xsi:type="string">name</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
 </fieldset>
 <fieldset name="address">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Address and Contact</item>
        </item>
    </argument>
    <field name="address_line1">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">address</item>
                <item name="label" xsi:type="string">Address Line1</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="datatype" xsi:type="string">text</item>
                <item name="datascope" xsi:type="string">address_line1</item>
            </item>
        </argument>
    </field>

    <field name="address_line2">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">address</item>
                <item name="label" xsi:type="string">Address Line2</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="datatype" xsi:type="string">text</item>
                <item name="datascope" xsi:type="string">address_line2</item>
            </item>
        </argument>
    </field>
  </fieldset>

Este código mostrará 2 pestañas en el formulario con los campos de formulario asociados.

Espero que esta solución funcione para ti

— Mitro
fuente