Magento 2 Adminhtml répandre des formulaires sur plusieurs onglets


42

J'essaie de créer un module backend dans lequel, sur ma page d'édition, j'utilise un admin-2column-leftlayout.

Je veux avoir un formulaire sur chaque onglet, mais je ne comprends pas comment je peux le faire.
Idéalement, je voudrais savoir comment affecter différents formulaires uiComponentsà différents onglets ou comment définir unuiComponent pour mon formulaire, tout en pouvant affecter quel groupe de champs est associé à quel onglet.

Ma situation spécifique, qui provoque cette question, est que je veux avoir un formulaire standard sur un onglet (plusieurs entrées de texte), et sur un autre onglet, je veux avoir un dynamicRowscomposant d'interface utilisateur. Nous avons appelé ces onglets Éléments principal et Ligne.

Actuellement, j'implémente ceci comme suit: Main est défini dans la _prepareFormméthode dans son bloc, qui est une extension de classe Form\Generic. Ce formulaire apparaît et fonctionne correctement jusqu'à ce que j'ajoute les lignes dynamiques.

Mon fichier de mise en page contient un code pour ajouter l'onglet Principal et affecter un bloc de contenu. En outre, il contient un conteneur nommé line_items, qui contient un uiComponentpour le formulaire contenant des lignes dynamiques.

L'onglet Éléments de campagne est créé dans la _beforeToHtmlméthode de Widget\Tab, et son contenu est attribué à l'aide d'un appel à getChildHtmlsur un conteneur line_items.

L'onglet fonctionne et contient la structure correcte, ce qui me permet d'ajouter et de supprimer des lignes.

Le problème est que lorsque je soumets la page, seules les entrées de l'onglet Postes sont soumises.

Je sais donc que je n’ai pas configuré cela correctement et que j’ai besoin d’un moyen de lui demander de suivre et de soumettre tous les éléments du formulaire. La plupart de cette implémentation est dérivée de mes tentatives de désossage de la configuration du formulaire Catégorie Product Attributes, similaire à ce que je souhaite faire.

Quelqu'un a une idée à ce sujet?


Avez-vous déjà compris cela?
Jamil

1
Stephen - Je suppose que vous avez trouvé une solution après tout ce temps? Si oui pouvez-vous s'il vous plaît mettre à jour ceci avec votre solution?
Brentwpeterson

@Stephen Fritz - Pourriez-vous s'il vous plaît fournir une capture d'écran que recherchez-vous?
Praful Rajput

Puis-je vous demander si cette question nécessite toujours une réponse? Si tel est le cas, je pourrais vérifier que je comprends le problème: essayons-nous de créer un écran d’arrière-plan contenant des formulaires distincts? ou un écran avec plusieurs onglets (mode uiComponent) est-il une solution à ce problème?
Hervé Tribouilloy

1
@stephen Fritz - S'il vous plaît essayez de changer le nom de fieldset car il doit être unique peut être son conflit ailleurs. J'ai même délivré et sa solution en changeant le nom de fieldset
Abdul Kadir

Réponses:


0

Utilisez le code suivant pour créer des onglets avec un seul formulaire à l'aide de 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>

Créer un élément de formulaire

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

Ce code affichera 2 onglets sur le formulaire avec les champs de formulaire associés.

J'espère que cette solution fonctionne pour vous

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.