MultiEdit

Overview

The OU Campus MultiEdit feature allows for form-controlled editing for XML and other structured content. Administrators can create a forms-based template that presents users with an easy-to-follow guide for adding content to a structured layout. The structure of how the content is displayed is defined in the XSL that is used to transform the page.

These types of templates can include both MultiEdit and other types of editable regions. Even though a page can include other types of editable regions, such as those that edit with the WYSIWYG Editor or Source Editor, a region using MultiEdit effectively removes the WYSIWYG as an editing method. Adding content to the page is accomplished via the form. However, a form field can be configured to include a mini-WYSIWYG. So this type of editable region can employ the best of both worlds.

MultiEdit guarantees that content conforms to a specific structure, disallowing the introduction of rogue styling and allowing users to focus on the content rather than being distracted by layout, design, or styling, making for ease of use. This makes MultiEdit particularly useful for the implementation of the faculty pages and directory since it is basically a form that is used to control the structure of the content. It can also be enlisted to create content that is to be utilized by other scripts or files. For example, faculty profile pages are used to create a dynamic index with an XSL.

The Faculty Profile template exemplifies how a page layout can be created and the MultiEdit form compels the user to provide specific chunks of content to fit the layout. For example, a profile typically includes basic contact information, office hours, a photo, short biography, and a list of publications. This helps ensure that each profile page contains the same pertinent information.

Specifically, the form element that is used will decide what type of content can be selected or entered. For example, the photo is added by using a file chooser. The alt description for the img code is added in a form field. The user enters text; for example, "Professor Li" and the mark up is:

alt="Professor Li"

The form template can be designed so that only a specific type of information can be added. For example, content types include:

  • Asset Chooser
  • Checkbox
  • Image Chooser
  • Single-line text area
  • Multi-row text area (with or without a mini-WYSIWYG Editor)
  • Radio button
  • Drop-down selection box

A MultiEdit tag is encapsulated by OmniUpdate editable region tags (div tags) with the button attribute set to hide (i.e., button="hide"). Only one editor tag should be used within a div; in other words, do not include a both an editor tag and a MultiEdit tag within the same div. Two attribute nodes are required: type and prompt. Depending upon the type attribute, other helper attributes can be used or are required. The OUC-style for the MultiEdit tag is self-closing and the syntax for the tag is:

<ouc:multiedit />

For the page tagging reference including MultiEdit, visit the Page Tagging Reference page.

Using the MultiEdit Tag and Its Attributes

A MultiEdit tag is nested in the <div> tag and works with the <div> tag to create an editable region that must be edited in a specific manner, in this case with MultiEdit form editing. All three OmniUpdate tagging styles are supported when implementing the tag. The opening <div> tag that helps enclose the MultiEdit field must have the button attribute set to "hide".  A <div> tag can only include one editor tag; that is, either the tag for the WYSIWYG Editor or for MultiEdit. As a side note, the <div> tag does not have to specify an editor. The MultiEdit tag is self-closing or does not have an end tag (depending upon the tagging style in use). If a web page has a MultiEdit tag, then JustEdit is disabled automatically for that page.

OUC Style Syntax

<ouc:multiedit />

In-Context Example

<ouc:div label="title"  group="Everyone"  button="hide">
<ouc:multiedit type="text" prompt="Title" alt="Enter your title "/>Professor of Encryption</ouc:div>

Transitional Syntax

<!-- ouc:multiedit -->

Comment Style Syntax

<!-- com.omniupdate.multiedit -->

Comment Style Example

<!-- com.omniupdate.div label="education" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Education" alt="Enter your education information." -->
<!-- /com.omniupdate.div -->

MultiEdit Tag Attributes Overview

There are four stand-alone attributes and many more attributes that can be utilized in conjunction with other attributes. For example, the "type" attribute specifies the type of element, such as single-line text, image, or checkbox. Each type also has additional attributes that can be used with it. When type="image" is used, then the lockout="no" attribute can be used to allow users to navigate to other directories within the picker. The "type" attribute is required; the "prompt" attribute, while optional, is recommended as a best practice.

