Showing results for 
Search instead for 
Did you mean: 

Create Modal popup form on admin order view page button click

Create Modal popup form on admin order view page button click



I have packaging button in admin order view page .on click i want to create popup to enter Tag Id on order item.Please help to create popup form on click.


Thank You

Tippanna Pawar


Re: Create Modal popup form on admin order view page button click

If you want to call a pop on your custom button click then you have to create a modal box


  • For create a modal box, you need to create a child block of Magento\Sales\Block\Adminhtml\Order\View .
  • On that child build a modal box with form
  • After that add this child Block HTML out with Magento\Sales\Block\Adminhtml\Order\View out using toHtml()plugin. after Plugi afterToHtml().


Create a Block class and a phtml to render the popup and form

Block Class: app\code\MyCompany\MyModule\Block\Adminhtml\Order\ModalBox and code Will be like:


namespace MyCompany\MyModule\Block\Adminhtml\Order;

 * Class ModalBox
 * @package StackExchange\MagentoTest\Block\Adminhtml\Order
class ModalBox extends \Magento\Backend\Block\Template

     * Constructor
     * @param \Magento\Backend\Block\Template\Context  $context
     * @param array $data
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);

     * @return string
    public function getInfo()
        //Your block cod
        return __('Hello Developer! This how to get the ');
    public function getFormUrl()
        $orderId = false;
            $orderId = $this->getOrder()->getId();
        return $this->getUrl('magentotest/order/order',[
            'order_id' => $orderId

Phtml code is below and the location is:

Location: app/code/MyCompany/MyModule/view/adminhtml/templates/order/modalbox.phtml


 * @var $block \ MyCompany \ MyModule \Block\Adminhtml\Order\ModalBox

<div id="popup-modal" style="display: none">

    <form action="<?= $block->escapeUrl($block->getFormUrl())?>" method="post"
        <input name="firstname" type="text">
        <input name="lastname" type="text">
        <input name="phone" type="text">
        <input name="bookingTime" type="date">

        <input type="button" value="Submit" id="order-view-add-warranty">

        function (
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Modal Title',
                modalClass: 'custom-modal',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {

            var popup = modal(options, $('#popup-modal'));
            $("#sendordersms").click(function() {

            $('#order-view-add-warranty').click(function () {
                $('#order-view-add-warranty-form').append($('<input>', {
                    'name': 'form_key',
                    'value': window.FORM_KEY,
                    'type': 'hidden'




Create a plugin class MyCompany\ MyModule \Plugin\CreateWarrantyOrder

Add new after plugin on toHtml() on this class and append MyCompany\ MyModule \Block\Adminhtml\Order\ModalBox block output using this after plugin afterToHtml. And code:


namespace MyCompany \ MyModule \Plugin\Magento\Sales\Block\Adminhtml\Order;

 * Class View
 * @package MyCompany \ MyModule \Plugin\Magento\Sales\Block\Adminhtml\Order
class View

    public function beforeSetLayout(
        \Magento\Sales\Block\Adminhtml\Order\View $subject,
    ) {
                'label' => __('Create Warranty Order'),
                'onclick' => "",
                'class' => 'action-default action-warranty-order',
        return [$layout];

    public function afterToHtml(
        \Magento\Sales\Block\Adminhtml\Order\View $subject,
    ) {
        if($subject->getNameInLayout() == 'sales_order_edit'){
            $customBlockHtml = $subject->getLayout()->createBlock(
            return $result.$customBlockHtml;
        return $result;

Create at Controller class


namespace MyCompany\MyModule\Controller\Adminhtml\Order;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\App\Action\HttpPostActionInterface;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\View\Result\Page;
use Magento\Framework\View\Result\PageFactory;
use Magento\Sales\Controller\Adminhtml\Order as AdminOrder;

class Order extends AdminOrder implements HttpPostActionInterface
     * Changes ACL Resource Id
    const ADMIN_RESOURCE = 'Magento_Sales::hold';
     * @inheritDoc
    public function execute()
        $resultRedirect = $this->resultRedirectFactory->create();

        $order = $this->_initOrder();
        if ($order) {
            $post = $this->getRequest()->getPostValue();

            echo "<pre>";
            $resultRedirect->setPath('sales/order/view', ['order_id' => $order->getId()]);
            return $resultRedirect;
        return $resultRedirect;

Above code are working on local. You have to changes class name and URL as per your requirement.

Should you have any additional questions please feel free to contact us.