Building Faculty Directories, Profiles, and More with MultiEdit

Robert Kiffe & Bradley PrasuhnSenior Web Developer

Implementation Manager

OmniUpdate, Inc.

Agenda

•Overview: ‘Page Templating’•What is MultiEdit?•Configuring MultiEdit•Demo: Image Slider•Hands-On: •Building a Faculty Profile•Building ‘Template Components’

•Utilizing the Power of MultiEdit + XSL

Template TerminologyTemplate

StylesheetsTemplate Files

• XSLs Files used by OU Campus for new pages/sections

• 3 components: Image – Matches Template

Control File’s name TCF – Form for creating a

new page/section TMPL – Template used for

page/file creation

Page Template Components

Template Structure

PRODUCTION

STAGING

Template Control File (TCF)

What is MultiEdit?

•Form-based page editing•Helps administrators control layout by limiting what content is editable•Very similar to Page Parameters (Properties)•Great for ‘serializing’ content for data manipulation (filtering, sorting, etc.) using XSL or other scripts

What is MultiEdit?

•MultiEdit was originally designed for straight HTML pages (non PCFs)•Reminder: Page layout for PCFs is determined by XSL•All MultiEdit fields are displayed for editing, even if the XSL does not utilize them all

What is MultiEdit?

•Access via “Edit”

•Access via “Properties”

Configuring MultiEdit

•Each MultiEdit field is defined within an editable region•Ex. (<ouc:div><ouc:multiedit />Value</ouc:div>)

•Use instead of the ‘Editor’ tag•Form element ‘types’ include: Text, Mini-WYSIWYG, Radio, Dropdown Select, Checkboxes, Image Chooser, Asset Chooser•Each ‘type’ has additional options for further customization•Each field can have it’s own Group Access setting (set in parent editable region tag)• Tags can be written using XML “Nodes” or “Comments”:<ouc:multiedit />, <!-- ouc:multiedit -->, or <!-- com.omniupdate.multiedit -->

Configuring MultiEdit (cont’d)

•Text Field Example:<ouc:div label=“department” group=“Everyone” button=“hide”><ouc:multiedit type=“text” prompt=“Department” alt=“Type in the department name.”/>Mathematics</ouc:div>

•Image Chooser Example:<ouc:div label=“profile-image” group=“Administrators” button=“hide”><ouc:multiedit type=“image” prompt=“Profile Image” alt=“Select an image to associate with this profile.” /><img href=“/images/profiles/rkiffe.jpg” alt=“Robert Kiffe” /></ouc:div>

Configuring MultiEdit (cont’d)

•Final Product Example:

Demo: Image Slider

+Hands-On:

• Building a Faculty Profile• Building ‘Template Components’

Q&A

Thank You!

Don’t forget to take our survey

outc15.com/surveys