I'm trying to create a custom form on the frontend of a Magento 2 site. I need to use the dynamicRows ui component in the form. I've created a custom module for this and set up my xml file at

Vendor\Module\Quote\view\frontend\ui_component\quote_multielement_index.xml

for the form as follows:

    <?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">quote_multielement_index.multielement_form_data_source</item>
                            <item name="deps" xsi:type="string">quote_multielement_index.multielement_form_data_source</item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Multi-Element Quote</item>
                    <item name="config" xsi:type="array">
                            <item name="dataScope" xsi:type="string">data</item>
                            <item name="namespace" xsi:type="string">quote_multielement_index</item>
                    </item>
                    <item name="template" xsi:type="string">templates/form/collapsible</item>
                    <item name="buttons" xsi:type="array">
                            <item name="save" xsi:type="string">Vendor\Module\Block\Edit\SaveButton</item>
                    </item>
            </argument>
            <dataSource name="multielement_form_data_source">
                    <argument name="dataProvider" xsi:type="configurableObject">
                            <argument name="class" xsi:type="string">Vendor\Module\Model\Quote\DataProvider</argument>
                            <argument name="name" xsi:type="string">multielement_form_data_source</argument>
                            <argument name="primaryFieldName" xsi:type="string">qid</argument>
                            <argument name="requestFieldName" xsi:type="string">qid</argument>
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="submit_url" xsi:type="url" path="quote/multielement/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="general">
                    <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                    <item name="label" xsi:type="string" translate="true"></item>
                                    <item name="sortOrder" xsi:type="number">18</item>
                                    <item name="additionalClasses" xsi:type="string">front-form</item>
                            </item>
                    </argument>        
                    <field name="qid">
                            <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">input</item>
                                            <item name="source" xsi:type="string">qid</item>
                                            <item name="dataScope" xsi:type="string">qid</item>
                                    </item>
                            </argument>
                    </field>        
                    <field name="contact_name">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Contact Name</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">title</item>
                                            <item name="sortOrder" xsi:type="number">19</item>
                                            <item name="dataScope" xsi:type="string">contact_name</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                    </item>
                            </argument>
                    </field>
                    <field name="company_name">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Company Name</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">company_name</item>
                                            <item name="sortOrder" xsi:type="number">20</item>
                                            <item name="dataScope" xsi:type="string">company_name</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                    </item>
                            </argument>
                    </field>
                    <field name="address_1">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Address Line 1</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">address_1</item>
                                            <item name="sortOrder" xsi:type="number">21</item>
                                            <item name="dataScope" xsi:type="string">address_1</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="address_2">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Address Line 2</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">address_2</item>
                                            <item name="sortOrder" xsi:type="number">22</item>
                                            <item name="dataScope" xsi:type="string">address_2</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">false</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="citystatezip">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">City, State, Postal code</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">citystatezip</item>
                                            <item name="sortOrder" xsi:type="number">23</item>
                                            <item name="dataScope" xsi:type="string">citystatezip</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="country">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="label" xsi:type="string">Country</item>
                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="formElement" xsi:type="string">select</item>
                                            <item name="validation" xsi:type="array">
                                                    <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                            <item name="sortOrder" xsi:type="number">24</item>
                                            <item name="dataScope" xsi:type="string">country</item>
                                    </item>
                                    <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item>
                            </argument>
                    </field>
                    <field name="phone">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Phone</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">phone</item>
                                            <item name="sortOrder" xsi:type="number">25</item>
                                            <item name="dataScope" xsi:type="string">phone</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="fax">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Fax</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">fax</item>
                                            <item name="sortOrder" xsi:type="number">26</item>
                                            <item name="dataScope" xsi:type="string">fax</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">false</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="email">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Email</item>
                                            <item name="formElement" xsi:type="string">email</item>
                                            <item name="source" xsi:type="string">email</item>
                                            <item name="sortOrder" xsi:type="number">27</item>
                                            <item name="dataScope" xsi:type="string">email</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                                <item name="validate-email" xsi:type="string">true</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <container name="items">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="label" xsi:type="string" translate="true">Elements</item>
                                <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
                                <item name="template" xsi:type="string">ui/dynamic-rows/templates/default</item>
                                <item name="componentType" xsi:type="string">dynamicRows</item>
                                <item name="additionalClasses" xsi:type="string">align-top</item>
                                <item name="recordTemplate" xsi:type="string">record</item>
                                <item name="deleteButtonLabel" xsi:type="string">Remove</item>
                                <item name="addButtonLabel" xsi:type="string">Add Another</item>
                                <item name="deleteProperty" xsi:type="boolean">false</item>
                                <item name="dndConfig" xsi:type="array">
                                    <item name="enabled" xsi:type="boolean">false</item>
                                </item>
                            </item>
                        </argument>
                        <container name="record">
                            <argument name="data" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
                                    <item name="isTemplate" xsi:type="boolean">true</item>
                                    <item name="is_collection" xsi:type="boolean">true</item>
                                    <item name="showFallbackReset" xsi:type="boolean">false</item>
                                    <item name="dataScope" xsi:type="string">blocks</item>
                                </item>
                            </argument>
                            <field name="item">
                                    <argument name="data" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                    <item name="dataType" xsi:type="string">text</item>
                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                                    <item name="template" xsi:type="string">ui/form/element/select</item>
                                                    <item name="label" xsi:type="string" translate="true">Element, speciation or isotope</item>
                                                    <item name="formElement" xsi:type="string">select</item>
                                                    <item name="source" xsi:type="string">item</item>
                                                    <item name="sortOrder" xsi:type="number">28</item>
                                                    <item name="dataScope" xsi:type="string">item</item>
                                                    <item name="validation" xsi:type="array">
                                                        <item name="required-entry" xsi:type="boolean">false</item>
                                                    </item>
                                        </item>
                                        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Elements</item>
                                    </argument>
                            </field>
                            <field name="concentration">
                                    <argument name="data" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                    <item name="dataType" xsi:type="string">text</item>
                                                    <item name="label" xsi:type="string" translate="true">Concentration</item>
                                                    <item name="template" xsi:type="string">ui/form/element/input</item>
                                                    <item name="formElement" xsi:type="string">input</item>
                                                    <item name="source" xsi:type="string">concentration</item>
                                                    <item name="sortOrder" xsi:type="number">29</item>
                                                    <item name="dataScope" xsi:type="string">concentration</item>
                                                    <item name="validation" xsi:type="array">
                                                        <item name="required-entry" xsi:type="boolean">false</item>
                                                    </item>
                                        </item>
                                    </argument>
                            </field>
                            <field name="unit">
                                    <argument name="data" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                    <item name="dataType" xsi:type="string">text</item>
                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                                    <item name="template" xsi:type="string">ui/form/element/select</item>
                                                    <item name="label" xsi:type="string" translate="true">Unit</item>
                                                    <item name="formElement" xsi:type="string">select</item>
                                                    <item name="source" xsi:type="string">unit</item>
                                                    <item name="sortOrder" xsi:type="number">30</item>
                                                    <item name="dataScope" xsi:type="string">unit</item>
                                                    <item name="validation" xsi:type="array">
                                                        <item name="required-entry" xsi:type="boolean">false</item>
                                                    </item>
                                        </item>
                                        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Units</item>
                                    </argument>
                            </field>
                            <actionDelete>
                                <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentType" xsi:type="string">actionDelete</item>
                                        <item name="dataType" xsi:type="string">text</item>
                                        <item name="fit" xsi:type="boolean">false</item>
                                        <item name="label" xsi:type="string">Actions</item>
                                        <item name="sortOrder" xsi:type="string">100</item>
                                        <item name="additionalClasses" xsi:type="string">data-grid-actions-cell product-item-btn secondary</item>
                                        <item name="template" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
                                    </item>
                                </argument>
                            </actionDelete>
                        </container>
                    </container>
                    <field name="matrix">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Matrix</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">matrix</item>
                                            <item name="sortOrder" xsi:type="number">31</item>
                                            <item name="dataScope" xsi:type="string">matrix</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="volume">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                            <item name="label" xsi:type="string" translate="true">Volume</item>
                                            <item name="formElement" xsi:type="string">select</item>
                                            <item name="source" xsi:type="string">volume</item>
                                            <item name="sortOrder" xsi:type="number">32</item>
                                            <item name="dataScope" xsi:type="string">volume</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                </item>
                                <item name="options" xsi:type="object">Vendor\Module\Model\Source\Volume</item>
                            </argument>
                    </field>
                    <field name="quantity">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="label" xsi:type="string" translate="true">Quantity</item>
                                            <item name="formElement" xsi:type="string">input</item>
                                            <item name="source" xsi:type="string">quantity</item>
                                            <item name="sortOrder" xsi:type="number">33</item>
                                            <item name="dataScope" xsi:type="string">quantity</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">true</item>
                                            </item>
                                            <item name="default" xsi:type="number">1</item>
                                </item>
                            </argument>
                    </field>
                    <field name="comments">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">text</item>
                                            <item name="cols" xsi:type="number">20</item>
                                            <item name="rows" xsi:type="number">4</item>
                                            <item name="label" xsi:type="string" translate="true">Additional Comments</item>
                                            <item name="additionalClasses" xsi:type="string">align-top</item>
                                            <item name="formElement" xsi:type="string">textarea</item>
                                            <item name="source" xsi:type="string">comments</item>
                                            <item name="sortOrder" xsi:type="number">34</item>
                                            <item name="dataScope" xsi:type="string">comments</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">false</item>
                                            </item>
                                </item>
                            </argument>
                    </field>
                    <field name="second_source">
                            <argument name="data" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                            <item name="dataType" xsi:type="string">boolean</item>
                                            <item name="checked" xsi:type="boolean">false</item>
                                            <item name="label" xsi:type="string" translate="true">Second source?</item>
                                            <item name="formElement" xsi:type="string">checkbox</item>
                                            <item name="prefer" xsi:type="string">checkbox</item>
                                            <item name="source" xsi:type="string">second_source</item>
                                            <item name="sortOrder" xsi:type="number">40</item>
                                            <item name="dataScope" xsi:type="string">second_source</item>
                                            <item name="valueMap" xsi:type="array">
                                                    <item name="true" xsi:type="number">1</item>
                                                    <item name="false" xsi:type="number">0</item>
                                            </item>
                                            <item name="default" xsi:type="number">0</item>
                                            <item name="validation" xsi:type="array">
                                                <item name="required-entry" xsi:type="boolean">false</item>
                                            </item>
                                    </item>
                            </argument>
                    </field>
            </fieldset>   
    </form>

