Properties Tags Overview

Overview

Page properties can be used for managing nearly any page characteristic, including metadata, parameters, and configuration properties. Page properties allow for dynamic control for what a page can include or even the page layout as they provide a means to pass a variable to the XSL. Page property functionality includes:

  • Editing hidden content, such as meta keywords, description, and author
  • Including predetermined keywords for taxonomy
  • Adding content objects, such as images and media, like Flash files
  • Adding a script to run on a page
  • Determining where the added content objects appear on a page
  • Selecting a page template; for example to determine layout options like one-, two-, or three-column page layout
  • Choosing a CSS skins to determine the styling options of a page
  • Selecting a page header from a list of available possibilities
  • Adding or removing editable regions
  • Determining outputs

These are some of the many possible applications web site administrators can provide to users without having to worry about user error or editing code. By default, page properties are accessible to Level 5 users and above. Access settings and groups can be used to control access to specific pages, editable regions, and, important to this discussion, page properties. Different page properties can be made available to different groups and groups can be assigned to control access.  

The properties include is generally used for directory properties that should be editable by a user since directory variables are available to level 10 administrators only. It is also commonly used for the friendly breadcrumb name of the directory. If the implementation does not have directory-based properties or need to have an editable breadcrumb, then it will not include a properties file.

OU Campus Taxonomy

OU Campus supports several tagging styles as a transition was made from the traditional comment style, com.omniupdate, tags to newer node style, ouc:properties (for example). There is also a transitional tagging style. While all styles are supported, more recent implementations use the node style tagging. For example,

<ouc:properties></ouc:properties>

Additionally, with the roll-out of OU Campus version 10, changes in the interface include slightly different nomenclature for onscreen items. For example, the Properties button in a page action view, provides access to several items and not just page properties. A users inherent authority level and access settings determine what is visible, as Parameters, RSS, Access, and Log are all potential visible.

Formerly, page properties were lumped together as, well, page properties in the interface. Now under Properties > Parameters are shown in the Page Parameters panel and include the Title and Meta Tags, and Custom Settings areas. This reflects (loosely) what is available for developers as the system supports the following nodes: title, meta and parameter. This usually includes config and metadata nodes that encapsulate a separate set of properties tags. The config and metadata might be formed by the use of a label within the tag or might be of a node structure that encapsulates the properties tags. For example:

<metadata>
<!-- com.omniupdate.properties -->
<meta name="Description" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<!-- /com.omniupdate.properties -->
</metadata>

Properties in the CMS

Properties nodes can be targeted in the XSL, for example, with XPath or a function. Using the built-in functionality within the XSLs for page properties allows options to be presented to users. Based on their choices, code and content is omitted from a page, rather than just being hidden in preview or commented out on a published page. 

The XSLs include an xsl:function, ou:pcfparam, that can be used to select and store the value of a specific parameter. The value can then be used to customize the page. For example, if the page template includes a property for page type, and the possible values are one-column, two-column, or three-column, then the page layout can be determined at the time of page creation.

Page Type

To further this example, the PCF includes a parameter named layout:

<parameter
name="layout"
group="Everyone"
type="select"
prompt="Page Type"
alt="Select the layout of the page.">
.
.
.

The parameter element includes children that provide the options:

<option value="onecol" selected="false">One Column</option>
<option value="twocol" selected="true">Two Column</option>
<option value="threecol" selected="false">Three Column</option>
</parameter>

The value of the option selected by the user, for example "twocol" is used by the XSL to create the div and classes, and call the template that provides the layout for a two-column page. The xsl:template might include further customizations based upon the choices for other page parameters, such as whether or not to include a banner.

Page Type: Two Column

This particular example is a configuration parameter and is contained with the properties tag with the config label. For example in the PCF:

<ouc:properties label="config">
<parameter name="layout" group="Everyone" type="select" prompt="Page Type" alt="Select the layout of the page.">
<option value="onecol" selected="false">One Column</option>
<option value="twocol" selected="true">Two Column</option>
<option value="threecol" selected="false">Three Column</option>
</parameter>
</ouc:properties>

The page also includes a title and description for the page, which falls under the metadata attribute node.

<ouc:properties label="metadata">
 <title>History of Gallena University</title>
<meta name="description" content="Learn about Gallena U's rich history." />
</ouc:properties>

