Skip to Content

Page Tagging

The following guide refers to page tagging used for page parameters and editable regions. We recommend using Ctrl+F to search for specific attributes.

Tag Syntax:

<ouc:div>Node Style</ouc:div>

<!-- ouc:div -->Comment Style<!-- /ouc:div -->

<!-- com.omniupdate.div -->Original Comment Style<!-- /com.omniupdate.div -->

Page ParametersLink to this section

<ouc:properties></ouc:properties>

Title/Meta Tags

<ouc:properties>
	<title>Page Title</title>
	<meta name="Description" content="Page Description" />
	<meta name="Keywords" content="Page Keywords" />
</ouc:properties>

<meta> attributes:

  • name (required): unique identifier for this metadata.
  • content: content associated with this metadata field.
  • all other attributes: non-editable by UI.

PCF Parameters

<ouc:properties>
	<parameter name="heading"
			   group="Everyone"
			   prompt="Page Heading">Heading</parameter>
</ouc:properties>

<parameter> attributes (common):

  • name (required): unique identifier for this parameter.
  • group (required): the group with access to edit this parameter.
  • type: default value is "text." Determines how the parameter field displays.
  • section: set a heading for a group of fields.
  • prompt (required): text label for the parameter field.
  • alt: helper text that appears below the parameter field.

The above attributes are used for one or more of the parameters defined below.

Parameter Example Code Attributes

Asset Chooser

<parameter name="asset-chooser"
		   group="Everyone"
		   type="asset"
		   tags="sidebar,type:generic"
		   prompt="Asset"
		   alt="Choose a sidebar asset to display."></parameter>

<parameter> attributes

  • name (required)
  • group (required)
  • type="asset" (required)
  • tags: filters available assets by predefined tags with a format of commas between each tag.
  • prompt (required)
  • alt

Checkboxes

<parameter name="categories-checkbox"
		   group="Everyone"
		   type="checkbox"
		   prompt="Categories"
		   alt="Choose any categories that apply.">
	<option value="students" selected="false">Students</option>
	<option value="faculty" selected="true">Faculty</option>
	<option value="staff" selected="true">Staff</option>
</parameter>

<parameter> attributes:

  • name (required)
  • group (required)
  • type="checkbox" (required)
  • prompt (required)
  • alt

 

<option> attributes:

  • value (required for XSL logic to apply): unique identifier for each option.
  • selected (required true/false): stores the selected value from a set of options.

Date Picker

<parameter name="event-date"
		   group="Everyone"
		   type="date"
		   prompt="Event Date"
		   alt="Choose the event start date.">11/22/2017</parameter>

<parameter> attributes

  • name (required)
  • group (required)
  • type="date" (required)
  • prompt (required)
  • alt

Date/Time Picker

<parameter name="event-datetime"
		   group="Everyone"
		   type="datetime"
		   prompt="Event Start"
		   format="iso"
		   alt="Choose the event start date and time."></parameter>

<parameter> attributes

  • name (required)
  • group (required)
  • type="datetime" (required)
  • format: defines the format of the date/time data.
  • prompt (required)
  • alt

File Chooser

<parameter name="data-source"
		   group="Everyone"
		   type="filechooser"
		   dependency="yes"
		   source="staging"
		   path="/_resources/"
		   lockout="yes"
		   filter="xml"
		   prompt="Data Source"
		   alt="XML file that stores your data."></parameter>

<parameter> attributes

  • name (required)
  • group (required)
  • type="filechooser" (required)
  • dependency: determines whether a dependency tag is inserted when a file is chosen.
  • source: sets the default server for the file chooser.
  • path: sets the path to the default folder for the file chooser.
  • lockout: prevents the user from navigating above the folder set in path.
  • filter: restricts the user from choosing file types outside of the specified file extension.
  • prompt (required)
  • alt

Radio

<parameter name="categories-radio"
		   group="Everyone"
		   type="radio"
		   prompt="Categories"
		   alt="Choose a category.">
	<option value="students" selected="false">Students</option>
	<option value="faculty" selected="true">Faculty</option>
	<option value="staff" selected="false">Staff</option>
</parameter>
<parameter> attributes:
  • name (required)
  • group (required)
  • type="radio" (required)
  • prompt (required)
  • alt

 

