Magento 2: How to Add Editable Field in Admin Order View Page

Hello Magento Friends,

In this Magento 2 tutorial, I will explain How to Add Editable Field in the Admin Order View Page in Magento 2.

The checkout page is the final stage for order placement. Magento 2 merchants customize the checkout page to provide a better user experience. The store owners can determine checkout options for a quick checkout procedure. Admin can add custom checkout fields for a smooth order fulfillment process.

When you have added custom fields at the checkout page and now the admin needs to edit the custom checkout fields value from the backend order view page. You can accomplish it using the below steps.

Contents

1 Steps to Add Editable Field in Admin Order View Page in Magento 2:
2 Conclusion:

Steps to Add Editable Field in Admin Order View Page in Magento 2:

Step 1: Go to the below file path

app\code\Vendor\Extension\view\adminhtml\layout\sales_order_view.xml

Then add the below code

<?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">
    <body>
        <referenceBlock name="order_additional_info">
            <block class="Vendor\Extension\Block\Adminhtml\Order\Checkoutcustomformedit" name="admin.chekoutcustomfield" template="Vendor_Extension::checkoutcustomformedit.phtml" />
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceBlock>

</body>

</page>

Step 2: Next, move to the following file path

app\code\Vendor\Extension\Block\Adminhtml\Order\Checkoutcustomformedit.php

Now add the below-mentioned code snippet

<?php
namespace Vendor\Extension\Block\Adminhtml\Order;

use \Magento\Backend\Block\Template;
use \Magento\Backend\Block\Template\Context;
use \Magento\Sales\Model\Order;

class Checkoutcustomformedit extends Template
{
	protected $order;
	
	public function __construct(
        		Context $context,
        		Order $order,
        		array $data = [])
	{
    	        $this->order = $order;
        	parent::__construct($context, $data);
	}

	public function getOrderId()
        {
		$orderId = $this->getRequest()->getParam('order_id');
		return $orderId;
	}

	public function getCustomfieldvalue()
       {
		$orderId = $this->getOrderId();
		$customfieldvalue = $this->order->load($orderId)->getData('customfield1');
		return $customfieldvalue;
	}
}

<?php

namespace Vendor\Extension\Block\Adminhtml\Order;

use \Magento\Backend\Block\Template;

use \Magento\Backend\Block\Template\Context;

use \Magento\Sales\Model\Order;

class Checkoutcustomformedit extends Template