Even though when creating or editing a template or editing XSL for the properties tags, the metadata and parameters are included within separate properties tags and use the label attribute, the user in the interface sees both of these panels from Properties > Parameters. One is titled Page Title and Meta Tags, and the other is Configuration Parameters.

Properties Parameters

More Details about Customizing Properties

A singular PCF could be edited and a unique property tag added to it, but more frequently the properties are included within the file set for a template. Metadata; that is, the title, description, and specific meta tags are usually defined by a user at page creation. Configuration properties or custom settings can also be defined by the user at page creation time. In both cases, there are going to be some that are intended to editable by a user after page creation and some that are not. 

Page properties present a forms-based view and editing method. Anything that can be put into a form can be built into the template. Form-based option types include:

  • Single-line and multi-line text boxes
  • Drop-down selectors
  • Radio buttons
  • Checkboxes
  • File Chooser
  • Date-Time Picker
  • Unlimited number and combination of types

Properties as an Include

Depending upon the implementation, properties may be added with an include file. The properties include is generally used for directory properties that should be editable by a user as directory variables are available to level 10 only. It is also commonly used for the friendly breadcrumb name of the directory. If the implementation does not have directory-based properties or an editable breadcrumb, then it probably would not include a properties file.

Examples

PCF/XML-based Implementations

Advanced configuration parameters are written in eXtensible Markup Language (XML) and reside in the publish control file (PCF) or an include file. Because these parameters are XML-based, they are not supported on pages without an XML Stylesheet Language Translations (XSLT) implementation. 

The PCF is an XML file, which is processed by the XSL engine into an HTML document. This process is shown in the following flowchart diagram:

PCF-XSL Process Flowchart 

Frequently Used Functionality

Advanced parameters can be used to control the behavior of a page within a restricted, user-friendly form that is easy to implement. This section outlines several applications and briefly explains how to implement them. These include showing/hiding regions, selecting pre-defined keywords, positioning objects, changing templates, positioning objects, controlling navigation locations, using a file chooser, choosing an RSS feed, using an XML resource, choosing a CSS skin, and specifying and outputting an image.

Show or Hide a Page Region

Page properties are implemented in the PCF file, and are used by the XSL stylesheet when rendering the page as HTML. Using a radio button, a page region may be turned on and off using conditional logic in an XSL stylesheet. To begin, insert a radio option page property tag into the <!-- com.omniupdate.properties --> section. Page parameters should be located within an XML <config> tag, as shown in the code sample below.

PCF File Showing a Radio Button Parameter Field

<?xml version="1.0" encoding="utf-8"?>
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html"?> <!DOCTYPE document SYSTEM "http://www.gallenauniversity.com/_resources/dtd/standard.dtd"> <document> <config> <!-- com.omniupdate.properties --> <parameter name="details_box" type="radio" group="Everyone" prompt="Details Box" alt="Enable the Details Box?">
<option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </parameter> <!-- /com.omniupdate.properties --> </config> <!-- com.omniupdate.properties --> <title>Gallena University Athletics</title> <!-- /com.omniupdate.properties --> <content> </content> </document>

 

Next, use an <xsl:if> statement to control whether the region is displayed on the page. This will reside in the XSL template file.

Example XSL Conditional Logic to Tests if a Page Property Is Set

<xsl:if test="document/config/parameter[@name='details_box']/option[@selected='true' and @value='true']">
<xsl:copy-of select="document/content/details_box/node()" /> </xsl:if>

If the selected parameter option does not have a value of "true", the XSL stylesheet does not display the content region on the page. In this way, a content region may be shown or hidden using an easily adjustable page property.

Pre-determined Keywords

The traditional way of specifying meta keywords is using a comma separated list of terms that are related to a page. Advanced configuration parameters make this process even easier.

A potential list of keywords may be defined in the page properties window as a set of checkbox fields, with a checkbox assigned to each keyword; the user can then select the desired keywords.

The following code snippet shows a set of checkbox options that determine the meta keywords. XSL should be used to convert this parameter tag into an XHTML meta tag in the published file. 

Example of Checkbox Page Property Field — Allows the Selection of Predefined Meta Keywords

<parameter name="keywords" type="checkbox" group="Everyone" prompt="Keywords" alt="Select keywords that relate to this page.">
   <option value="academics" selected="false">Academics</option>
   <option value="admissions" selected="false">Admissions</option>
   <option value="matriculation" selected="false">Matriculation</option>
   <option value="athletics" selected="true">Athletics</option>
   <option value="sports" selected="true">Sports</option>
   <option value="basketball" selected="true">Basketball</option>
   <option value="football" selected="true">Football</option>
   <option value="volleyball" selected="true">Volleyball</option>
   <option value="tennis" selected="true">Tennis</option>
