properties tags overview

Properties Tags OverviewOverviewPage properties can be used for managing nearly any page characteristic, including metadata,parameters, and configuration properties. Page properties allow for dynamic control for what apage 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 userswithout having to worry about user error or editing code. By default, page properties are accessibleto Level 5 users and above. Access settings and groups can be used to control access to specificpages, editable regions, and, important to this discussion, page properties. Different pageproperties can be made available to different groups and groups can be assigned to controlaccess.

The properties include is generally used for directory properties that should be editable by a usersince directory variables are available to level 10 administrators only. It is also commonly used forthe friendly breadcrumb name of the directory. If the implementation does not have directory-basedproperties 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 commentstyle, com.omniupdate, tags to newer node style, ouc:properties (for example). There is also atransitional tagging style. While all styles are supported, more recent implementations use the nodestyle tagging. For example,

<ouc:properties></ouc:properties>

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

OU Campus Properties Tags Overview of 13

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

<metadata><meta name="Description" content="" /><meta name="Author" content="" /><meta name="Keywords" content="" /></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. Basedon their choices, code and content is omitted from a page, rather than just being hidden in previewor commented out on a published page.

The XSLs include an xsl:function, ou:pcfparam, that can be used to select and store the value ofa specific parameter. The value can then be used to customize the page. For example, if the pagetemplate 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.

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

<parametername="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 createthe 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 pageparameters, such as whether or not to include a banner.


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

<ouc:properties label="config"><parameter name="layout" group="Everyone" type="select" prompt="PageType" 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 attributenode.

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


Even though when creating or editing a template or editing XSL for the properties tags, themetadata 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 titledPage Title and Meta Tags, and the other is Configuration Parameters.

More Details about Customizing Properties

A singular PCF could be edited and a unique property tag added to it, but more frequently theproperties 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 orcustom settings can also be defined by the user at page creation time. In both cases, there aregoing to be some that are intended to editable by a user after page creation and some that arenot.

Page properties present a forms-based view and editing method. Anything that can be put into aform 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 propertiesinclude is generally used for directory properties that should be editable by a user as directoryvariables are available to level 10 only. It is also commonly used for the friendly breadcrumb nameof the directory. If the implementation does not have directory-based properties or an editablebreadcrumb, then it probably would not include a properties file.


ExamplesPCF/XML-based Implementations

Advanced configuration parameters are written in eXtensible Markup Language (XML) and residein 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. Thisprocess is shown in the following flowchart diagram:

Frequently Used FunctionalityAdvanced 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 brieflyexplains how to implement them. These include showing/hiding regions, selecting pre-definedkeywords, positioning objects, changing templates, positioning objects, controlling navigationlocations, using a file chooser, choosing an RSS feed, using an XML resource, choosing a CSSskin, and specifying and outputting an image.


Show or Hide a Page RegionPage properties are implemented in the PCF file, and are used by the XSL stylesheet whenrendering the page as HTML. Using a radio button, a page region may be turned on and off usingconditional logic in an XSL stylesheet. To begin, insert a radio option page property tag into the 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>  <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>  </config>  <title>GallenaUniversity Athletics</title> <content> </content> </document>

Next, use an <xsl:if> statement to control whether the region is displayed on the page. This willreside 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 notdisplay the content region on the page. In this way, a content region may be shown or hidden usingan easily adjustable page property.

Pre-determined KeywordsThe traditional way of specifying meta keywords is using a comma separated list of terms that arerelated 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 checkboxfields, 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 MetaKeywords

<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> <optionvalue="volleyball" selected="true">Volleyball</option> <optionvalue="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:iftest="position()!=last()"> <xsl:text>, </xsl:text> </xsl:if> </xsl:for-each> </xsl:attribute> </meta>

Positioning ObjectsObject positioning can be controlled using parameters and XSL. In the following example, a pageproperties 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 detailsbox."> <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> <optionvalue="hide" selected="false">Hide</option> </parameter>

Changing TemplatesChange page template quickly and easily using page properties and XSL. Define a select fieldpage 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> <optionvalue="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 LocationsSometimes it is desirable to change the location of the subnavigation. The following example hasthree location options: in the left column, just underneath the left navigation; in the body of the maincontent 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 thesub-navigation."> <option value="left" selected="true">Below LeftNavigation</option> <option value="box_right" selected="false">Box, RightAligned</option> <option value="hide" selected="false">Hidden</option> </parameter>

Using a File Chooser to Select a Content Include FileFile Choosers are used to browse for a file. This field type is an excellent method for allowing endusers to provide a valid, absolute path to an include file. The following example shows how to use afile 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 wouldlike to import."> </parameter>


Choose an RSS Feed XML File to Display on a PageAs 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="RSSXML 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 ResourceAgain, the file chooser can be used to select the path to an external XML resource file for use in anXSL 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 XMLresource 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 FlashOnce 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 XMLresource file."> </parameter>


Choosing a CSS SkinCSS skins can be dynamically selected using a page properties select field. The XSL Stylesheetthen 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="CSSSkin" 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']"> <linkrel="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> <optionvalue="quicktime" selected="false">Quicktime Video</option> <optionvalue="none" selected="false">Off</option> </parameter> <parametername="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, accordingto its resource type. The following XSL snippet shows how to accomplish this.

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

<xsl:variable name="resource_path" select="document/config/parameter[@name='resource_path']" /> <xsl:choose> <xsl:whentest="document/config/parameter[@name='resource_type']/option[@selected='true' and @value='graphic']"> <imgsrc="{$resource_path}" border="0" /> </xsl:when> <xsl:whentest="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" /> <embedtype="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>  </xsl:otherwise> </xsl:choose>

Best PracticesAvoid Page Properties to Store and Edit Content

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

The reason behind this is clear when looking at the structure of the PCF file. Page propertiesare children of the <config> node; therefore, these properties are meant to merely affect theconfiguration 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 assigneda user group, and only members of that group can edit that particular property. For example, if thegroup is set to "administrators," then only members of the "administrators" group will see this fieldin the Page Properties window. If the group parameter is set to "Everyone," then all users will haveaccess to that property.


properties tags overview

Documents