Tagging Example with Attributes

<!-- com.omniupdate.multiedit type="image" prompt="Photo" alt="Choose a photo." path="/" lockout="no" -->

About the Type Attribute

There are seven types that can be used to define the element. Specifying the type attribute also allows for additional attributes to be used in order to define the properties of the attribute. For example, defining the value of the type attribute to be textarea allows for the additional parameters of rows and editor. In a few cases, an additional attribute is now required.

Asset

type="asset"

Presents the user with an asset chooser

Additional optional attribute: tags. Predefined tags can be specified in order to help the user filter the list of assets.

Example

 <ouc:div label="feed" group="Everyone" button="hide"><ouc:multiedit type="asset" prompt="News Feed" alt="Select a news feed to display." tags="type:Source Code,feed" /></ouc:div>

Checkbox

type="checkbox"

The variable is defined by user by toggling the value of a checkbox (selected or not selected), of which more than one checkbox can be selected. The variable is the value of the user-selected option.

Additional required attribute: options

Example

<ouc:div label="department" group="Everyone" button="hide"><ouc:multiedit type="checkbox" prompt="Departments" alt="Select your departments." options="Liberal Arts:Liberal Arts;Mathematics:Mathematics;Sciences:Sciences" /></ouc:div>

Image

type="image"

The file chooser is available to select an image.

The variable is defined by the user by defining the path where the image exists.

An image placeholder must be inserted into the newly created editable region to avoid an error. Example:

 <img src="http://www.example.com/example.jpg">

The description attribute is required by the user when updating the form as it populates the alt and title tags for the image.

Additional optional attributes: path, lockout. The path defines the directory as a path from the root in which the user is placed. Lockout determines if the user must choose from that directory or can navigate the file structure.

Example

<ouc:div label="image" group="Everyone" button="hide"><ouc:multiedit type="image" prompt="Image" alt="Select your image." path="/images/faculty" lockout="yes" /><img src="/images/faculty/sample.jpg" alt="Image Description" title="Image Description" /></ouc:div>

Radio Buttons

type="radio"

Provides options, of which the user may select one and only one. The variable is the value of the user-selected option.

Additional required attribute: options

Example

<ouc:div label="office-hours" group="Everyone" button="hide"><ouc:multiedit type="radio" prompt="Office Hours?" alt="Choose whether you have office hours available." options="Yes:Yes;No:No" /></ouc:div>

Drop-down Selector

type="select"

The variable is defined by the user when selecting from the drop-down list. The variable is the value of the user-selected option.

Additional required attribute: options

Example

<ouc:div label="contact" group="Everyone" button="hide"><ouc:multiedit type="select" prompt="Contact Preference" alt="Select the best way to contact you." options="Email:Email;Phone:Phone;Office Hours:Office Hours" /></ouc:div>

Single-line Text Field

type="text"

User is presented with a single-line text field in which to enter text.

Additional optional attribute: maxlength

Example

<ouc:div label="name" group="Everyone" button="hide"><ouc:multiedit type="text" prompt="Name" alt="Enter your name." maxlength="100" /></ouc:div>

Text Area

type="textarea"

Provides a multi-row text area for user input.

Additional optional attributes: rows, editor. Rows is used to specify the initial height of the element. Editor is used to add a mini-WYSIWYG Editor.

Example

<ouc:div label="bio" group="Everyone" button="hide"><ouc:multiedit type="textarea" prompt="Bio" alt="Enter your bio." rows="10" editor="yes" /></ouc:div>

Final Notes

  • A page can have both MultiEdit and WYSIWYG Editor regions on it at the same time.
  • Within a given <ouc:div> node, only a WYSIWYG Editor or a MultiEdit can be declared; in other words, do not include an <ouc:editor> tag and an <ouc:multiedit> tag inside the same <ouc:div> node. They must be placed within separate <ouc:div> nodes.
  • The button attribute must be set to hide (e.g., button="hide").
  • Can have a mini-WYSIWYG within the MultiEdit form field
  • Can have style-free fields and regular HTML forms