<option> attributes:

  • value (required for XSL logic to apply): unique identifier for each option.
  • selected (required true/false): stores the selected value from a set of options.

Select (Dropdown)

<parameter name="layout-select"
		   group="Everyone"
		   type="select"
		   prompt="Page Layout"
		   alt="Choose the number of columns.">
	<option value="1" selected="false">One Column</option>
	<option value="2" selected="true">Two Columns</option>
</parameter>
<parameter> attributes:
  • name (required)
  • group (required)
  • type="select" (required)
  • prompt (required)
  • alt

 

<option> attributes:

  • value (required for XSL logic to apply): unique identifier for each option.
  • selected (required true/false): stores the selected value from a set of options.

Text

<parameter name="summary"
		   group="Everyone"
		   type="text"
		   prompt="Summary"
		   alt="Enter a single paragraph summary.">Text</parameter>
<parameter> attributes:
  • name (required)
  • group (required)
  • type="text"
  • prompt (required)
  • alt

Text Area

<parameter name="bio"
		   type="textarea"
		   group="Everyone"
		   prompt="Bio"
		   alt="Write a bit about yourself."
		   rows="3"></parameter>
<parameter> attributes:
  • name (required)
  • group (required)
  • type="textarea" (required)
  • rows: determines the height of the text box.
  • prompt (required)
  • alt

Time Picker

<parameter name="event-time"
		   group="Everyone"
		   type="time"
		   prompt="Event Time"
		   alt="Choose the event start time.">04:28:26 AM</parameter>

<parameter> attributes

  • name (required)
  • group (required)
  • type="time" (required)
  • prompt (required)
  • alt

Content RegionsLink to this section

<ouc:div label="main-content" group="Everyone" button-text="Edit">
</ouc:div>

<ouc:div> attributes:

  • label (required): unique identifier for the editable region.
  • group (required for the button to appear): defines a group with access to edit the region.
  • button-text: text that appears on the edit button.
  • break: set this value to "yes" to insert a line break after the edit button.

The above attributes are used for one or more of the parameters defined below.

Parameter Example Code Attributes
WYSIWYG 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>

<ouc:div> attributes:

  • type:
  • label
  • group
  • button-text
  • break

 

<ouc:editor> attributes:

  • csspath: path to the CSS file that styles the text within the WYSIWYG.
  • cssmenu (required): path to the TXT file that specifies which classes appear in the Styles dropdown.
  • wysiwyg-class: specifies a class to be applied to the <body> of the WYSIWYG editor.
  • toolbar: specifies the custom toolbar to be used for the region.
  • parag: set this to "no" to insert <br/> instead of creating new <p> blocks when you in use the Enter Key.
  • reflow: set this to "no" to prevent the system from formatting the code for viewing in the source code.
Asset Chooser
<ouc:div label="asset-content" group="Everyone" button-text="Edit">
	<ouc:editor
				wysiwyg="asset"
				tags="sidebar,type:generic" />
</ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button-text
  • break

 

<ouc:editor> attributes:

  • wysiwyg="asset": disables the WYSIWYG editor and turns the button into an asset chooser.
  • tags: filters available assets by predefined tags.
Gallery Chooser
<ouc:div label="gallery-content" group="Everyone" button-text="Edit">
	<ouc:editor
				wysiwyg="gallery"
				tags="carousel" />
</ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button-text
  • break

 

<ouc:editor> attributes:

  • wysiwyg="gallery": disables the WYSIWYG editor and turns the button into a gallery chooser.
  • tags: filters available galleries by predefined tags.

MultiEditLink to this section

Line breaks are for readability, but it is recommended to remove any whitespace between the elements.

<ouc:div> attributes:

  • label (required): unique identifier for the editable region.
  • group (required for the button to appear): defines a group with access to edit the region.
  • button (required hide): hides the edit button on the page.
Parameter Example Code Attributes
Asset Chooser
<ouc:div label="asset-contact" group="Everyone"  button="hide" >
	<ouc:multiedit type="asset"
				   tags="sidebar,department-contact"
				   prompt="Department Contact"
				   alt="Choose your department contact info."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="asset" (required): sets the MultiEdit field to Asset Chooser.
  • tags: filters available assets by predefined tags.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Checkboxes
