Add an order edit panel

The order UI can be customized to meet customer-specific demands. Here we will explain how to add an order edit panel with a field for administrator comments.

There are two types of order panels:

• View panels - shown in the order view page in backoffice.
• Edit panels - shown when an order is edited in the order edit page in backoffice.

Create an order edit panel

The following example shows how to create an order edit panel that includes a field for administrator comments. The text in this field can be edited and then stored as additional order info by selecting Save.

Create an .ascx user control in the wwwroot\Site\ECommerce\Panels directory called SampleOrderEditPanel.ascx. Then add the following code there:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SampleOrderEditPanel.ascx.cs" Inherits="Litium.Accelerator.Mvc.Site.ECommerce.Panels.SampleOrderEditPanel" %>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="litInputTable">
    <tr>
        <td style="width:100%;"><h2>Order edit panel</h2>
        </td>
    </tr>
    <tr>
        <td style="width:100%;">
            Administrator comment
            <asp:TextBox id="OrderCommentTextBox" cssclass="litInputTextArea litInputFullWidth"  runat="server"/>
        </td>
    </tr>
</table>

The CodeBehind file should implement the IPanelData<OrderCarrier> interface. Here is a code sample:

using System.Linq;
using Litium.Foundation.ModuleExtensions;
using Litium.Foundation.Modules.ECommerce.Carriers;

namespace Litium.Accelerator.Mvc.Site.ECommerce.Panels
{
    /// <summary>
    /// Sample panel to show edit mode for the order panel.
    /// </summary>
    public partial class SampleOrderEditPanel : System.Web.UI.UserControl, IPanelData<OrderCarrier>
    {
        private readonly string _administratorCommentKey = "AdministratorComment";

        /// <summary>
        /// Inits the input fields of the panel.
        /// </summary>
        /// <param name="value">Current order carrier.</param>
        public void InitPanelData(OrderCarrier value)
        {
            // Get administrator comment that is stored as additional order info
            var administratorComment = value.AdditionalOrderInfo.FirstOrDefault(x => x.Key == _administratorCommentKey);
            if (administratorComment != null)
            {
                OrderAdministratorCommentTextBox.Text = administratorComment.Value;
            }
        }

        /// <summary>
        /// Save panal data
        /// </summary>
        /// <param name="value">Current order carrier.</param>
        public void SavePanel(OrderCarrier value)
        {
            // Save administrator comment to additional order info
            var administratorComment = value.AdditionalOrderInfo.FirstOrDefault(x => x.Key == _administratorCommentKey);
            if (administratorComment != null)
            {
                administratorComment.Value = OrderAdministratorCommentTextBox.Text;
            }
            else
            {
                value.AdditionalOrderInfo.Add(new AdditionalOrderInfoCarrier(_administratorCommentKey, value.ID, OrderAdministratorCommentTextBox.Text));
            }
        }
    }
}

Add the panel you created

Go to Settings > Sales > Panels

Enter ~/Site/Ecommerce/Panels/SampleOrderEditPanel.ascx in the Edit order field and select Add, then select Save to keep your changes:

Return to the Sales area and edit an order. The Order edit panel with Administrator comment will be displayed at the end of the page:

The text in Administrator comment will automically be visible on the ViewOrder.aspx page: