3

i have layout handle like frontname_index_index

<referenceContainer name="content">
   <container name="button.actions.container" label="Container">
     all button action here .. such as save, back reset  
   </container>
   <container name="form" label="Form"><!-- this modal form -->
    <block class="Namespace\Module\Block\Adminhtml\FormWrap\Form" >
       <uiComponent name="ui_form"/>
     </block>
   </container>
</referenceContainer>

Possible to use ui modifiers to add dynamic button to specific spot? When i pressed button it will open modal ui_form ability save , edit like normal form

3
  • 1
    You tried to use vendor/magento/module-ui/view/base/web/js/form/components/insert-form.js component? Aug 23, 2016 at 10:26
  • Could you add my Skype: thaopvp. We will discussion about it.
    – LinoPham
    Aug 23, 2016 at 10:30
  • Thanks all your response! I will give it a try and come back with the results.
    – mrtuvn
    Aug 24, 2016 at 9:26

1 Answer 1

6

[UPDATED MY ANSWER]
etc/adminhtml/di.xml
Add modifier to add custom form modal

<virtualType name="Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="item-form-modal" xsi:type="array">
                <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Item</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
    </arguments>
</virtualType>

Button action for render modal

return [
        'label' => __('Add New Item'),
        'class' => 'primary button-add-item',
        'data_attribute' => [
            'mage-init' => [
                'Magento_Ui/js/form/button-adapter' => [
                    'actions' => [
                        [
                            'targetName' => 'item_form.item_form.item_form_modal',
                            'actionName' => 'toggleModal'
                        ],
                        [
                            'targetName' => 'item_form.item_form.item_form_modal.insert_item_form',
                            'actionName' => 'render'
                        ]
                    ]
                ]
            ]
        ],
        'on_click' => '',
        'sort_order' => 20
    ];
}


File Modifier where i defination form

return $this->arrayManager->set(
        'item_form_modal',
        $meta,
        [
            'arguments' => [
                'data' => [
                    'config' => [
                        'isTemplate' => false,
                        'componentType' => 'modal',
                        'options' => [
                            'title' => __('New Item'),
                        ],
                        'imports' => [
                            'state' => '!index=insert_item_form:responseStatus'
                        ],
                    ],
                ],
            ],
            'children' => [
                'insert_item_form' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'label' => '',
                                'componentType' => 'container',
                                'component' => 'Magento_Ui/js/form/components/insert-form',
                                'dataScope' => '',
                                'update_url' => $this->urlBuilder->getUrl('mui/index/render'),
                                'render_url' => $this->urlBuilder->getUrl(
                                    'mui/index/render_handle',
                                    [
                                        'handle' => 'megamenuadmin_item_form',
                                        'store' => $this->_storeManager->getStore()->getId(),
                                        'buttons' => 1
                                    ]
                                ),
                                'autoRender' => false,
                                'ns' => 'item_add_form',
                                'externalProvider' => 'item_add_form.item_add_form_data_source',
                                'toolbarContainer' => '${ $.parentName }',
                                'formSubmitType' => 'ajax',
                            ],
                        ],
                    ]
                ]
            ]
        ]
    );


item_form_modal has child element form ui insert_item_form insert via ajax. Handle layout megamenuadmin_item_form contain ui-form. Between children [] you can add any components such as: fieldsets, fields, selects, inputs v.v or ui-form like i do

layout megamenuadmin_item_form

 <page>
    <referenceContainer name="content">
     <uiComponent name="item_add_form"/>
   </referenceContainer>
 </page>

form ui-component item_add_form

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="deps" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="namespace" xsi:type="string">item_add_form</item>
    </item>
    <item name="buttons" xsi:type="array">
        <item name="cancel" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Cancel</item>
        <item name="save" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Save</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
    <item name="config" xsi:type="array">
        <item name="ajaxSaveType" xsi:type="string">simple</item>
    </item>
</argument>
<dataSource name="item_add_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Module\Model\Item\DataProvider</argument>
        <argument name="name" xsi:type="string">item_add_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">menu_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="url" path="megamenuadmin/item/save"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
    </argument>
</dataSource>
<fieldset name="filedset1">
    Fields go here
</fieldset>
<fieldset name="fieldset2">


</fieldset>
</form>
1
  • Sir Can you Explain the above code for me?
    – Asad Khan
    Mar 26, 2019 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.