</parameter>

 

XSL Parameter Variable — Retrieves the Parameter Pagetype Setting

<meta name="keywords">
<xsl:attribute name="content">
<xsl:for-each select="document/config/parameter[@name='keywords']/option[@selected='true']">
<xsl:value-of select="@value" />
<xsl:if test="position()!=last()">
<xsl:text>, </xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:attribute>
</meta>

 

Positioning Objects

Object positioning can be controlled using parameters and XSL. In the following example, a page properties select field is used to control the position of a content box on the page. 

Select Page Property Field — Determines Location of a Content Box within the Page

<parameter name="box_position" type="select" group="Everyone" prompt="Details box position?" alt="Specify the position of the details box.">
<option value="right_top" selected="true">Right Top (Box)</option>
<option value="top_banner" selected="false">Top (Banner)</option>
<option value="bottom" selected="false">Bottom (Banner)</option>
<option value="hide" selected="false">Hide</option>
</parameter>

 

Changing Templates

Change page template quickly and easily using page properties and XSL. Define a select field page property for "pagetype" and apply the appropriate XSL logic. 

Select Page Property Field — Determines the Template Pagetype

<parameter name="pagetype" type="select" group="pagetype_editors" prompt="Pagetype" alt="Specify a template pagetype.">
<option value="full_screen" selected="true">Full Screen</option> <option value="two_column" selected="false">Two-column</option> </parameter>

 

XSL Choose Statement — Displays Content According to Pagetype Parameter Setting

<xsl:choose>
<xsl:when test="document/config/parameter[@name='pagetype']/option[@selected='true']/@value = 'two_column'">
<div id="col1" ></div> <div id="col2" ></div> </xsl:when> <xsl:otherwise> <div id="full_screen" ></div> </xsl:otherwise> </xsl:choose>

 

Control Navigation Locations

Sometimes it is desirable to change the location of the subnavigation. The following example has three location options: in the left column, just underneath the left navigation; in the body of the main content region, at the top of the page, and right aligned; or hidden entirely.

Select Page Property Field — Determines the Location of the Subnavigation

<parameter name="subnav_position" type="select" group="Everyone" prompt="Sub-navigation position?" alt="Specify the position of the sub-navigation.">
<option value="left" selected="true">Below Left Navigation</option>
<option value="box_right" selected="false">Box, Right Aligned</option>
<option value="hide" selected="false">Hidden</option>
</parameter> 

 

Using a File Chooser to Select a Content Include File

File Choosers are used to browse for a file. This field type is an excellent method for allowing end users to provide a valid, absolute path to an include file. The following example shows how to use a file chooser parameter field. 

File Chooser Page Property Field — Determines the Path to an Include File

<parameter name="article_include" type="filechooser" group="Everyone" prompt="Article include location?" alt="Specify the article you would like to import.">
</parameter>

 

Choose an RSS Feed XML File to Display on a Page

As with the previous example, a file chooser is used again to specify the path to an RSS XML file. 

File Chooser Page Property Field — Determines the Path to an RSS XML File

<parameter name="RSS_path" type="filechooser" group="admins" prompt="RSS XML path?" alt="Specify the location of an RSS XML file.">
</parameter>

 

XSL File Referencing an External XML Document

<xsl:variable name="rss" select="document/config/parameter[@name='RSS_path']" />
<xsl:value-of select="document($rss)/rss/channel/title" /> 

 

Choosing an External XML Resource

Again, the file chooser can be used to select the path to an external XML resource file for use in an XSL or server-side scripts. 

File Chooser Page Property Field — Determines the Path to an External XML Resource File

<parameter name="XML_path" type="filechooser" group="resource_editors" prompt="Path to an XML file?" alt="Specify the location of an XML resource file.">
</parameter>		
 

Getting the Absolute Path from the File Chooser Parameter

<xsl:value-of select="document/config/parameter[@name='XML_path']" />

 

Choosing an XML Resource for Javascript or Flash

Once more, the file chooser is useful in selecting XML data for Javascript and Flash applications.

File Chooser Page Property Field — Determines the Path to an XML Data File

