Documentation Center

Extending tabs in a dialog

Add a tab to a dialog, such as a Component dialog or a Schema dialog, to populate it with controls and/or information.

Procedure

  1. From the Add-ons screen in Content Manager Explorer, download the Add-on package (ZIP file) that contains your GUI Editor extension.
  2. From the ZIP file you downloaded, extract the GUI Editor's configuration file and open it for editing.
  3. In the extensions section, locate the ext:tabpages section. Inside this section, create or find an <ext:add> element.
  4. For each new dialog tab you want to create, insert an ext:extension element that has the following form:
    <ext:extension assignid="MyDialogTabID" name="My Dialog Tab" insertbefore="InfoTab">
    	<ext:control>~/Extensions/Tabs/MyDialogTab.ascx</ext:control>
    	<ext:pagetype />
    	<ext:apply>
    		<ext:view name="*">
    			<ext:control id="MasterTabControl"/>
    		</ext:view>
    	</ext:apply>
    </ext:extension>

    where MyDialogTabID identifies the new tab, My Dialog Tab is the display label of the tab, and the value of insertbefore indicates to the left of which tab the new tab will be positioned. The ext:view element specifies where to add this new tab. In this example, the new tab is added to all views that contain a control called MasterTabControl.

  5. If you intend to place static data only on this new dialog tab, your tab is now finished.
  6. Alternatively, if you intend to place controls and/or dynamic data on it, continue by creating a JavaScript class that inherits from Tridion.Controls.DeckPage and that defines your custom implementation of the new dialog tab.
  7. At the end of the file, call Tridion.Controls.Deck.registerPageType to register this new type of dialog tab under a specific name.
  8. Save this file as a .js file and add it to your Visual Studio solution.
  9. Create a new cfg:group element for this JavaScript file in your custom Editor's configuration file, and give it a dependency on the group that represents the set of tabs you want to add it to.
  10. Add a ContentResources attribute to the server-side class for the ASCX control, and set it to the name of the new resource group.
  11. In the ext:extension element that defines the new dialog tab, set ext:pagetype to the name under which you registered your new dialog tab in the JavaScript file.
  12. 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).
  13. From the Add-ons screen in Content Manager Explorer, upload the updated Add-on package (ZIP file). It replaces your old Add-on package.