Area and Group Options

The general objective of the Escenic system is to separate content creation and editing from layout: creating and editing is the responsibility of editing staff, layout is the responsibility of designers and template developers. When editing a section page, the Content Studio can choose what to place on the page and where to place it, but cannot in general modify the appearance of the teasers placed on the page.

Area and group options provide a means of softening this division of responsibilities and providing editorial staff with some additional control over section page layout. The news group's header area is defined as follows in the layout-group resource:

    <area name="header">
      <ui:label>Header</ui:label>
      <ui:description>Content placed here will appear at top of page</ui:description>
      <ct:options scope="current">
        <ct:field type="enumeration" name="news-area-background">
          <ui:label>Area background</ui:label>
          <ui:description>Changes the area background</ui:description>
          <ct:enumeration value="white">
            <ui:label>white</ui:label>
          </ct:enumeration>
          <ct:enumeration value="blue">
            <ui:label>blue</ui:label>
          </ct:enumeration>
          <ct:enumeration value="red">
            <ui:label>red</ui:label>
          </ct:enumeration>
        </ct:field>
      </ct:options>
      <ct:options>
        <ct:field type="enumeration" name="border">
          <ui:label>Style</ui:label>
          <ui:description>Sets the style of the header</ui:description>
          <ct:enumeration value="border: 1px solid black;">
            <ui:label>Border</ui:label>
          </ct:enumeration>
          <ct:enumeration value="border: 5px solid black;">
            <ui:label>Fat Border</ui:label>
          </ct:enumeration>
          <ct:enumeration value="background: #F55;">
            <ui:label>Red Background</ui:label>
          </ct:enumeration>
        </ct:field>
      </ct:options>      
    </area>

As you can see there are two sets of options defined in the header area:

The first ct:options element has a scope attribute set to "current". This means that the options it defines apply to the header area itself. It defines an option called news-area-background, an enumeration containing three CSS settings. The options defined here are displayed in Content Studio whenever the user selects the header area itself.
The second ct:options element has no scope attribute. This means that it uses the default scope setting, "items", and the options it defines apply to the content of the header area. It is an enumeration containing three CSS settings labelled Border, Fat Border and Red Background. The options defined here are displayed in Content Studio whenever the user selects a content item summary placed in the header area.

Note that the ct:options element is not actually a member of the layout-group namespace, it is "borrowed" from the content-type namespace. If you use this element, therefore, you must include a declaration of the content-type namespace in the layout-group resource, as follows:

<groups xmlns="http://xmlns.escenic.com/2008/layout-group"
        xmlns:ct="http://xmlns.escenic.com/2008/content-type"
        xmlns:ui="http://xmlns.escenic.com/2008/interface-hints">
...
</groups>

Any option values defined in this way are made available to the template developer in PresentationElement beans that represent content item summaries. The options are made available in a Map field called options so that they can be addressed by name. The options for the area itself can be retrieved from the area using JSTL expression like this:

${pool.rootElement.areas.header.options['news-area-background']}

The options for the individual content items in the area can retrieved as shown in this extract from the section page template group/news.jsp:

      <div style="${pool.rootElement.areas.header.items[0].options.border}">
        <c:set var="element" value="${pool.rootElement.areas.header.items[0]}" scope="request"/>
        <jsp:include page="ats.jsp"/>
      </div>

To see the whole of the above JSP file, look in Section Page Templates.

You can add ct:option elements to group elements as well as to area elements, and use them in a similar way. It is particularly useful to add ct:option elements to root groups. Adding a ct:option element to a root group makes it possible to change the layout of entire pages from within Content Studio.

It is important to be clear about how the various different kinds of options are applied:

Group options apply to the group itself.
Area options (scope="current") apply to the area itself.
Area item options apply to the content of the area.

You can see this difference in the way Content Studio displays options. Group and area options are displayed when the group/area itself are selected, whereas area item options are displayed whenever one of the elements in the area is selected. In the example shown above, for example, each teaser added to the header area can have a different border option setting.

A group placed inside an area can therefore have both area item options defined in the enclosing area and its own group options.