Magento 2 Adminhtml espalhando formulários por várias guias


42

Estou tentando criar um módulo de back-end, em que na minha página de edição eu uso o admin-2column-leftlayout.

Quero ter um formulário em cada guia, mas não entendo como posso fazer isso.
Idealmente, eu gostaria de saber como atribuir um formulário diferente uiComponentsa diferentes guias, ou como posso definir um uiComponentpara o meu formulário, mas poder atribuir qual conjunto de campos vai para qual guia.

Minha situação específica, que provoca essa pergunta, é que eu quero ter um formulário padrão em uma guia (várias entradas de texto) e em outra guia, quero ter um dynamicRowscomponente de interface do usuário. Chamamos essas guias de itens principais e de linha.

Atualmente, estou implementando isso da seguinte maneira: Main é definido no _prepareFormmétodo dentro de seu bloco, que é uma extensão de classe Form\Generic. Este formulário aparece e funciona bem até eu adicionar as linhas dinâmicas.

Meu arquivo de layout possui código para adicionar a guia Principal e atribuir um bloco de conteúdo. Além disso, ele possui um contêiner chamado line_items, que contém um uiComponentpara o formulário que contém linhas dinâmicas.

A guia Itens de linha é criada no _beforeToHtmlmétodo de Widget\Tab, e seu conteúdo é atribuído usando uma chamada para getChildHtmlem um contêiner de line_items.

A guia funciona e é preenchida com a estrutura correta, permitindo adicionar e remover linhas.

O problema é que, quando envio a página, apenas as entradas na guia Itens de linha são enviadas.

Portanto, sei que não o configurei corretamente e preciso de alguma maneira de instruí-lo a rastrear e enviar todos os elementos do formulário. A maior parte dessa implementação deriva de minhas tentativas de fazer engenharia reversa na configuração do formulário Atributos do produto da categoria, que é semelhante ao que eu quero fazer.

Alguém tem idéia sobre isso?


Você já descobriu isso?
21718 jamil

11
Stephen - Estou assumindo que você encontrou uma solução depois de todo esse tempo? Em caso afirmativo, você pode atualizar isso com sua solução?
brentwpeterson

@ Stephen Fritz - Você poderia fornecer uma captura de tela, como está procurando?
Praful Rajput

Posso perguntar se esta pergunta ainda precisa de resposta? Nesse caso, posso verificar se entendi o problema: estamos tentando criar uma tela de back-end com formulários separados? ou uma tela com várias guias (moda uiComponent) é uma solução para esse problema?
Herve Tribouilloy

11
@ Stephen Fritz - Por favor, tente alterar o nome do fieldset, pois ele deve ser único e pode estar em conflito em outro lugar. Eu tenho o mesmo emitido e sua resolução mudando o nome do fieldset
Abdul Kadir 14/03

Respostas:


0

Use o código a seguir para criar guias com um único formulário usando o UI-Component

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

Crie um elemento de formulário

 <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 exibirá 2 guias no formulário com os campos de formulário associados.

Espero que esta solução funcione para você

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.