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

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.