Add Buttons into Ui Component Form Magento 2

We learn how to add Buttons into Custom ui component form Magento 2.

There are many types of buttons In the Form like Save, Edit, Back, Delete, New, etc. In developing the module we need to add a button to the form. Here is some code to add different buttons to the form. Contact Dolphin Web Solution for hire magento 2 developers.

Step-1: Create Generic.php

Create Generic.php at app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button

<?php

namespace Dolphin\AddButtonModule\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 Back.php

Create Back.php at app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button

<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

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

class Back extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Back'),
            'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
            'class' => 'back',
            'sort_order' => 10,
        ];
    }

    public function getBackUrl()
    {
        return $this->getUrl('*/*/');
    }
}

Step-3: Create Reset.php

Create Reset.php at app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button

<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

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

class Reset implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Reset'),
            'class' => 'reset',
            'on_click' => 'location.reload();',
            'sort_order' => 30,
        ];
    }
}

Step-4: Create Delete.php

Create Delete.php at app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Buttons

<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class Delete extends Generic implements ButtonProviderInterface
{
    protected $context;

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

    public function getButtonData()
    {
        $data = [];
        $id = $this->context->getRequest()->getParam('id');
        if ($id) {
            $data = [
                'label' => __('Delete'),
                'class' => 'delete',
                'on_click' => 'deleteConfirm(\'' . __(
                    'Are you sure you want to delete this?'
                ) . '\', \'' . $this->getDeleteUrl() . '\')',
                'sort_order' => 20,
            ];
        }
        return $data;
    }

    public function getDeleteUrl()
    {
        $id = $this->context->getRequest()->getParam('id');
        return $this->getUrl('*/*/delete', ['id' => $id]);
    }
}

Step-5: Create Save.php

Create Save.php at app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button

<?php

namespace Dolphin\AddButtonModule\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-6: In your Form Ui-Component file

In your Form Ui-Component file at app/code/Dolphin/AddButtonModule/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="back" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Back</item>
            <item name="delete" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Delete</item>
            <item name="reset" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Reset</item>
            <item name="save" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Save</item>
        </item>
        ............................................................................................................
    </argument>
    ................................................................................................................
</form>

After adding the above files you can show button into your custom form.

You may also like this: Dependent Fields In UI-Component Forms In Magento 2

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Mahesh Makwana

Author