Recommended procedure to add tabs in administration pages via plugin

Hello everybody,

I'm trying to find the correct way to add new tabs in administration pages via plugin. As far as I have been able to find, the key idea is to implement IConsumer<AdminTabStripCreated> and capture the messages with  TabStripName "product-edit". I saw this technique here:

https://www.nopcommerce.com/boards/t/18721/admintabstribcreated.aspx

Unfortunately it seems that they were using some model called ProductTabsAdminModel, but I can't find any reference to it in my current nopCommerce solution (3.30).

I've seen that I can add new blocks to render. This has made me think on some ways of achieving what I want, but I would like to have, if it's possible, some guidance or documentation about the correct way to do it.

Thanks a lot for your time!

There is an example of how to do it in my License Key plugin.  

Blog post:
http://bitshiftweb.com/license-key-plugin

Full source:
http://bitshiftweb.com/nopcommerce-license-key-plugin

Thanks Andy!,

The thing is, I can't find any reference to the ItemFactory in my solution. It seems according to your code that it should be part of AdminTabStripCreated.

I see that your plugin it's designed for version 3.10 and I'm trying to do something similar in 3.30. Has this class (ItemFactory) been removed?. Is there any new method that I should be aware of?

Thanks a lot!

Edit: I'm seeing in the source code that the TabStripItemFactory was removed and now HtmlHelper is used.

I need to use it as well

3.1 uses telerik which had an option to add a tab with title an html code

3.3 uses Kendoui

there is an option on page to render eventBlock as html code.
I guess u should add the tab to your plugin view somehow, I could not find a decent way to do this.

maybe someone can help up?

Found it

<script>
    $(document).ready(function () {
        AddTab('Tab Title');
    });

    function AddTab(title) {
        var tabStrip = $("#product-edit").kendoTabStrip().data("kendoTabStrip");
        tabStrip.append({ text: title, content: "Your content" });
        tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
    }
</script>

add the above to your view, should work

I had to make it work, I have played with the code and this is the correct one:

  $(document).ready(function () {
                var kTabs = $("#product-edit").data("kendoTabStrip");
                kTabs.append({ text: "Test", contentUrl: "@Url.Content("~/ProductKey/test")" });
            });

u can add it to your HandleEvent and call a url

public void HandleEvent(AdminTabStripCreated eventMessage)
        {
            if (eventMessage.TabStripName == "product-edit")
            {
                ProductKeyController controller = new ProductKeyController(_productService, _genericAttributeService, _permissionService);
                
                int productId = controller.GetProductId();
                string url = "/ProductKey/GetProductKey?productId=" + productId;
                string tabName = _localizationService.GetResource("Nop.Plugin.Misc.LicenseKey");
                var sb = new StringBuilder();

                sb.Append("<script language=\"javascript\" type=\"text/javascript\">");
                sb.Append(Environment.NewLine);
                sb.Append("$(document).ready(function () {");
                sb.Append(Environment.NewLine);
                sb.Append("var kTabs = $('#product-edit').data('kendoTabStrip');");
                sb.Append(Environment.NewLine);
                sb.Append(" kTabs.append({ text: \"" + tabName + "\", contentUrl: \"" + url + "\" });");
                sb.Append(Environment.NewLine);
                sb.Append("});");
                sb.Append(Environment.NewLine);
                sb.Append("</script>");
                sb.Append(Environment.NewLine);
                eventMessage.BlocksToRender.Add(MvcHtmlString.Create(sb.ToString()));
   
            }
        }

Oh yeah, I forgot about the change to KendoUI.  Sorry for the confusion.

Nothing to be sorry about!. Your questions have been super helpful.

I've been working these days over the plugin and I've managed to insert some UI on the products management page. Also, I've learned a bit about Kendo, and I'm able to do CRUD operations.

Instead of adding the Javascript that Hezy wrote directly as a block in the HandleEvent, I've created a view, and this view is rendered as text.

There's only one more thing that seems pretty weird to me. I guess it's something about the Kendo Tab Strip that I don't understand. When you select one tab, it gets the class "k-state-active". When you deselect it, the tab loses this class and the content disappears. This is not happening in my tab. When I select the tab, it gets the class "k-state-active", but it doesn't lose the class no matter what I do. Due to this behaviour, the content of my tab never disappears.

Thanks a lot!

Just to complete the thread (help people that could get here) and as hezyz was pointing out:

  $(document).ready(function () {
                var kTabs = $("#product-edit").data("kendoTabStrip");
                kTabs.append({ text: "Test", contentUrl: "@Url.Content("~/ProductKey/test")" });
            });

This is the correct version to make it work. You have to be careful of not initialize again the kendoTabStrip:

// INCORRECT!!!
var tabStrip = $('#product-edit').kendoTabStrip().data("kendoTabStrip");
// INCORRECT!!!

Thanks for your help,

To further clarify the clarification....in the above:  "@Url.Content("~/ProductKey/test")" } is a route in your plugin routeprovider.