BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
4/8/2014

Page Properties

Page properties are a useful tool for managing nearly any page characteristic. Page properties allow for dynamic control for what a page can include, or even how a page can look. 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 they 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
  • Add or remove editable regions
  • Determine 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 page properties. Different page properties can be made available to different groups and groups can be assigned to control access.

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

  • Text boxes
  • Select lists
  • Radio buttons
  • File Chooser
  • Unlimited number and combination of types

When using XSL to present options, code is not just hidden on a published page, it is not included. The built-in functionality offered with page properties is on the staging side of OU Campus. Only what is chosen to be published and included on a page, is manufactured to the published page.

Example of Editing Page Properties (User View)

Page Properties

This section describes the implementation process using PCFs and XSL and outlines several common applications to provide dynamic control of a page through the page properties window.

Note: This page makes use of examples containing OU Campus comment style tagging. For example:

<!-- com.omniupdate.div --><!-- /com.omniupdate.div -->

While these will still work, the new form of the tag for new implementations is:

<ouc:xxx></ouc:xxx>

There is a transitional form of the tag that is used in current implementations:

<!-- ouc:xxx --><!-- /ouc:xxx -->

or

<!-- ouc:xxx / -->

All three styles of tagging will work and continue to be supported.

Implementing Page Properties

Page properties may be implemented either on a per-page basis or within page templates. The property tagging is written to the publish control file (PCF); this file is an XML representation of a web page and requires an XSL stylesheet to preview or publish HTML output. Page properties are represented in templates by variable parameters in the template control file (TCF). These variables can then be used immediately during the creation of a new page with echo statements in the template file (TMPL).

This section outlines the implementation of page properties within all relevant file types: TCF, TMPL, PCF, and XSL.

Template Control File (TCF)

TCF variables provide a means to control page creation and insert content immediately into a new page. These variables are presented to the user as one of five possible form field types: text, checkbox, drop-down (select), radio, file chooser.

The default TCF variable type is "text". The variable type can be changed using the type attribute. For example:

type="checkbox"

Variables with option nodes must have output="xml" declared. Variable tags are shown in the following example:

Sample TCF Variable List

<variable-list>
   <variable name="title"></variable>
   <variable name="description></variable>
   <variable name="color" type="select" output="xml">
<option value="red">Red Text</option> <option value="green">Green Text</option> <option value="blue">Blue Text</option> </variable> <variable name="keywords" type="checkbox" output="xml"> <option value="sports">Sports</option> <option value="academics">Academics</option> <option value="admissions">Admissions</option> </variable> <variable name="fullpage" type="radio" output="xml"> <option value="true">Yes</option> <option value="false">No</option> </variable> </variable-list>

 

Template File (TMPL)

Template (TMPL) files determine the output of a page template. This file contains the structure of the page, in either XHTML or XML format, and references variables in the TCF using an echo statement. An example template file is shown below.

Sample TMPL File that Shows Several Page Property Form Types

<?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="color" type="select" group="Everyone">
   <!--%echo encoding="none" var="color" -->
   </parameter>
   <parameter name="keywords" type="checkbox" group="Everyone">
   <!--%echo encoding="none" var="keywords" -->
   </parameter>
   <parameter name="description" type="text" group="Everyone">
   <!--%echo var="description" -->
   </parameter>
   <parameter name="fullpage" type="radio" group="Everyone">
   <!--%echo encoding="none" var="fullpage" -->
   </parameter>
   <!-- /com.omniupdate.properties -->
</config>
   <!-- com.omniupdate.properties -->
   <title><!--%echo var="title" --></title>
   <!-- /com.omniupdate.properties -->
<content>
</content>
</document>

 

The echo statements reference TCF variables by name using the "var" attribute. If the encoding attribute is set to "none", characters will not be escaped to their entity equivalents. For example, the '<' character will not be converted to &lt;. This allows XML nodes to be directly injected into the page, which is required for some page property types to function. Encoding must be set to "none" for the following variable types: checkbox, select, and radio. For more information:

Template (TMPL) Reference

Publish Control File (PCF)

Page properties are implemented in the PCF using two XML tags: parameter and option. Each page property is defined by a single parameter node. Option nodes define selectable options for the following parameter types: checkbox, select, and radio.

Publish control files (PCF) contain the content of XML-based pages. These files are converted into XHTML, using an XSL stylesheet. Page properties are defined in the PCF config node and reside between opening and closing <!-- com.omniupdate.div --> comment tags. A sample config node is shown in the following example.

Example PCF File that Shows Page Properties Tagging

<?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="color" type="select" group="Everyone" prompt="Color" alt="Page Type"> <option value="red" selected="true">Full width</option> <option value="green" selected="false">Left Column</option> <option value="blue" selected="false">Left and Right Columns</option> </parameter> <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>
<parameter name="author" type="text" group="Everyone" prompt="Author" alt="Please tell us your name."></parameter>
<meta name="description" content="Athletics at Gallena University!" /> <!-- /com.omniupdate.properties --> </config> <!-- com.omniupdate.properties --> <title>Gallena University Athletics</title> <!-- /com.omniupdate.properties --> <content> </content> </document>
 

XML Stylesheet Language Translations File (XSL)

XSL is used to convert XML-based content, such as within a PCF file, into production-ready XHTML. Page properties tagging, using the parameter and option tags in the PCF file, allows an XSL stylesheet to use conditional logic to format the page in any way that is desired.

XSL is very powerful. Several applications and examples of XSL interacting with page properties are described in the PCF/XML Implementations section. This is not an exhaustive list. This technology affords the developer limitless creativity, and many additional applications are possible.

PCF/XML-based Implementations

Advanced configuration parameters are written in eXtensible Markup Language (XML) and reside in the publish control file (PCF). 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:

XSL 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.


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)

Procede to http://support.omniupdate.com/