How to add a tab to the Order in the admin area in Nop 4.1

In nop 3.8 we could simply add a tab to the Order tabs by using the following implementation:

 public void HandleEvent(AdminTabStripCreated eventMessage)
        {
            if (eventMessage.TabStripName == "order-edit")
            {
                OrderModel om = eventMessage.Helper.ViewData.Model as OrderModel;

                string currentTabName = _localizationService.GetResource("Actopus.Nop.Plugin.Shipping.MyParcel.Menu.TabStripItem");
                string url = "../../../Plugins/MyParcel/Labels/" + om.Id;

                eventMessage.BlocksToRender.Add(new MvcHtmlString(
                    "<script>"
                            + "$(document).ready(function() {"
                                + "$(\"<li><a data-tab-name='tab-name' data-toggle='tab' href='#tab-name'>"
                                + _localizationService.GetResource("Actopus.Nop.Plugin.Shipping.MyParcel.Menu.TabStripItem")
                                + "</a></li> \").appendTo('#order-edit .nav-tabs:first');"

                                + "$.get('" + url + "', function(result) {"
                                + "$(\" <div class='tab-pane' id='tab-name'>\" + result + \"</div>\").appendTo('#order-edit .tab-content:first');"
                                + "});"
                            + "});"
                    + "</script>"));

              
            }
        }

I noticed that this mechanism still adds a tab to the tab control. However I have a feeling that this is no longer the preferred solution especially as the tab view now gets its contents async.

Any input would be highly appreciated
thx
Stefan

This mechanism has not changed and although custom tabs are loaded with some slack, it still functions.

Hello actOpus

try this...

step:1
use interface IConsumer<AdminTabStripCreated>

step:2
public async void HandleEvent(AdminTabStripCreated eventMessage)
{
  if (eventMessage?.Helper == null)
    return;
    
  var tabsElementOrderId = "order-edit";
  
  if (!eventMessage.TabStripName.Equals(tabsElementOrderId))
            return;
  
  //get the view model
    if (!(eventMessage.Helper.ViewData.Model is OrderModel orderModel))
            return;
  
  //prepare model
  var model = new CustomTabModel();
  model.orderId = orderModel.Id
  
  var orderCustomTabElementId = "tab-custom";
  
  var CustomTab = new HtmlString($@"
        <script>
            $(document).ready(function() {{
                $(`
                    <li class='advanced-setting'>
                        <a data-tab-name='{orderCustomTabElementId}' data-toggle='tab' href='#{orderCustomTabElementId}'>
                            {_localizationService.GetResource("Nop.Plugin.PluginName.Tab.CustomTab")}
                        </a>
                    </li>
                `).appendTo('#{tabsElementOrderId} .nav-tabs:first');
                $(`
                    <div class='tab-pane' id='{orderCustomTabElementId}'>
                        {
                                (await eventMessage.Helper.PartialAsync("~/Plugin/PluginName/Tab/Custom/TabCustomTab.cshtml", model)).RenderHtmlContent()
                                    .Replace("</script>", "<\\/script>") //we need escape a closing script tag to prevent terminating the script block early
                        }
                    </div>
                `).appendTo('#{tabsElementOrderId} .tab-content:first');
            }});
        </script>");

    //add this tab as a block to render on the Order details page
    eventMessage.BlocksToRender.Add(CustomTab);
        
}

It can be help for you.