Documentation Center

Separating Page Design and Component Design

Page visualization is handled by a Page Template and content visualization is handled by a Component Template.

About this task

You might logically expect to have to create an Adobe Dreamweaver Template to use in a Page Template and a different Adobe Dreamweaver Template to use in a Component Template.

However, Adobe Dreamweaver has no conception of Components; a Component is a concept proprietary to SDL Tridion Sites. As a result, an Adobe Dreamweaver Template (a .dwt file) can, as a whole, only be used to transform Pages, not Components.

The solution to this problem is to create a .dwt file that contains an identifiable section devoted to the transformation of a Component, and then specify in your Component Template which identifiable section that is. The Component Template then ignores the rest of the .dwt file, but uses the identified section to transform the Component.

You could make a specific .dwt file for use in a Component Template. If you do that, anything outside the identifiable section is always ignored, and is therefore irrelevant. In addition to that, you could have a separate .dwt file for use in a Page Template.

But it is unnecessary to have separate .dwt files for these purposes. Instead, it is better create one Adobe Dreamweaver Template (.dwt file) that you can use both for a type of Page and for one or more types of Components. You add this multi-purpose file as the binary content of a Template Building Block that you can use in a Component Template to visualize a Component, and in a Page Template to visualize a Page.

Note that this multi-purpose Template Building Block specifies only one possible visualization of a type of Component. You can create any number of Dreamweaver Template Building Blocks, specifying different visualizations of the same type of content. For example, you can create one Dreamweaver Template Building Block that shows all the content fields of the Component, and another that shows only a few fields, to provide a 'summary' visualization.

Procedure

  1. Create an Adobe Dreamweaver Template as explained in Creating a Dreamweaver Template.
  2. For each type of Component that you want to visualize on this type of Page, create a repeating region in this Template, as explained in Processing arrays of items by creating repeating regions. If your page contains only one type of Component, create one repeating region and call it Components.
  3. Create the page design outside the repeating regions.
  4. Inside each repeating region, create a visualization for the type of Component in that region.
  5. Save the Adobe Dreamweaver Template to Content Manager. This creates a Template Building Block in Content Manager.
  6. Open the Template Building Block and in the General tab, set the Parameters Schema to Dreamweaver Region Selection Parameter Schema (this is a default Parameter Schema that is included with the default Template Building Blocks and default Compound Templates). Then Save and Close the Template Building Block.

    This Parameters Schema contains one parameter called Selected Repeating Region.

  7. Using Template Builder, do the following for each type of Component you render in a repeating region of the Dreamweaver template:
    • Create a Compound Component Template that uses the Template Building Block you just created (and probably a number of other Template Building Blocks, such as the default Template Building Block "Default Finish Actions").
    • When you include this Template Building Block, set the Selected Repeating Region parameter to the name of the repeating region that contains the design for that type of Component.
    • Run this Compound Component Template against a Component of the current repeating region, and debug it if necessary. Then save and close the Compound Component Template, but do not close Template Builder.
    • Your new Component Template appears in the Recent items list of Template Builder. Make note of the Content Manager URI of this Compound Component Template. You can see the URI appear in the status bar when you hover over the Template.
    You now have one or more Component Templates, and their Content Manager URIs.
  8. Switch back to your Adobe Dreamweaver Template.

    Inside each repeating region, do the following:

    • Make the Component visualization you created earlier conditional by putting it in an optional region (see Creating optional regions). Set the condition of this region to !Page (that is, it checks for the absence of an item called Page in the package). Now, this part will only be executed if the Template Building Block is part of a Component Template.
    • Create another optional region that has the condition Page (that is, it checks for the presence of an item called Page in the package) and contains the following statement:
      @@RenderComponentPresentation(Component.ID, "tcm:6-60-32")@@

      where tcm:6-60-32 is the Content Manager URI of the Component Template you created for this repeating region. This part will only be executed if the Template Building Block is part of a Page Template.

  9. Using Template Builder, create a Page Template that includes this Template Building Block, and leave the Selected Repeating Region parameter empty. This way, the Page Template uses every part of the Adobe Dreamweaver Template, except the optional regions with the !Page condition, which contain Component design.

Results

You now have a single Adobe Dreamweaver template that you can use to visualize Component and Pages.