Add a Button to a Tab (deprecated)

Before you read on, please know that extensibility in our webforms framework is deprecated and will be removed soon. Please read here for a little more context.

This article will teach you how to add a button to a tab across all of the CMSs that Ucommerce supports from a single codebase. The sample app project has examples on how to create both a client-side button and server-side button

Note that tabs are called sections in the code.

Client-Side Button vs. Server-Side Button

A client-side button is a button that executes javascript on the fronted.

A server-side button is a button that executes a delegate in the backend.

Adding a Button to an Existing Tab

The Page Builder Pipeline

Prior to executing the page builder pipeline Ucommerce will setup all default tabs. This means that you can modify the default tabs in regards to: remove a default tab, add additional tabs and add addition buttons to the default tabs. The latter is the case this article will look into.

You have to implement your own pipeline task to hook in a button on an existing tab. You can read about Pipelines if you are interested in how they work.

Finding the Right Tab

To help you find the right page and tab, The constants class has expanded so it now contains information that can be used to identify pages and tabs. Below is an example on how to get the only tab on the search node in the settings part of the tree.

    if (subject.GetViewName() != Ucommerce.Constants.UI.Pages.Settings.Search) return PipelineExecutionResult.Success;

Adding Your Button

Before you can add your button to a tab, you have to actually create your button. The example below is taken from the The sample app project and it shows how you can create a server-side button, which also execute some javascript on the frontend.

    
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ucommerce.Infrastructure.Globalization;
    
    public class AddAButtonToTab 
    {
        private readonly IResourceManager _resourceManager;
    
        public AddAButtonToTab(IResourceManager resourceManager)
        {
            _resourceManager = resourceManager;
        }
        
        public ImageButton CreateServerSideButton()
        {
            ImageButton serverSideButton = new ImageButton();
            serverSideButton.ImageUrl = Resources.Icons.dashboard;
            serverSideButton.CausesValidation = false;
    
            //The client side command which executes on right click.
            string translatedConfirmText = _resourceManager.GetLocalizedText("SampleApp", "confirmScratchIndexing");
            serverSideButton.Attributes.Add("onclick", "if (confirm('" + translatedConfirmText + "')) { return true; } else return false;");
    
            //The server side command which executes on right click.
            serverSideButton.Click += IndexEverythingFromSratchMethod;
            return serverSideButton;
        }
    
        private void IndexEverythingFromSratchMethod(object sender, ImageClickEventArgs e)
        {
            //Do something
        }
    }

Once you have found the tab that you want to add your button to and you have created your button, adding your button is as easy as shown below.

    subject.Sections[0].Menu.AddMenuButton(new ImageButton());

Removing a Button

You can also remove existing buttons from a tab as shown below.

    subject.Sections[0].Menu.RemoveMenuButton(subject.Sections[0].Menu.ImageButtons[0]);

Icon and Localized Texts

To help you get the icon for your button there is a IPathService, which gives you the relative path to the Ucommerce root folder independently of the CMS.

Localized texts will make your button fit in a more sublet way as the backend is localized. To do this you can use the IResourceManager and .resx files.

The sample app project has examples on both how to use the IPathService and how to get localized texts for your button.

Documentation