Reading list Switch to dark mode

    How to add a custom button in magento2 admin grid

    Updated 4 March 2024

    How to add a custom button in magento2 admin grid-

    In the Create Grid , Edit/Add Grid Row And Installer In Magento2 blog we created an simple Grid module.

    Now we are going to add a custom button “Send Mail” to custom grid in Magento2.

    On click of the ” Send Mail ” button we will just show a form in popup which will be responsible to send an custom email to customer.

    For this we will need to follow some simple steps given below –

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    1. Add customer_listing.xml file to your module in path –
    2. app/code/Webkul/Grid/view/adminhtml/ui_component/customer_listing.xml and add a custom button in this file
    <?xml version="1.0" encoding="UTF-8"?>
    <listing xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <columns name="customer_columns">
            <actionsColumn name="send_mail" class="Webkul\Grid\Ui\Component\Listing\Columns\Sendmail">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="component" xsi:type="string">Webkul_Grid/js/grid/columns/sendmail</item>
                        <item name="indexField" xsi:type="string">entity_id</item>
                        <item name="sortable" xsi:type="boolean">false</item>
                        <item name="label" xsi:type="string" translate="true">Send Mail</item>
                        <item name="sortOrder" xsi:type="number">13</item>

    3. As we want to show an form on click on this custom “Send Mail” button , now we need to create a ui component class Webkul\Grid\Ui\Component\Listing\Columns\Sendmail –

    namespace Webkul\Grid\Ui\Component\Listing\Columns;
    use Magento\Framework\UrlInterface;
    use Magento\Framework\View\Element\UiComponent\ContextInterface;
    use Magento\Framework\View\Element\UiComponentFactory;
    use Magento\Ui\Component\Listing\Columns\Column;
    class Sendmail extends Column
         *@var UrlInterface
        protected $urlBuilder;
         * Constructor
         * @param ContextInterface $context
         * @param UiComponentFactory $uiComponentFactory
         * @param UrlInterface $urlBuilder
         * @param array $components
         * @param array $data      
        public function __construct(
            ContextInterface $context,
            UiComponentFactory $uiComponentFactory,
            UrlInterface $urlBuilder,
            array $components = [],
            array $data = []
        ) {
            $this->urlBuilder = $urlBuilder;
            parent::__construct($context, $uiComponentFactory, $components, $data);
         * Prepare Data Source
         * @param array $dataSource
         * @return array
        public function prepareDataSource(array $dataSource)
            if (isset($dataSource['data']['items'])) {
                $fieldName = $this->getData('name');
                foreach ($dataSource['data']['items'] as &$item) {
                    $item[$fieldName . '_html'] = "<button class='button'><span>Send Mail</span></button>";
                    $item[$fieldName . '_title'] = __('Please enter a message that you want to send to customer');
                    $item[$fieldName . '_submitlabel'] = __('Send');
                    $item[$fieldName . '_cancellabel'] = __('Reset');
                    $item[$fieldName . '_customerid'] = $item['entity_id'];
                    $item[$fieldName . '_formaction'] = $this->urlBuilder->getUrl('grid/customer/sendmail');
            return $dataSource;

    4. Now we will need to create a js file sendmail.js at below

    app/code/Webkul/Grid/view/base/web/js/grid/columns/ which we are using in this custom button.

            'jquery', 'mage/template',
            'Magento_Ui/js/modal/modal'], function (Column, $, mageTemplate, sendmailPreviewTemplate) {
                'use strict'; return Column.extend({
                    defaults: {
                        bodyTmpl: 'ui/grid/cells/html',
                        fieldClass: { 'data-grid-html-cell': true }
                    gethtml: function (row) {
                        return row[this.index + '_html'];
                    getFormaction: function (row) {
                        return row[this.index + '_formaction'];
                    getCustomerid: function (row) {
                        return row[this.index + '_customerid'];
                    getLabel: function (row) { return row[this.index + '_html'] },
                    getTitle: function (row) { return row[this.index + '_title'] },
                    getSubmitlabel: function (row) { return row[this.index + '_submitlabel'] },
                    getCancellabel: function (row) { return row[this.index + '_cancellabel'] },
                    preview: function (row) {
                        var modalHtml = mageTemplate(sendmailPreviewTemplate, {
                            html: this.gethtml(row),
                            title: this.getTitle(row),
                            label: this.getLabel(row),
                            formaction: this.getFormaction(row),
                            customerid: this.getCustomerid(row),
                            submitlabel: this.getSubmitlabel(row),
                            cancellabel: this.getCancellabel(row),
                            linkText: $.mage.__('Go to Details Page')
                        var previewPopup = $('<div/>').html(modalHtml);
                            title: this.getTitle(row),
                            innerScroll: true, modalClass: '_image-box',
                            buttons: []
                    getFieldHandler: function (row) { return this.preview.bind(this, row); }

    5. Now we have to create a template file sendmail.html in path app/code/Webkul/Grid/view/base/web/templates/grid/cells/customer/ .

    <form id="send-mail-form-<%- customerid %>" method="get" enctype="multipart/form-data" action="<%- formaction %>">
        <div class="modal-body">
            <div class="bootbox-body"> <textarea class="bootbox-input bootbox-input-text form-control required-entry"
                    name="send_message" rows="4" cols="83"></textarea> <input type="hidden" name="entity_id"
                    value="<%- customerid %>"> </div>
        <div class="modal-footer"> <span class="error"></span> <button type="reset" class="btn btn-default"><span><%-
                        cancellabel %></span></button> <button type="submit" class="btn btn-primary"><span><%- submitlabel
                        %></span></button> <span class="clear"></span> </div>

    now you will see a custom button “Send Mail” is added in the magento2 customer grid as shown in the given screenshot-custom_buttonon click on “Send Mail” button you will see a form in popup which will be responsible to send a custom mail to customer.sendmailSo in this way you can add any custom button or any custom column like action link, image to any grid in magento2.

    How to add a custom button in magento2 admin grid

    You can also check the links below :

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • Avinash S
    • Webkul Support
      • Avinash S
        • Webkul Support
  • Rajesh
  • Dhaval Mistry
  • Yohanes Pradono
  • Niteen Barde
  • jurgen
  • Pooja Sahu
  • Deva Kamble
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home