By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

Page Tagging

Page tagging adds OU Campus-specific nodes to the source code of a PCF or template (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 field 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> , that uses a What You See Is What You Get (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

Generate an editable region 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 structure where the content will be injected and indicates to open a WYSIWYG editor. The node also specifies a unique label for the region, the group who will have access to edit the region, and the text that 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.

The following 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>

Extensible Stylesheet Language (XSL) Code

OU Campus requires XSL to identify and display a region's content. XSL renders the page's unique content 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.

Use an <xsl:apply-templates> node to seek out editable region code on PCF pages. For example:

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

Page ParametersLink to this section

Use page parameters to limit the styling options available to a content editor. When you set a parameter, content editors are prompted with a form and restricted to the fields you created. The 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 use case is to separate the content that only higher-level editors should be able to access.

PCF Code

Generate page parameters 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 specifies a unique name for the included group of page parameters, the group who will have access to edit the parameter, and the text that appears in the parameters section of a PCF.

In the <parameter> node, use the type attribute to specifiy the type of form field for this page parameter. There are ten types of form fields available, each with their own set of attributes.

The content editor chooses from the list of available assets.

Asset Chooser

The content editor selects one or more options from a list.

Checkboxes

The content editor chooses a date on the calendar.

Date Picker

The content editor chooses a date on the calendar and a time of day.

Date/Time Picker

The content editor chooses a file from those available in the OU Campus file system. 

File Chooser

The content editor chooses one option from a list. 

Radio

The content editor chooses an option from a dropdown menu. 

Select (Dropdown)

The content editor enters text.

Text

The content editor enters text, but in a larger space.

Text Area

The content editor chooses a time of day.

Time Picker

The following 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

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

Use the custom XSL function ou:pcf-param , built into most implementations, to call the value of a page parameter. The following 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

Use MultiEdit to limit the styling options available to a content editor. When you enable MultiEdit on a page, content editors are prompted with a form and restricted to the fields you created. The input entered into these fields is then injected into the page using XSL.

PCF Code

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

The <ouc:div> node specifies a unique label for the region and the group who will have access to edit the region. Set the button text equal to hide when the <ouc:div> wraps an <ouc:multiedit> node.

In the <ouc:multiedit> node, use the type attribute to specifiy the type of MultiEdit form field. There are twelve types of form fields available, each with their own set of attributes.

The content editor chooses from the list of available assets.

Asset Chooser

The content editor selects one or more options from a list.

Checkboxes

The content editor chooses a date on the calendar.

Date Picker

The content editor chooses a date on the calendar and a time of day.

Date/Time Picker

The content editor chooses a file from those available in the OU Campus file system. 

File Chooser

The content editor chooses an image from those available in the OU Campus file system.

Image Chooser

The content editor edits and formats content, including text styling and inserting links and media. 

Mini-WYSIWYG

The content editor chooses one option from a list. 

Radio

The content editor chooses an option from a dropdown menu. 

Select (Dropdown)

The content editor enters text.

Text

The content editor enters text, but in a larger space.

Text Area

The content editor chooses a time of day.

Time Picker

The following 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

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

Use an <xsl:apply-templates> node or an <xsl:value-of> node to seek out MultiEdit code on PCF pages. For example:

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