Submit Form Button uiComponent Magento2

Question

I'm trying to add a simple submit button to my uiComponent, the block looks as follows:

<?php
namespace AppFactory\Basic\Block\Adminhtml\Slides;

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

class SaveButton implements ButtonProviderInterface
{
    /**
     * @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,
        ];
    }
}

And the 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">slides_edit.slides_form_date_source</item>
            <item name="deps" xsi:type="string">slides_edit.slides_form_date_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Save Slide</item>
        <item name="layout" xsi:type="array">
            <item name="type" xsi:type="string">tabs</item>
        </item>

        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">AppFactory\Basic\Block\Adminhtml\Slides\BackButton</item>
            <item name="save" xsi:type="string">AppFactory\Basic\Block\Adminhtml\Slides\SaveButton</item>
        </item>
    </argument>

    <dataSource name="slides_form_date_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">AppFactory\Basic\Model\SlidesDataProvider</argument>
            <argument name="name" xsi:type="string">slides_form_date_source</argument>
            <argument name="primaryFieldName" xsi:type="string">banner_id</argument>
            <argument name="requestFieldName" xsi:type="string">banner_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="url" path="appfactory/slides/edit"/>
            </item>
        </argument>
    </dataSource>

    <fieldset name="slide">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Add a new Slide</item>
            </item>
        </argument>


        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Name</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">name</item>
                </item>
            </argument>
        </field>

     <field name="image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Slide Image</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="componentType" xsi:type="string">fileUploader</item>
                <item name="maxFileSize" xsi:type="number">2097152</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="previewTmpl" xsi:type="string">AppFactory_Basic/image-preview</item>
                <item name="required" xsi:type="boolean">true</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="string">appfactory/slides/uploadimage</item>
                </item>
            </item>
        </argument>
    </field>





    </fieldset>
</form>

My problem is when clicking the button it's not following the submit url, just /appfactory/slides/undefined, im not sure where undefined came from and why it's not following the submit url.

Generate Save Button HTML

<button id="save" title="Save Slide" type="button" class="action- scalable save primary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="location.href = 'http://appfactory.loc/';" data-form-role="save" data-ui-id="save-button" role="button" aria-disabled="false"><span class="ui-button-text">
    <span>Save Slide</span>
</span></button>

Answer 1

Replace getButtonData by following code.

/**
 * @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,
    ];
}

Answer 2

Step-1: Create Generic.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Cms\Api\PageRepositoryInterface;

class Generic
{
    protected $context;
    protected $pageRepository;

    public function __construct(
        Context $context,
        PageRepositoryInterface $pageRepository
    ) {
        $this->context = $context;
        $this->pageRepository = $pageRepository;
    }

    public function getUrl($route = '', $params = [])
    {
        return $this->context->getUrlBuilder()->getUrl($route, $params);
    }
}

Step-2: Create Save.php at app/code/VendoreName/ModuleName/Block/Adminhtml/Edit/Button

<?php

namespace VendoreName\ModuleName\Block\Adminhtml\Edit\Button;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Ui\Component\Control\Container;

class Save extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => [
                    'buttonAdapter' => [
                        'actions' => [
                            [
                                'targetName' => 'your_form_ui_component_name.your_form_ui_component_name',
                                'actionName' => 'save',
                                'params' => [
                                    false,
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }

}

Step-3: In your Form Ui-Component file at app/code/VendoreName/ModuleName/view/adminhtml/ui_component add below code:

<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="buttons" xsi:type="array">
            <item name="save" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\Save</item>
        </item>
        ............................................................................................................
    </argument>
    <dataSource name="your_form_data_source_name">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">VendoreName\ModuleName\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">your_form_data_source_name</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                 <item name="submit_url" xsi:type="url" path="*/*/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>
    ................................................................................................................
</form>

After adding above files run below command:

php bin/magento s:up
php bin/magento c:c