<parameter name="XML_path" type="filechooser" group="javascript_editors" prompt="Path to an XML resource?" alt="Specify the location of an XML resource file.">
</parameter> 

 

Choosing a CSS Skin

CSS skins can be dynamically selected using a page properties select field. The XSL Stylesheet then chooses from a set of CSS files based on the value of this parameter. 

Select Page Property Field — Allows the User to Choose a CSS Skin

<parameter name="css_skin" type="select" group="Everyone" prompt="CSS Skin" alt="Specify a CSS skin.">
<option value="sea_blue" selected="true">Sans-serif Fonts, Sea Blue</option> <option value="georgia_grey" selected="false">Georgia, Grey, Burgundy</option> <option value="futuristic" selected="false">Futuristic</option> </parameter>

 

Example of an XSL Param Variable that Retrieves the Parameter Pagetype Setting

<xsl:choose>
<xsl:when test="document/config/parameter[@name='css_skin']/option[@selected='true' and @value='sea_blue']">
<link rel="stylesheet" type="text/css" href="/css/sea_blue.css" /> </xsl:when> <xsl:when test="document/config/parameter[@name='css_skin']/option[@selected='true' and @value='georgia_grey']"> <link rel="stylesheet" type="text/css" href="/css/georgia_grey.css" /> </xsl:when> <xsl:when test="document/config/parameter[@name='css_skin']/option[@selected='true' and @value='futuristic']">
<link rel="stylesheet" type="text/css" href="/css/futuristic.css" /> </xsl:when> <xsl:otherwise> <link rel="stylesheet" type="text/css" href="/css/default.css" /> </xsl:otherwise> </xsl:choose>

 

Specifying a Graphic or Video Resource

Use a file chooser parameter and select parameter to choose a resource for the web page header, or display none at all. This resource can be any type, so long as the type is selected in the drop-down field.

Selecting a Resource Type and Absolute File Path

<parameter name="resource_type" type="select" group="header_editors" prompt="Resource Type?" alt="Specify the resource type.">
<option value="graphic" selected="true">Graphic</option>
<option value="flash" selected="false">Flash</option>
<option value="quicktime" selected="false">Quicktime Video</option>
<option value="none" selected="false">Off</option>
</parameter>
<parameter name="resource_path" type="filechooser" group="header_editors" prompt="Resource Path?" alt="Specify the location of a resource file.">
</parameter>

 

Next, configure the XSL stylesheet to output appropriate HTML tagging for the resource, according to its resource type. The following XSL snippet shows how to accomplish this.

XSL Snippet — Outputs a Graphic or Video Resource Based on the Specified Resource Type

<xsl:variable name="resource_path" select="document/config/parameter[@name='resource_path']" />
<xsl:choose>
<xsl:when test="document/config/parameter[@name='resource_type']/option[@selected='true' and @value='graphic']">
<img src="{$resource_path}" border="0" /> 
</xsl:when>
<xsl:when test="document/config/parameter[@name='resource_type']/option[@selected='true' and @value='flash']">
<object width="550" height="400">
<param name="movie" value="{$resource_path}">
<embed src="{$resource_path}" width="550" height="400"></embed>
</object> 
</xsl:when>
<xsl:when test="document/config/parameter[@name='resource_type']/option[@selected='true' and @value='quicktime']">
<object 
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  height="200"
  width="200">
<param name="src" value="{$resource_path}"/>
<param name="scale" value="aspect" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<embed 
type="video/quicktime"
pluginspage="http://www.apple.com/quicktime/download/"
height="200" width="200"
src="{$resource_path}" scale="aspect" controller="true" autoplay="false" /> </object> </xsl:when> <xsl:otherwise> <!-- do nothing --> </xsl:otherwise> </xsl:choose>

 

Best Practices

Avoid Page Properties to Store and Edit Content

Page properties are meant to store hidden data and control aspects of the page. Page content should not be stored using page properties; instead it should be stored in an editable region on the page instead.

The reason behind this is clear when looking at the structure of the PCF file. Page properties are children of the <config> node; therefore, these properties are meant to merely affect the configuration of the page, not provide content. Likewise, editable regions are children of the <content> node because these regions provide content for the page.

Assign Sensitive Properties to User Groups

The Page Properties window supports the assignment of user groups. Each property is assigned a user group, and only members of that group can edit that particular property. For example, if the group is set to "administrators," then only members of the "administrators" group will see this field in the Page Properties window. If the group parameter is set to "Everyone," then all users will have access to that property.