{"id":38629,"date":"2015-12-30T17:10:15","date_gmt":"2015-12-30T17:10:15","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=38629"},"modified":"2026-02-05T06:01:37","modified_gmt":"2026-02-05T06:01:37","slug":"how-to-add-a-custom-button-in-magento2-admin-grid","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-button-in-magento2-admin-grid\/","title":{"rendered":"How to add a Custom Button in Magento 2 Admin Grid"},"content":{"rendered":"\n

Here, you\u2019ll learn how to create and integrate a custom button in the Magento 2 admin grid with clear logic and reusable code.<\/p>\n\n\n\n

In the\u00a0Create Grid , Edit\/Add Grid Row And Installer In Magento 2<\/a> we created an simple Grid module.<\/p>\n\n\n\n

Now we are going to add a custom button “Send Mail” to custom grid in Magento 2.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

For this we will need to follow some simple steps given below –<\/p>\n\n\n\n

    \n
  1. Add customer_listing.xml file to your module in path – <\/li>\n\n\n\n
  2. app\/code\/Webkul\/Grid\/view\/adminhtml\/ui_component\/customer_listing.xml and add a custom button in this file <\/li>\n<\/ol>\n\n\n\n
    <?xml version="1.0" encoding="UTF-8"?>\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n    <columns name="customer_columns">\n        <actionsColumn name="send_mail" class="Webkul\\Grid\\Ui\\Component\\Listing\\Columns\\Sendmail">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="component" xsi:type="string">Webkul_Grid\/js\/grid\/columns\/sendmail<\/item>\n                    <item name="indexField" xsi:type="string">entity_id<\/item>\n                    <item name="sortable" xsi:type="boolean">false<\/item>\n                    <item name="label" xsi:type="string" translate="true">Send Mail<\/item>\n                    <item name="sortOrder" xsi:type="number">13<\/item>\n                <\/item>\n            <\/argument>\n        <\/actionsColumn>\n    <\/columns>\n<\/listing><\/pre>\n\n\n\n
    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 – <\/p>\n\n\n\n
    <?php\n\nnamespace Webkul\\Grid\\Ui\\Component\\Listing\\Columns;\n\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\n\nclass Sendmail extends Column\n{\n    \/**\n     *@var UrlInterface\n     *\/\n    protected $urlBuilder;\n    \/**\n     * Constructor\n     *\n     * @param ContextInterface $context\n     * @param UiComponentFactory $uiComponentFactory\n     * @param UrlInterface $urlBuilder\n     * @param array $components\n     * @param array $data      \n     *\/\n    public function __construct(\n        ContextInterface $context,\n        UiComponentFactory $uiComponentFactory,\n        UrlInterface $urlBuilder,\n        array $components = [],\n        array $data = []\n    ) {\n        $this->urlBuilder = $urlBuilder;\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n    }\n    \/**      \n     * Prepare Data Source\n     * \n     * @param array $dataSource\n     * @return array\n     *\/\n    public function prepareDataSource(array $dataSource)\n    {\n        if (isset($dataSource['data']['items'])) {\n            $fieldName = $this->getData('name');\n            foreach ($dataSource['data']['items'] as &$item) {\n                $item[$fieldName . '_html'] = "<button class='button'><span>Send Mail<\/span><\/button>";\n                $item[$fieldName . '_title'] = __('Please enter a message that you want to send to customer');\n                $item[$fieldName . '_submitlabel'] = __('Send');\n                $item[$fieldName . '_cancellabel'] = __('Reset');\n                $item[$fieldName . '_customerid'] = $item['entity_id'];\n                $item[$fieldName . '_formaction'] = $this->urlBuilder->getUrl('grid\/customer\/sendmail');\n            }\n        }\n        return $dataSource;\n    }\n}<\/pre>\n\n\n\n
    4. Now we will need to create a js file sendmail.js at below 
    path.<\/p>\n\n\n\n
    app\/code\/Webkul\/Grid\/view\/base\/web\/js\/grid\/columns\/ which we are using in this custom button. <\/p>\n\n\n\n
    define(\n    ['Magento_Ui\/js\/grid\/columns\/column',\n        'jquery', 'mage\/template',\n        'text!Webkul_Grid\/templates\/grid\/cells\/customer\/sendmail.html',\n        'Magento_Ui\/js\/modal\/modal'], function (Column, $, mageTemplate, sendmailPreviewTemplate) {\n            'use strict'; return Column.extend({\n                defaults: {\n                    bodyTmpl: 'ui\/grid\/cells\/html',\n                    fieldClass: { 'data-grid-html-cell': true }\n                },\n                gethtml: function (row) {\n                    return row[this.index + '_html'];\n                },\n                getFormaction: function (row) {\n                    return row[this.index + '_formaction'];\n                },\n                getCustomerid: function (row) {\n                    return row[this.index + '_customerid'];\n                },\n                getLabel: function (row) { return row[this.index + '_html'] },\n                getTitle: function (row) { return row[this.index + '_title'] },\n                getSubmitlabel: function (row) { return row[this.index + '_submitlabel'] },\n                getCancellabel: function (row) { return row[this.index + '_cancellabel'] },\n                preview: function (row) {\n                    var modalHtml = mageTemplate(sendmailPreviewTemplate, {\n                        html: this.gethtml(row),\n                        title: this.getTitle(row),\n                        label: this.getLabel(row),\n                        formaction: this.getFormaction(row),\n                        customerid: this.getCustomerid(row),\n                        submitlabel: this.getSubmitlabel(row),\n                        cancellabel: this.getCancellabel(row),\n                        linkText: $.mage.__('Go to Details Page')\n                    });\n                    var previewPopup = $('<div\/>').html(modalHtml);\n                    previewPopup.modal({\n                        title: this.getTitle(row),\n                        innerScroll: true, modalClass: '_image-box',\n                        buttons: []\n                    }).trigger('openModal');\n                },\n                getFieldHandler: function (row) { return this.preview.bind(this, row); }\n            });\n        });<\/pre>\n\n\n\n
    5. Now we have to create a template file sendmail.html in path app\/code\/Webkul\/Grid\/view\/base\/web\/templates\/grid\/cells\/customer\/ .<\/p>\n\n\n\n
    <form id="send-mail-form-<%- customerid %>" method="get" enctype="multipart\/form-data" action="<%- formaction %>">\n    <div class="modal-body">\n        <div class="bootbox-body"> <textarea class="bootbox-input bootbox-input-text form-control required-entry"\n                name="send_message" rows="4" cols="83"><\/textarea> <input type="hidden" name="entity_id"\n                value="<%- customerid %>"> <\/div>\n    <\/div>\n    <div class="modal-footer"> <span class="error"><\/span> <button type="reset" class="btn btn-default"><span><%-\n                    cancellabel %><\/span><\/button> <button type="submit" class="btn btn-primary"><span><%- submitlabel\n                    %><\/span><\/button> <span class="clear"><\/span> <\/div>\n<\/form><\/pre>\n\n\n\n
    now you will see a custom button “Send Mail” is added in the magento2 customer grid as shown in the given screenshot-\"custom_button\"on click on “Send Mail” button you will see a form in popup which will be responsible to send a custom mail to customer.\"sendmail\"So in this way you can add any custom button or any custom column like action link, image to any grid in magento2.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    How to add a custom button in magento2 admin grid<\/p>\n\n\n\n
    You can also check the links below : <\/p>\n\n\n\n