Page Tagging Reference Guide 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 --><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.s-tag ."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
<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"/>
</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.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.
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:
<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:
<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:
<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:
<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:
<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. Value can be set to "yes," "no," or " s-tag ."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:
<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:
<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:
<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="layout" group="Everyone" button="hide" >
<ouc:multiedit type="select"
options="One Column:one;Two Column:two"
prompt="Page Layout"
alt="Select a layout."/></ouc:div>
<ouc:div> attributes:
<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:
<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:
<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:
<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.
