4

I am developing one module in which I need to add a custom buttons on Magento 2 admin pages(Like: category Page, Product Grid Page, Orders Grid Page).

I need to add button on the below bar, which is available on every magento admin page.

enter image description here

Please let me know, if anyone can help me.

2 Answers 2

4

It is quite easy with Magento 2, if your already have your module declared.

Let's imagine i want to add a "Clear Category Cache" button on Category Admin :

Adding Magento 2 admin button

Admin buttons are declared in "UI Components" file, usually located in vendor/magento/MAGENTO_MODULE/view/adminhtml/ui_component\FILE.xml.

For Categories, the file is located in vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml.

Let's create a copy in your module, to override the core one, in YOUR_NAMESPACE/YOUR_MODULE/view/adminhtml/ui_component/category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <settings>
        <buttons>
            <button name="clear_cache" class="YOUR_NAMESPACE\YOUR_MODULE\Block\Adminhtml\Category\Edit\ClearCacheButton"/>
        </buttons>
    </settings>
</form>

Finally, create your button file

<?php

namespace YOUR_NAMESPACE\YOUR_MODULE\Block\Adminhtml\Category\Edit;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Catalog\Block\Adminhtml\Category\AbstractCategory;

/**
 * Class ClearCacheButton
 */
class ClearCacheButton extends AbstractCategory implements ButtonProviderInterface
{
    /**
     * Clear Cache button
     *
     * @return array
     */
    public function getButtonData()
    {
        $category = $this->getCategory();
        $categoryId = (int)$category->getId();

        if ($categoryId) {
            return [
                'id' => 'clear_cache',
                'label' => __('Clear Category Cache'),
                'on_click' => "alert('ok')",
                'class' => 'delete',
                'sort_order' => 10
            ];
        }

        return [];
    }
}
0

you can use the same way store switcher is implemented by adding a custom block template in page layout xml inside body -> main.page.actions

This is how store switcher is added:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
    <referenceContainer name="page.main.actions">
    <block class="Magento\Backend\Block\Store\Switcher" name="store_switcher">
        <action method="setUseConfirm">
            <argument name="params" xsi:type="string">1</argument>
        </action>
    </block>
    </referenceContainer>
    <referenceContainer name="content">
        <uiComponent name="your_ui_components"/>
    </referenceContainer>
</body>
</page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.