Kanishka
Kanishka

Reputation: 33

Magento 2 add confirmation pop-up to the save button

I am using Magento Open Source 2.3.x, I have a custom form. What I need to do is add a confirmation popup for the save button. I could be able to add such pop-up for the Delete button but not for the Save button. Any help highly appreciated. Here is my UI component.xml file.

    <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">ven_customers_storecredit_topup_form.topup_form_data_source</item>
            </item>
            <item name="label" translate="true" xsi:type="string">General Information</item>
            <item name="template" xsi:type="string">templates/form/collapsible</item>
        </argument>
        <settings>
            <buttons>
                <button class="Vendor\Module\Block\Adminhtml\Topup\Edit\BackButton" name="back"/>
                <button class="Vendor\Module\Block\Adminhtml\Topup\Edit\SaveButton" name="save"/>
            </buttons>
            <namespace>ven_customers_storecredit_topup_form</namespace>
            <dataScope>data</dataScope>
            <deps>
                <dep>ven_customers_storecredit_topup_form.topup_form_data_source</dep>
            </deps>
        </settings>
        <dataSource name="topup_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="*/*/save"/>
            </settings>
            <dataProvider class="Vendor\Module\Model\Customer\DataProvider" name="topup_form_data_source">
                <settings>
                    <requestFieldName>id</requestFieldName>
                    <primaryFieldName>entity_id</primaryFieldName>
                </settings>
            </dataProvider>
        </dataSource>
        <fieldset name="general">
            <settings>
                <label>General</label>
            </settings>
            <field name="topup" sortOrder="80" formElement="select">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Amount</label>
                    <dataScope>topup</dataScope>
                </settings>
                <formElements>
                    <select>
                        <settings>
                            <options class="Vendor\Module\Model\Source\PriceOptions"/>
                        </settings>
                    </select>
                </formElements>
            </field>
        </fieldset>
    </form>

Here is the button class

    <?php

    namespace Vendor\Module\Block\Adminhtml\Topup\Edit;

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

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

Upvotes: 0

Views: 4433

Answers (2)

Derr Sim
Derr Sim

Reputation: 1

You typed: 'onclick'. This is not working you have to use: 'on_click' you forgot the underscore.

Upvotes: 0

Charles Nguyen
Charles Nguyen

Reputation: 9

Try this:

namespace Vendor\Module\Block\Adminhtml\Topup\Edit;

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

class SaveButton extends GenericButton implements ButtonProviderInterface
{
    public function getButtonData()
    {
       $message = __('Save it!');
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'onclick' => "confirmSetLocation('{$message}', '{$this->getUrl(action)}')",
            'sort_order' => 90,
        ];
    }
}

Goodluck!

Upvotes: 0

Related Questions