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.
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,
];
}
}
Best Answer
Try this way.
Verify your function getButtonData() in block file under
Vendor\Module\Quote\Block\YourFilename.phpPlease check this link this issue is relevant to submit button click here
I Hope it help to you.