Adding a tab to 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. Open the configuration file of your custom Editor in a plain-text or XML editor.
  2. In the extensions section, locate the ext:tabpages section. Inside this section, create or find an <ext:add> element.
  3. 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.

  4. If you intend to place static data only on this new dialog tab, your tab is now finished.
  5. 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.
  6. At the end of the file, call Tridion.Controls.Deck.registerPageType to register this new type of dialog tab under a specific name.
  7. Save this file as a .js file and add it to your Visual Studio solution.
  8. 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.
  9. Add a ContentResources attribute to the server-side class for the ASCX control, and set it to the name of the new resource group.
  10. 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.
  11. Save and close your configuration file and restart the Content Manager Explorer Web application.