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
- From the Add-ons screen in Content Manager Explorer, download the Add-on package (ZIP file) that contains your GUI Editor extension.
- From the ZIP file you downloaded, extract the GUI Editor's configuration file and open it for editing.
- In the
extensionssection, locate theext:ribbontoolbarssection. Inside this section, create or find an<ext:add>element. - For every new Ribbon toolbar you want to create, insert an
ext:extensionelement 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
insertbeforeto 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:viewidentifies 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
EditorViewand replace TOOLBAR_NAME withMainToolbar. - Content Manager Explorer Ribbon toolbar
-
To add the button to the Ribbon of the Content Manager Explorer user interface, replace VIEW_NAME with
DashboardViewand replace TOOLBAR_NAME withDashboardToolbar.
- 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:controlto 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. - 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:- Create a JavaScript class that inherits from Tridion.Controls.RibbonPage and defines your custom implementation of the Ribbon tab. Save as a .js file.
- Save and close the configuration file and update it in the ZIP file. You may want to increase the build number in the filename of the ZIP file, or even the version number of the Add-on (which you must also then change in the manifest file).
- From the Add-ons screen in Content Manager Explorer, upload the updated Add-on package (ZIP file). It replaces your old Add-on package.