Skip to Content

Page Tagging

Page tagging adds OU Campus-specific nodes to the source code of a PCF or TMPL file so the system can identify editable content on a page. There are three ways to edit a PCF page.

  1. Editable Region:
    A screenshot of an OU Campus page. Orange arrows point to two green buttons, reading "Content Region" and "Main Content", on the page.
  2. Page Parameters:
    A screenshot of a form with different settings for the page, such as Title, Description, and Tags. An orange arrow points to the menu item "Parameters."
  3. MultiEdit:
    A screenshot of a form with different fields for a faculty profile, such as Name, Department, and Office Hours.

Editable RegionsLink to this section

An editable region is a block of code on a page, such as a <div> or <section>, which uses a WYSIWYG editor to edit page content. Editable regions are most commonly used for the main body content of the page.

A screenshot of a page. The main content area is highlighted, and an editing toolbar appears at the top.

Creating editable regions on a PCF requires the appropriate code in the PCF file itself to identify the region, as well as appropriate code in the page's XSL file to identify and display that region's content. There is no limit to how many editable regions appear on a PCF page.

PCF Code

Editable regions are generated by placing an <ouc:div> node inside a PCF page's code with an <ouc:editor> node inside of it.

The <ouc:div> node maps out the space in the page's source structure where the content will be injected and indicates that the region should open a WYSIWYG editor to allow for edits. It also specifies a unique label for the region, the group who will have access to edit the region, and the text which appears on the editable region button.

The <ouc:editor> node specifies the location of additional CSS to be applied inside the WYSIWYG editor and the location of custom styles that can be applied to the content.

Below is an example of the PCF code for an editable region:

<ouc:div label="main-content" group="Everyone" button-text="Edit">
	<ouc:editor
				csspath="/_resources/ou/editor/wysiwyg.css"
				cssmenu="/_resources/ou/editor/styles.txt"
				wysiwyg-class="maincontent" />
</ouc:div>

XSL Code

XSL is required for OU Campus to identify and display a region's content. The XSL grabs the page's unique content and renders it into the final HTML format. Without the XSL, editable regions don't appear on the page because they aren't built into the HTML for rendering.

An <xsl:apply-templates> node is often employed to seek out editable region code on PCF pages. Below is an example of XSL code for an editable region:

<xsl:apply-templates select="ouc:div[@label='main-content']" />

Page ParametersLink to this section

A page parameter is a form field located on a PCF page under Properties. Page parameters can be employed when you'd like to limit the styling options an editor has. Instead, they are prompted with a form and restricted to the fields you created. Content and settings entered into these fields are then injected into the page using XSL.

Editing page parameters is restricted to users level 5 and above, so one practical use would be to separate out the content that only higher-level editors should be able to access.

PCF Code

Page parameters are generated by placing a <ouc:properties> node inside a PCF page's code with a <parameter> node inside of it. Multiple page parameters can be added within the same <ouc:properties> node, each defined by their own <parameter> node.

The <ouc:properties> node allows you to specify a unique label for the included group of page parameters.

On the <parameter> node, you can include the type attribute specifies the type of form field for this page parameter. There are ten types of form fields available, each with their own set of attributes.

Asset Chooser Asset Chooser
Checkboxes Checkboxes
Date Picker Date Picker
Date/Time Picker Date/Time Picker
File Chooser File Chooser
Radio Radio
Select (Dropdown) Select (Dropdown)
Text Text
Text Area Text Area
Time Picker Time Picker

Below is an example of the PCF code for a text-type page parameter.

<ouc:properties label="config">
	<parameter name="page-heading"
			   group="Everyone"
			   type="text"
			   prompt="Page Heading"
			   alt="Please enter the page heading">Page Heading</parameter>
</ouc:properties>

XSL Code

XSL is required for OU Campus to identify and display a page parameter's content. The XSL grabs the page parameter's content and/or value and renders it into the final HTML format. Without this XSL, page parameter content doesn't appear on the page because it isn't built into the HTML for rendering.

The value of a page parameter is often called using the custom XSL function ou:pcf-param built into most implementations. Below is an example of XSL code for a page parameter controlling the page heading:

<h1 id="page-heading">
	<xsl:value-of select="ou:pcf-param('heading')"/>
</h1>

MultiEditLink to this section

MultiEdit is a set of form fields on a PCF page accessible under Properties or by clicking on the orange MultiEdit button at the top of the page when in Edit. MultiEdit can only be accessed on pages with the proper code added to enable it.

MultiEdit Button

MultiEdit can be employed when you'd like to limit the styling options an editor has. Instead, they are prompted with a form and are restricted to the fields you have created. Input into these fields is then injected into the page using XSL.

PCF Code

A MultiEdit field is generated by placing an <ouc:div> node inside a PCF page's code with a <ouc:multiedit> node inside of it.

The <ouc:div> node maps out the space within the page's source structure where the content will be injected. It also specifies a unique label for the region and the group who will have access to edit the region. Usually, the button text is set equal to hide when the <ouc:div> wraps an <ouc:multiedit> node.

On the <ouc:multiedit> node, you can include the type attribute which specifies the type of form field for the MultiEdit field. There are twelve types of form fields available, each with their own set of attributes.

Asset Chooser Asset Chooser
Checkboxes Checkboxes
Date Picker Date Picker
Date/Time Picker Date/Time Picker
File Chooser File Chooser
Image Chooser Image Chooser
Mini-WYSIWYG Mini-WYSIWYG
Radio Radio
Select (Dropdown) Select (Dropdown)
Text Text
Text Area Text Area
Time Picker Time Picker

Below is an example of the PCF code for a text-type MultiEdit field.

<ouc:div label="name" group="Everyone"  button="hide" >
	<ouc:multiedit type="text"
				   prompt="Student Name"
				   alt="Enter the student's name."/>
</ouc:div>

XSL Code

XSL code is required for OU Campus to identify and display a MultiEdit field's content. The XSL grabs the MultiEdit field's content and/or value and renders it into the final HTML format. Without this XSL code, MultiEdit content doesn't appear on the page because it isn't built into the HTML for rendering.

An <xsl:apply-templates> node or an <xsl:value-of> node is often employed to seek out MultiEdit code on PCF pages. Below is an example of XSL code for a MultiEdit field.

<h3>
	<xsl:value-of select="ouc:div[@label='name']" />
</h3>