Submit Button in UIComponent

Question

I am new to magento and trying to create a custom form in adminhtml using UIComponent. I can display the form but I am a bit confused on how to put up a submit button in the form.

I have gone through the internet and found multiple ways, out of which these are the thigngs I tried.

ONE

<item name="config" xsi:type="array">
    <item name="submit_url" xsi:type="string">customer/index/save</item>
    <item name="validate_url" xsi:type="string">rehan_testing/save/datas</item>
</item>

TWO

<item name="buttons" xsi:type="array">
    <item name="add" xsi:type="array">
        <item name="name" xsi:type="string">add</item>
        <item name="label" xsi:type="string" translate="true">Save Post</item>
        <item name="class" xsi:type="string">primary</item>
        <item name="url" xsi:type="string">rehan_testing/save/datas</item>
    </item>
</item

Which one is the right way? The latter renders a actuall Button on the form but the former one doesn't.

And when I clicked the button It shows 404 Page Not Found error.

Can someone point out the mistake?

This is my complete UIComponent

<?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">rehan_testing_create_form.rehan_testing_create_form_data_source</item>
            <item name="deps" xsi:type="string">rehan_testing_create_form.rehan_testing_create_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Employee Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">rehan_testing_create_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Save Post</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">rehan_testing/save/datas</item>
            </item>
        </item>
    </argument>
    <dataSource name="rehan_testing_create_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Rehan\Testing\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">rehan_testing_create_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</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>
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="string">customer/index/save</item>
                <item name="validate_url" xsi:type="string">customer/index/validate</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="employee_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="label" xsi:type="string" translate="true">Employee Details</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>

        <field name="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">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">name</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">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">email</item>
                </item>
            </argument>
        </field>
        <field name="contact_number">
            <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">Employee Address</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">contact_number</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Answer 1

Following is some part of my code that I used to create custom Database table, UI form and UI grid.

app/code/Anshu/Custom/view/adminhtml/ui_component/custom_edit_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">custom_edit_form.edit_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Custom Information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button name="save" class="Anshu\Custom\Block\Adminhtml\Custom\Edit\SaveButton"/>
            <button name="back" class="Anshu\Custom\Block\Adminhtml\Custom\Edit\BackButton"/>
        </buttons>
        <namespace>custom_edit_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>custom_edit_form.edit_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="edit_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="custom/custom/save"/>
        </settings>
        <dataProvider class="Anshu\Custom\Model\DataProvider" name="edit_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="custom_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Information</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="name" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">customForm</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Name</label>
                <dataScope>name</dataScope>
            </settings>
        </field>
        <field name="description" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">customForm</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Description</label>
                <dataScope>description</dataScope>
            </settings>
        </field>
    </fieldset>
</form>

app/code/Anshu/Custom/Block/Adminhtml/Custom/Edit/SaveButton.php

<?php

namespace Anshu\Custom\Block\Adminhtml\Custom\Edit;

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

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

submitUrl in UI component xml maps to app/code/Anshu/Custom/Controller/Adminhtml/Custom/Save.php

<?php

namespace Anshu\Custom\Controller\Adminhtml\Custom;

----

class Save extends Action
{
    ----

    public function execute()
    {
        // my custom code
    }
}

This is not complete code, but you can take reference of it and modify it according to your requirement.

Answer 2

You can add button like this :

<item name="buttons" xsi:type="array">
    <item name="add" xsi:type="array">
        <item name="name" xsi:type="string">add</item>
        <item name="label" xsi:type="string" translate="true">Save Post</item>
        <item name="class" xsi:type="string">primary</item>
        <item name="url" xsi:type="string">adminroutename/controller/action</item>
    </item>
</item>

And define admin route in module/etc/adminhtml/routes.xml