Understanding the Adminhtml Layout

Oct 13, 2025 by talynt.org 127 views

Introduction

Magento 2 provides a robust framework for creating custom modules, allowing developers to extend the functionality of the platform. One common requirement when creating custom modules is to add custom buttons to the admin page, which can perform specific actions when clicked. In this article, we will discuss how to add an onclick method in Magento 2 admin custom module page.

Understanding the Adminhtml Layout

Before we dive into adding the onclick method, it's essential to understand the adminhtml layout in Magento 2. The adminhtml layout is responsible for rendering the admin page, including the custom buttons. To add a custom button, you need to create a layout file that defines the button's properties, including its label, onclick method, and other attributes.

Creating the Edit.php File

The edit.php file is a crucial part of the custom module, as it defines the admin page layout. In this file, you can add custom buttons using the addButton method. Here's an example of how to add a custom button with an onclick method:

$this->addButton(
    'approve',
    [
        'label' => __('Approve'),
        'onclick' => 'deleteConfirm(...',
        'class' => 'action-approve',
        'class_name' => 'action-approve',
    ]
);

In this example, we're adding a custom button with the label "Approve" and an onclick method that calls the deleteConfirm function. The class and class_name attributes are used to style the button.

Adding the Onclick Method

To add the onclick method, you need to create a JavaScript file that defines the deleteConfirm function. This function will be called when the custom button is clicked. Here's an example of how to create the JavaScript file:

define([
    'jquery',
    'Magento_Ui/js/modal/alert'
], function ($, alert) {
    'use strict';
return function (config) {
    $.widget(&#39;mage.deleteConfirm&#39;, {
        options: {
            title: &#39;&#39;,
            message: &#39;&#39;,
            confirm: function () {
                // Add your logic here
            },
            cancel: function () {
                // Add your logic here
            }
        },
        _create: function () {
            var self = this;
            self.element.on(&#39;click&#39;, function () {
                self.options.confirm();
            });
        }
    });

    return {
        deleteConfirm: function (title, message, confirm, cancel) {
            var options = {
                title: title,
                message: message,
                confirm: confirm,
                cancel: cancel
            };
            $.widget(&#39;mage.deleteConfirm&#39;, options);
        }
    };
};

});

In this example, we're creating a JavaScript widget that defines the deleteConfirm function. This function takes four parameters: title, message, confirm, and cancel. The confirm function is called when the user clicks the custom button, and the cancel function is called when the user clicks the cancel button.

Adding the JavaScript File to the Adminhtml Layout

To add the JavaScript file to the adminhtml layout, you need to create a layout file that includes the JavaScript file. Here's an example of how to create the layout file:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://example.com/js/deleteConfirm.js"></script>
    </head>
</page>

In this example, we're including the deleteConfirm.js file in the head section of the adminhtml layout.

Conclusion

Adding an onclick method in Magento 2 admin custom module page requires creating a custom button using the addButton method and defining the onclick method using a JavaScript file. By following the steps outlined in this article, you can add custom buttons to the admin page and perform specific actions when clicked.

Additional Tips and Tricks

Make sure to include the JavaScript file in the adminhtml layout using the layout file.
Use the addButton method to add custom buttons to the admin page.
Define the onclick method using a JavaScript file.
Use the deleteConfirm function to call the confirm and cancel functions.
Add your logic to the confirm and cancel functions to perform specific actions.

Example Use Cases

Adding a custom button to the admin page to approve or reject a product.
Creating a custom button to delete a product or category.
Adding a custom button to update a product or category.

Common Issues and Solutions

Issue: The custom button is not visible on the admin page. Solution: Make sure to include the JavaScript file in the adminhtml layout using the layout file.
Issue: The onclick method is not called when the custom button is clicked. Solution: Make sure to define the onclick method using a JavaScript file and include the JavaScript file in the adminhtml layout.

Conclusion

Q: What is the purpose of the addButton method in Magento 2 admin custom module page?

A: The addButton method is used to add custom buttons to the admin page. It allows developers to create custom buttons that can perform specific actions when clicked.

Q: How do I add a custom button to the admin page using the addButton method?

A: To add a custom button to the admin page using the addButton method, you need to create a layout file that defines the button's properties, including its label, onclick method, and other attributes. Here's an example of how to add a custom button:

$this->addButton(
    'approve',
    [
        'label' => __('Approve'),
        'onclick' => 'deleteConfirm(...',
        'class' => 'action-approve',
        'class_name' => 'action-approve',
    ]
);

Q: What is the deleteConfirm function and how do I use it?

A: The deleteConfirm function is a JavaScript function that is called when the custom button is clicked. It takes four parameters: title, message, confirm, and cancel. The confirm function is called when the user clicks the custom button, and the cancel function is called when the user clicks the cancel button. Here's an example of how to use the deleteConfirm function:

define([
    'jquery',
    'Magento_Ui/js/modal/alert'
], function ($, alert) {
    'use strict';
return function (config) {
    $.widget(&#39;mage.deleteConfirm&#39;, {
        options: {
            title: &#39;&#39;,
            message: &#39;&#39;,
            confirm: function () {
                // Add your logic here
            },
            cancel: function () {
                // Add your logic here
            }
        },
        _create: function () {
            var self = this;
            self.element.on(&#39;click&#39;, function () {
                self.options.confirm();
            });
        }
    });

    return {
        deleteConfirm: function (title, message, confirm, cancel) {
            var options = {
                title: title,
                message: message,
                confirm: confirm,
                cancel: cancel
            };
            $.widget(&#39;mage.deleteConfirm&#39;, options);
        }
    };
};

});

Q: How do I include the JavaScript file in the adminhtml layout?

A: To include the JavaScript file in the adminhtml layout, you need to create a layout file that includes the JavaScript file. Here's an example of how to include the JavaScript file:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://example.com/js/deleteConfirm.js"></script>
    </head>
</page>

Q: What are some common issues that I may encounter when adding an onclick method in Magento 2 admin custom module page?

A: Some common issues that you may encounter when adding an onclick method in Magento 2 admin custom module page include:

The custom button is not visible on the admin page.
The onclick method is not called when the custom button is clicked.
The JavaScript file is not included in the adminhtml layout.

Q: How do I troubleshoot these issues?

A: To troubleshoot these issues, you can try the following:

Make sure to include the JavaScript file in the adminhtml layout using the layout file.
Check the console for any errors that may be preventing the onclick method from being called.
Verify that the custom button is being added to the admin page using the addButton method.

Q: What are some best practices for adding an onclick method in Magento 2 admin custom module page?

A: Some best practices for adding an onclick method in Magento 2 admin custom module page include:

Use the addButton method to add custom buttons to the admin page.
Define the onclick method using a JavaScript file.
Use the deleteConfirm function to call the confirm and cancel functions.
Add your logic to the confirm and cancel functions to perform specific actions.

Q: Can I use this method to add custom buttons to other pages in Magento 2?

A: Yes, you can use this method to add custom buttons to other pages in Magento 2. However, you will need to modify the layout file and the JavaScript file to accommodate the specific requirements of the page.