{

protected $order;

public function __construct(

Context $context,

Order $order,

array $data = [])

{

$this->order = $order;

parent::__construct($context, $data);

}

public function getOrderId()

{

$orderId = $this->getRequest()->getParam('order_id');

return $orderId;

}

public function getCustomfieldvalue()

{

$orderId = $this->getOrderId();

$customfieldvalue = $this->order->load($orderId)->getData('customfield1');

return $customfieldvalue;

}

Step 3: Now navigate to the below file path

app\code\Vendor\Extension\view\adminhtml\templates\Checkoutcustomformedit.phtml

Now add the code as follows

<section class="admin__page-section">
    <div class="admin__page-section-title">
        <span class="title">
              <?php /* @escapeNotVerified */ echo __('Buyer Order Information') ?>
        </span>
        <div id="checkoutfield-edit-link" class="actions block-edit-link">
                        <a href="#"
                           id="edit-checkoutfield-info">
                            <?= $block->escapeHtml(__('Edit')); ?>
                        </a>
        </div>
    </div>
    <div class="admin__page-section-content">
        <div class="order-information textfied" id="textfiedcustomfield">
                <div class="box">
                    <div class="box-content">
                        <?php echo $block->getCustomfield1(); ?>
                    </div>
                </div>
        </div>
    </div>
    <div class="admin__page-section-item-content edit-checkoutfield-date" id="edit-checkoutfield-info-form"
         style="display: none;">      
            <fieldset class="admin__fieldset">
                <input type="hidden" id="orderid" value="<?php 
                $objectManager = \Magento\Framework\App\ObjectManager::getInstance();  
                $request = $objectManager->get('Magento\Framework\App\Request\Http');  
                echo $param = $request->getParam('order_id');?>"/>           
                <input type="text" id="customfield1" class="customfield1" value="<?php echo $block->getCustomfield1(); ?>">
            </fieldset>
            <button id="customfield-submit">Submit</button>
    </div>
</section>
<script type="text/javascript">
                require([
                    'jquery',
                    'mage/validation',
                    'mage/translate',
                    'jquery/ui'
                ], function ($) {
                   
                    document.getElementById('edit-checkoutfield-info').addEventListener('click', function (e, t) {
                        e.preventDefault();
                        $('#edit-checkoutfield-info-form').toggle();
                    });
                    $("#customfield-submit").click(function() {
                        var orderid = $('#orderid').val();
                        
                        if($('#customfield1').length){
                           var customfield1 = $('#customfield1').val();
                        }
                        var url = '<?= /** @noEscape */ $block->getUrl("groupproduct/queue/update")?>';
                            jQuery.ajax({
                            url: url,
                            data: {orderid: orderid,customfield1value: customfield1},
                            type: "POST",
                            async: false,
                        }).done(function (response) {
                        $("#textfiedcustomfield").load(location.href + " #textfiedcustomfield");
                        });

                    });            
                });
</script>

<?php /* @escapeNotVerified */ echo __('Buyer Order Information') ?>

</span>

<a href="#"

id="edit-checkoutfield-info">

<?= $block->escapeHtml(__('Edit')); ?>

</a>

</div>

<?php echo $block->getCustomfield1(); ?>

</div>

<div class="admin__page-section-item-content edit-checkoutfield-date" id="edit-checkoutfield-info-form"

style="display: none;">

<input type="hidden" id="orderid" value="<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$request = $objectManager->get('Magento\Framework\App\Request\Http');

echo $param = $request->getParam('order_id');?>"/>

<input type="text" id="customfield1" class="customfield1" value="<?php echo $block->getCustomfield1(); ?>">

</fieldset>

<button id="customfield-submit">Submit</button>

</div>

</section>

require([

'jquery',

'mage/validation',

'mage/translate',

'jquery/ui'

], function ($) {

document.getElementById('edit-checkoutfield-info').addEventListener('click', function (e, t) {

e.preventDefault();

$('#edit-checkoutfield-info-form').toggle();

});

$("#customfield-submit").click(function() {

var orderid = $('#orderid').val();

if($('#customfield1').length){

var customfield1 = $('#customfield1').val();

}

var url = '<?= /** @noEscape */ $block->getUrl("groupproduct/queue/update")?>';

jQuery.ajax({

url: url,

data: {orderid: orderid,customfield1value: customfield1},

type: "POST",

async: false,

}).done(function (response) {

$("#textfiedcustomfield").load(location.href + " #textfiedcustomfield");

});

</script>

Step 4: At last, move to the following file path

app\code\Vendor\Extension\Controller\Adminhtml\Queue\Update.php

And add the code mentioned below

 <?php

namespace Vendor\Extension\Controller\Adminhtml\Queue;

use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Exception\LocalizedException;
use Magento\Backend\App\Action;
use Magento\Sales\Api\OrderRepositoryInterface;

class Update extends Action
{
    protected $quoteFactory
    protected $orderinterface;
    protected $request;

    public function __construct(
        Action\Context $context,
        \Magento\Quote\Model\QuoteFactory $quoteFactory,
        \Magento\Sales\Api\Data\OrderInterface $orderinterface,
        \Magento\Framework\App\Request\Http $request)
    {
        parent::__construct($context);
        $this->orderinterface = $orderinterface;
        $this->request = $request;
        $this->quoteFactory = $quoteFactory;
    }
   
    public function execute()
    {
        $customfield1value = $this->getRequest()->getPostValue('customfield1value');
        $orderid = $this->getRequest()->getPostValue('orderid');
        $order = $this->orderinterface->load($orderid);
        $order->setData('customfield1', $customfield1value);
        $order->save();
    }
}

<?php

namespace Vendor\Extension\Controller\Adminhtml\Queue;

use Magento\Framework\App\ResponseInterface;

use Magento\Framework\Exception\LocalizedException;

use Magento\Backend\App\Action;

use Magento\Sales\Api\OrderRepositoryInterface;

class Update extends Action

{

protected $quoteFactory

protected $orderinterface;

protected $request;

public function __construct(

Action\Context $context,

\Magento\Quote\Model\QuoteFactory $quoteFactory,

\Magento\Sales\Api\Data\OrderInterface $orderinterface,

\Magento\Framework\App\Request\Http $request)

{

parent::__construct($context);

$this->orderinterface = $orderinterface;

$this->request = $request;

$this->quoteFactory = $quoteFactory;

}

public function execute()

{

$customfield1value = $this->getRequest()->getPostValue('customfield1value');

$orderid = $this->getRequest()->getPostValue('orderid');

$order = $this->orderinterface->load($orderid);

$order->setData('customfield1', $customfield1value);

$order->save();

}

Conclusion:

This way you can Add an editable field in the admin order view page in Magento 2. If you face any difficulty, share it with me through the comment section. Stay updated with us for more Magento solutions.

Happy Coding!

Click to rate this post!

[Total: 7 Average: 3.9]

4 Comments

Thomas on September 13, 2023

OK, but what do I have to insert instead of “groupproduct”? The Vendor and/or Extension name does not work. Always returns 404.

- MageComp on September 22, 2023
  
  groupproduct is the URL path for the editable fields added there.
  
Sonu on November 26, 2022

The path is you mentioned it does not exists.

- magecomp on December 10, 2022
  
  Yes because This is not a Magento default extension. You need to create the custom extension and implement the code