Magento 2 Submit Form Button Using uiComponent

magento2uicomponent

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>

Best Answer

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,
    ];
}
Related Topic