How to add save and continue button in ui-form in Magento 2?

Question

I have created admin grid and form using ui component.
Now I need to add save and continue button, How do I add it?
Please provide me a solution

Answer 1

Add below code to UI component form XML file

<item name="buttons" xsi:type="array">
    <item name="save_and_continue" xsi:type="string">Namespace\ModuleName\Block\Adminhtml\ModuleName\Edit\SaveAndContinueButton</item>
</item>

 

<?php

namespace Namespace\ModuleName\Block\Adminhtml\ModuleName\Edit;

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

/**
 * Class SaveAndContinueButton
 */
class SaveAndContinueButton extends GenericButton implements ButtonProviderInterface
{
    /**
     * @return array
     */
    public function getButtonData()
    {
        return [
            'label' => __('Save and Continue Edit'),
            'class' => 'save',
            'data_attribute' => [
                'mage-init' => [
                    'button' => ['event' => 'saveAndContinueEdit'],
                ],
            ],
            'sort_order' => 80,
        ];
    }
}

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 Back.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;

    class ApplyButton extends Generic implements ButtonProviderInterface
    {
        public function getButtonData()
        {
            return [
                'label' => __('Save and Continue'),
                'class' => 'save',
                'on_click' => '',
                'sort_order' => 50,
                'data_attribute' => [
                    'mage-init' => [
                        'Magento_Ui/js/form/button-adapter' => [
                            'actions' => [
                                [
                                    'targetName' => 'your_form_ui_component_name.your_form_ui_component_name',
                                    'actionName' => 'save',
                                    'params' => [
                                        true,
                                        [
                                            'save_and_continue' => 1,
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],

                ],
            ];
        }
    }

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="apply" xsi:type="string">VendoreName\ModuleName\Block\Adminhtml\Edit\Button\ApplyButton</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