Documentation Center

Adding a new tab to a Ribbon toolbar

Add a new tab (also called a page) to a Ribbon toolbar to populate it with control groups and controls.

Procedure

  1. Open the configuration file of your custom Editor in a plain-text or XML editor.
  2. In the extensions section, locate the ext:ribbontoolbars section. Inside this section, create or find an <ext:add> element.
  3. For every new Ribbon toolbar you want to create, insert an ext:extension element with the following contents:
    <ext:extension pageid="MyTabID" name="My Tab" assignid="MyTabID" insertbefore="AnotherTabID">
    	<ext:control/>
    	<ext:pagetype/>
    	<ext:apply>
    		<ext:view name="VIEW_NAME">
    			<ext:control id="TOOLBAR_NAME"/>
    		</ext:view>
    	</ext:apply>
    </ext:extension>

    where MyTabID is the internal identifier of your Ribbon tab, My Tab refers to the display name of this new tab, and AnotherTabID refers to the Ribbon toolbar tab to the left of which you want to insert your tab (omit insertbefore to make your tab the rightmost tab). You can find out the ID of a toolbar tab by examining the HTML of a Web page that displays the tab (the IDs end in the word 'Page').

    The ext:view identifies which Ribbon toolbar in which view the tab should be added to:

    Web site Ribbon toolbar
    To add the button to the Ribbon that end users see when they edit a Web page, replace VIEW_NAME with EditorView and replace TOOLBAR_NAME with MainToolbar.
    Content Manager Explorer Ribbon toolbar
    To add the button to the Ribbon of the Content Manager Explorer user interface, replace VIEW_NAME with DashboardView and replace TOOLBAR_NAME with DashboardToolbar.
  4. By default, a new Ribbon toolbar tab can contain control groups and controls similar to the ones in other Ribbon tabs. To make completely new and custom controls in your custom Ribbon toolbar tab, create an ASCX control that inherits from the class Tridion.Web.UI.Controls.TridionUserControl, and implement your custom control. Refer to the GUI Extension API reference documentation for details. If you do this, set the contents of ext:control to the path to this ASCX control; a value that starts with ~/ indicates that the path is relative to the root folder of your custom Editor.
  5. You can also set a client-side page type in ext:pagetype, to associate your server-side control with a client-side implementation. Creating such a client-side implementation involves the following:
    1. Create a JavaScript class that inherits from Tridion.Controls.RibbonPage and defines your custom implementation of the Ribbon tab. Save as a .js file.
  6. Save and close your configuration file and restart the Content Manager Explorer Web application.