How To Add Split Button On Admin Page In Magento 2

How to Add Split Button on Admin Sales Invoice View Page In Magento 2. A split button is a UI component. Buttons are calls to action, and their labels should be limited to three words (four words maximum, if including a short verb or word).

Buttons can be used for:

- Calls to action for task flows: to begin, continue, or submit a task
- Navigation in featured modules of content, like banners and content teasers

Button types are primary, secondary, and tertiary. Each page should have a maximum limit of one primary button. Split buttons include multiple actions. Button counts in a Button Bar or any array of buttons should be limited to four buttons, maximum then the user can select the displayed option or any other option from the drop-down list. The drop-down list shows the options that are very rarely used.

Sometimes, the Magento 2 store has a need to add a split button in the admin sales invoice view page without changing core Magento functionalities.

Read this: How to Add Custom Button to Admin Sales Invoice View in Magento 2.

Steps to Add Split Button on Admin Sales Invoice View Page in Magento 2

We are already learned how to create a basic module in Magento 2. We need to create module.xml and registration.php files. You can create module.xml and registration.php from this tutorial.

Step 1: Create Dependency injection (di.xml)

Now we create Dependency injection file di.xml in app/code/Dolphin/InvoiceEmail/etc/adminhtml folder with the following code.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<type name="Magento\Sales\Block\Adminhtml\Order\Invoice\View">
		<plugin name="Dolphin_InvoiceEmail_Order_View" type="Dolphin\InvoiceEmail\Plugin\Adminhtml\Order\Invoice\View" sortOrder="10" disabled="false"/>
	</type>
</config>

<?xml version="1.0" ?>

</type>

</config>

Step 2: Create plugin class

Finally, add in the Plugin class. As with the default sales invoice view plugin, a beforeSetLayout() method is defined, and the invoice view is added as part of the \Magento\Sales\Block\Adminhtml\Order\Invoice\View.

Create plugin class file View.php in app/code/Dolphin/InvoiceEmail/Plugin/Adminhtml/Order/Invoice folder with the following code.

<?php
namespace Dolphin\InvoiceEmail\Plugin\Adminhtml\Order\Invoice;

use Magento\Backend\Model\UrlInterface;
use Magento\Framework\ObjectManagerInterface;

class View
{
    protected $object_manager;
    protected $_backendUrl;

    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        ObjectManagerInterface $om,
        UrlInterface $backendUrl,
        array $data = []
    ) {
        $this->object_manager = $om;
        $this->_backendUrl = $backendUrl;
    }

    public function beforeSetLayout(\Magento\Sales\Block\Adminhtml\Order\Invoice\View $view)
    {
        if ($view->getInvoice()->getId()) {
            $addButtonProps = [
                'id' => 'test',
                'label' => __('Split Button'),
                'class' => 'add',
                'button_class' => '',
                'class_name' => 'Magento\Backend\Block\Widget\Button\SplitButton',
                'options' => $this->getCustomActionListOptions(),
            ];

            $view->addButton('test',$addButtonProps);
            $view->removeButton('send_notification');
        }

    }
    protected function getCustomActionListOptions()
    {
        $url = $this->_backendUrl->getUrl('');
        $splitButtonOptions=[
            'button_1'=>['label'=>__('Button 1'),'onclick'=>'setLocation(\'' . $url . '\')'],
            'button_2'=>['label'=>__('Button 2'),'onclick'=>'setLocation(\'' . $url . '\')'],
            'button_3'=>['label'=>__('Button 3'),'onclick'=>'setLocation(\'' . $url . '\')']
        ];
        return $splitButtonOptions;
    }

}

<?php

namespace Dolphin\InvoiceEmail\Plugin\Adminhtml\Order\Invoice;

use Magento\Backend\Model\UrlInterface;

use Magento\Framework\ObjectManagerInterface;

class View

{

protected $object_manager;

protected $_backendUrl;

public function __construct(

\Magento\Backend\Block\Widget\Context $context,

ObjectManagerInterface $om,

UrlInterface $backendUrl,

array $data = []

) {

$this->object_manager = $om;

$this->_backendUrl = $backendUrl;

}

public function beforeSetLayout(\Magento\Sales\Block\Adminhtml\Order\Invoice\View $view)

{

if ($view->getInvoice()->getId()) {

$addButtonProps = [

'id' => 'test',

'label' => __('Split Button'),

'class' => 'add',

'button_class' => '',

'class_name' => 'Magento\Backend\Block\Widget\Button\SplitButton',

'options' => $this->getCustomActionListOptions(),

];

$view->addButton('test',$addButtonProps);

$view->removeButton('send_notification');

}

protected function getCustomActionListOptions()

{

$url = $this->_backendUrl->getUrl('');

$splitButtonOptions=[

'button_1'=>['label'=>__('Button 1'),'onclick'=>'setLocation(\'' . $url . '\')'],

'button_2'=>['label'=>__('Button 2'),'onclick'=>'setLocation(\'' . $url . '\')'],

'button_3'=>['label'=>__('Button 3'),'onclick'=>'setLocation(\'' . $url . '\')']

];

return $splitButtonOptions;

}

$view->addButton: Selector for the element used for item adding.

$view->removeButton: Selector for the element used for item removing.

Now execute below command and referesh the page:

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

Result:

I Hope, This instruction will be helpful for you.
If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.
Thank you!