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.
1 2 3 4 5 6 |
<?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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?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!