Add a Button to a Tab

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.

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() != Constants.UI.Pages.Settings.Search) return PipelineExecutionResult.Success;
    
    	var section = subject.Sections.FirstOrDefault(s => s.OriginalName == Constants.UI.Sections.Settings.Search.Common);

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.

    
    	public ImageButton CreateServerSideButton()
    	{
    		var serverSideButton = new ImageButton();
    		serverSideButton.ImageUrl = Resources.Images.Menu.Sort;
    		serverSideButton.CausesValidation = false;
    
    		//The client side command which executes on right click.
    		var 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;
    	}

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.

    
    	section.Menu.AddMenuButton(CreateServerSideButton());

Removing a Button

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

    
    	section.Menu.RemoveMenuButtion(imageButton);

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 indepently 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