<ouc:div label="subject" group="Everyone"  button="hide" >
	<ouc:multiedit type="checkbox"
				   options="ENG:English;MATH:Mathematics"
				   prompt="Subject"
				   alt="Select all that apply."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="checkbox" (required): determines how the Multiedit field displays.
  • options (required): defines semicolon-separated display-text:value option pairs.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Date Picker
<ouc:div label="birthdate" group="Everyone"  button="hide" >
	<ouc:multiedit type="date"
				   prompt="Birth Date"
				   alt="Enter your birthdate."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="date" (required): determines how the Multiedit field displays.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Date/Time Picker
<ouc:div label="event-datetime" group="Everyone"  button="hide" >
	<ouc:multiedit type="datetime"
				   format="iso"
				   prompt="Event Start"
				   alt="Choose the event start date and time."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="datetime" (required): determines how the Multiedit field displays.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
File Chooser
<ouc:div label="publication-link" group="Everyone" button="hide">
	<ouc:multiedit type="filechooser"
				   path="/docs"
				   source="production"
				   dependency="yes"
				   lockout="yes"
				   prompt="Publication"
				   alt="Link to your most recent publication."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="filechooser" (required): determines how the Multiedit field displays.
  • path: sets the path to the default folder for the file chooser.
  • source: sets the default server for the file chooser.
  • dependency: determines whether a dependency tag is inserted when a file is chosen.
  • lockout: prevents the user from navigating above the folder set in path.
  • filter: restricts the user from choosing file types outside of the specified file extension.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Image Chooser
<ouc:div label="profile-image" group="Everyone" button="hide">
	<ouc:multiedit type="image"
				   path="/images"
				   lockout="yes"
				   prompt="Image"
				   alt="Select an image and enter a description."
				   /><img class="thumb" src="/image.jpg" alt="Desc" /></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="image" (required): determines how the Multiedit field displays.
  • path: sets the path to the default folder for the file chooser.
  • lockout: prevents the user from navigating above the folder set in path.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.

<img> attributes:

  • src (required): defines a path to the image file.
  • alt (required for accessibility): defines an image description.
  • all other attributes: non-editable by UI.
Mini-WYSIWYG
<ouc:div label="bio"  group="Everyone"  button="hide">
	<ouc:multiedit type="textarea"
				   editor="yes"
				   rows="4"
				   prompt="Biography"
				   alt="Enter a short bio." />
	<p>HTML Content</p>
</ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="textarea" (required): determines how the Multiedit field displays.
  • editor="yes" (required): enables the mini-WYSIWYG editor.
  • rows: defines the height of the text area.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Radio
<ouc:div label="profile-type" group="Everyone"  button="hide" >
	<ouc:multiedit type="radio"
				   options="staff:Staff;student:Student"
				   prompt="Profile Type"
				   alt="Select a type."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="radio" (required): determines how the Multiedit field displays.
  • options (required): defines semicolon-separated display-text:value option pairs.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Select (Dropdown)
<ouc:div label="profile-type" group="Everyone"  button="hide" >
	<ouc:multiedit type="radio"
				   options="staff:Staff;student:Student"
				   prompt="Profile Type"
				   alt="Select a type."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="select" (required): determines how the Multiedit field displays.
  • options (required): defines semicolon-separated display-text:value option pairs.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Text
<ouc:div label="middle-initial" group="Everyone"  button="hide" >
	<ouc:multiedit type="text"
				   maxlength="1"
				   prompt="Middle Initial"
				   alt="Enter your middle initial."/></ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="text" (required): determines how the Multiedit field displays.
  • maxlength: defines the maximum length of the field on the screen.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Text Area
<ouc:div label="office-hours"  group="Everyone"  button="hide">
	<ouc:multiedit type="textarea"
				   rows="4"
				   prompt="Office Hours"
				   alt="List your office hour availability." />
	Text Content
</ouc:div>

<ouc:div> attributes:

  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="textarea" (required): determines how the Multiedit field displays.
  • rows: defines the height of the text box.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.
Time Picker
<ouc:div label="event-endtime" group="Everyone"  button="hide" >
	<ouc:multiedit type="time"
				   prompt="Event End Time"
				   alt="Choose when the event will end."/></ouc:div>
<ouc:div> attributes:
  • label
  • group
  • button

 

<ouc:multiedit> attributes:

  • type="time" (required): determines how the Multiedit field displays.
  • prompt (required): text label for the multiedit field.
  • alt: helper text that appears below the multiedit field.