The form is displaying correctly, and the dynamicRows component works as it should. I can add rows and remove them as needed.

The problem is that the submit button is not appearing at the bottom of the form. I've checked the XML against numerous online examples, and the buttons section seems correct. Has anyone seen this before or notice something wrong with the XML that I'm missing?

EDIT:

As requested, here's a screenshot of the form as it currently appears. All of the fields are working in the form and the validation works as well. But the submit button simply doesn't appear.

enter image description here

EDIT 2:

Here's my save button class:

    <?php
    namespace Vendor\Module\Block\Edit;

    use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

    /**
     * Class SaveButton
     */
    class SaveButton implements ButtonProviderInterface
    {
            /**
             * @return array
             */
            public function getButtonData()
            {
                    return [
                            'label' => __('Submit'),
                            'class' => 'save primary',
                            'data_attribute' => [
                                    'mage-init' => ['button' => ['event' => 'save']],
                                    'form-role' => 'save',
                            ],
                            'sort_order' => 90,
                    ];
            }
    }

Try this way.

Verify your function getButtonData() in block file under Vendor\Module\Quote\Block\YourFilename.php

/**
* @return array
*/
public function getButtonData()
{
return [
    'label' => __('Save Slide'),
    'class' => 'save primary',
    'data_attribute' => [
        'mage-init' => ['button' => ['event' => 'save']],
        'form-role' => 'save',
    ],
    'sort_order' => 90,
];
}

Please check this link this issue is relevant to submit button click here

I Hope it help to you.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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