2

I added form to admin modal with InsertForm UI component based on documentation. https://developer.adobe.com/commerce/frontend-core/ui-components/components/insert-form/

Unfortunately this not show the form buttons. If I change the InsertForm component's renderUrl param to mui/index/render_handle as writes the documentation, the form not show.

Vendor\OrderMap\view\adminhtml\ui_component\order_map_form.xml

<?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">order_map_form.order_map_form_data_source</item>
            <item name="deps" xsi:type="string">order_map_form.order_map_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Create invoice</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">order_map_form</item>
        </item>
    </argument>
    <dataSource name="order_map_form_data_source">
        <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>
        <settings>
            <submitUrl path="order_map/order/save"/>
        </settings>
        <dataProvider class="Vendor\OrderMap\Model\DataProvider" name="order_map_form_data_source">
            <settings>
                <requestFieldName>order_id</requestFieldName>
                <primaryFieldName>order_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

        <button name="modal_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="buttonClasses" xsi:type="string">order-map-button</item>
                    <item name="title" xsi:type="string">Open modal</item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.parentName}.timing_modal.license_plate_number_form_loader</item>
                            <item name="actionName" xsi:type="string">destroyInserted</item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.parentName}.timing_modal</item>
                            <item name="actionName" xsi:type="string">openModal</item>
                        </item>
                        <item name="2" xsi:type="array">
                            <item name="targetName" xsi:type="string">${ $.parentName}.timing_modal.license_plate_number_form_loader</item>
                            <item name="actionName" xsi:type="string">render</item>
                        </item>
                    </item>
                </item>
            </argument>
        </button>
    <modal name="timing_modal">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">

                <item name="options" xsi:type="array">
                    <item name="title" xsi:type="string">Delivery timing</item>
<!--                    <item name="buttons" xsi:type="array">-->
<!--                        <item name="0" xsi:type="array">-->
<!--                            <item name="text" xsi:type="string">Save</item>-->
<!--                            <item name="class" xsi:type="string">action-primary</item>-->
<!--                            <item name="actions" xsi:type="array">-->
<!--                                <item name="0" xsi:type="array">-->
<!--                                    <item name="targetName" xsi:type="string">index = license_plate_number_form</item>-->
<!--                                    <item name="actionName" xsi:type="string">save</item>-->
<!--                                </item>-->
<!--                            </item>-->
<!--                        </item>-->
<!--                    </item>-->
                </item>
            </item>
        </argument>

        <insertForm name="license_plate_number_form_loader">
            <settings>
                <formSubmitType>ajax</formSubmitType>
                <renderUrl path="mui/index/render">
                    <param name="handle">license_plate_number_form</param>
                    <param name="buttons">1</param>
                </renderUrl>

                <toolbarContainer>${ $.parentName }</toolbarContainer>
                <ns>license_plate_number_form</ns>
                <externalProvider>${ $.ns }.license_plate_number_form_data_source</externalProvider>
                <exports>
                    <link name="order_id">${ $.externalProvider }:data.order_id</link>
                </exports>
                <imports>
                    <link name="order_id">${ $.provider }:data.order_id</link>
                </imports>
            </settings>
        </insertForm>
        <field name="order_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">hidden</item>
                </item>
            </argument>
        </field>
    </modal>
</form>

Vendor\OrderMap\view\adminhtml\ui_component\license_plate_number_form.xml

<?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">license_plate_number_form.license_plate_number_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Assign delivery time</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>

        <item name="buttons" xsi:type="array">
            <item name="save" xsi:type="array">
                <item name="name" xsi:type="string">save</item>
                <item name="label" xsi:type="string" translate="true">Assign delivery time</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/save</item>
            </item>
        </item>
    </argument>
    <settings>
        <namespace>license_plate_number_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>license_plate_number_form.license_plate_number_form_data_source</dep>
        </deps>
    </settings>

    <dataSource name="license_plate_number_form_data_source">
        <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>
        <settings>
            <submitUrl path="order_map/order/save"/>
        </settings>
        <dataProvider class="Vendor\OrderMap\Model\DataProvider" name="license_plate_number_form_data_source">
            <settings>
                <requestFieldName>order_id</requestFieldName>
                <primaryFieldName>order_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    <fieldset name="general">
        <settings>
            <label/>
        </settings>
        <field name="order_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">hidden</item>
                </item>
            </argument>
        </field>

        <field name="license" formElement="select">
            <settings>
                <dataType>text</dataType>
                <label translate="true">License plate number</label>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Vendor\OrderMap\Model\Source\LicensePlateNumber"/>
                        <caption translate="true">-- Please Select --</caption>
                    </settings>
                </select>
            </formElements>
        </field>

        <field name="to_date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="formElement" xsi:type="string">date</item>
                    <item name="options" xsi:type="array">
                        <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                        <item name="timeFormat" xsi:type="string">hh:mm</item>
                        <item name="minDate" xsi:type="string">new Date()</item>
                    </item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Shipping date</label>
                <visible>true</visible>
                <dataScope>to_date</dataScope>
            </settings>
        </field>

    </fieldset>
</form>

If I uncommented the modal buttons option the modal button is show but after rendered the form the actions section show double.

enter image description here

Magento version is 2.4.6-p2

Anybody can you help me? Thank you!

2 Answers 2

1

When using mui/index/render_handle, which you absolutely should be using, otherwise you won't have access to your buttons, the handle param is not the same as the inserted form's name. That param should reference a layout file, even if that layout file isn't used for rendering the form otherwise.

In your case, you need to have a layout file like this: Vendor\OrderMap\view\adminhtml\layout\license_plate_number_form_page.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="license_plate_number_form"/>
        </referenceContainer>
    </body>
</page>

Only then will this work:

        <insertForm name="license_plate_number_form">
            <settings>
                <renderUrl path="mui/index/render_handle">
                    <param name="handle">license_plate_number_form_page</param>
                    <param name="buttons">1</param>
                </renderUrl>
            </settings>
        </insertForm>
0

With default render_url(mui/index/render) form will be without form buttons. To get Form with buttons, url must be changed to mui/index/render_handle and next GET parameters: buttons=1, so replace:

<renderUrl path="mui/index/render">
                    <param name="handle">license_plate_number_form</param>
                    <param name="buttons">1</param>
                </renderUrl>

with

 <renderUrl path="mui/index/render_url">
                <param name="handle">license_plate_number_form</param>
                <param name="buttons">1</param>
            </renderUrl>

and that should resolve it. Refer to render_url section here: https://developer.adobe.com/commerce/frontend-core/ui-components/components/insert-form/#options and

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.