BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
5/24/2013

Creating a MultiEdit Template

The MultiEdit editor allows form-controlled editing for XML and other structured content. Administrators can create forms-based templates that present users with an easy-to-follow guide for adding content to a structured layout. Templates can include both style-free form fields and WYSIWYG content editing areas. MultiEdit is also valuable as it ensures that the same node structure is used for every document.

MultiEdit can be set up to show only the forms-based editor rather than an editable region with the WYSIWYG toolbar. It can also be configured so that both editors are available However, it is not advised that a MultiEdit region is also editable via the standard editor. Instead, there may be a combination of form-type elements and standard editable regions on a given page.

The form template can be designed so that only a specific type of information can be added. For example, content types include text area, radio button, Asset Chooser, check box, drop-down selection box, or image inserter.

MultiEdit tags are a special form of OmniUpdate tag that allows a user to edit multiple content regions at one time on a page. A page can have standard tags or a MultiEdit tag, or a combination of both. MultiEdit tags are surrounded by OmniUpdate editable region tags with the button attribute set to hide. Button attribute controls whether the user is presented the edit button in the preview screen or not. Setting the button="hide" will make the region only editable via MultiEdit.

In some cases, the XSL is set to handle the MultiEdit fields individually, and the styling is actually controlled by the XSL. This is actually preferred as it allows one file to be updated and affect all files using it. In these cases, the ability to have a combination of editable region areas and MultiEdit fields on a given page may be hindered.

Multi Edit Area

 

When the form is saved, the data is transformed to a desired and predefined layout and with the appropriate styling applied.

Multi Edit Template

To create a MultiEdit PCF, a traditional OU Campus Editor tag is replaced with a MultiEdit tag for each of the elements that should be included in the form. These tags can be formatted for different types of data input, including text, text areas, assets, radio button, checkbox, and drop-down selections, as well as an image file chooser. When the user attempts to edit the page, he/she will use the orange MultiEdit button at the top of the page instead of an edit button traditionally found near the content to be edited. This will open the MultiEdit form instead of opening the full WYSIWYG Editor in which traditional pages are edited.

For a complete list of the attributes available with a MultiEdit tag, see: Page Tagging Reference.

Example of a Multi-Edit Content Area

<content>
      <faculty-image>
            <div style="float:right;font-size:10px;padding:5px;margin:5px;">
            <div class="portfolio-img">
                  <!-- com.omniupdate.div label="photo" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="image" prompt="Photo" alt="Choose a photo." path="/" lockout="no" -->
                        <img width="320" height="180"  title="" alt="" src="/_resources/images/sample/portfolio1.jpg"/>
                                    <!-- /com.omniupdate.div -->
                        <span class="portfolio-overlay" style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 4px;">&nbsp;</span>
                  <br />
                  </div>           
                  <br />
            </div>
            </faculty-image>
            <desig>          
            <h3><!-- com.omniupdate.div label="name" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Name" alt="Enter your name." -->Richard Higgins, Ph.D<!-- /com.omniupdate.div -->, <i><!-- com.omniupdate.div label="title" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Title" alt="Enter your title." -->Professor of Data Intelligence<!-- /com.omniupdate.div --></i></h3>
            </desig>
            <b><!-- com.omniupdate.div label="education" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Education" alt="Enter your education information." -->Arizona State University, Ph.D., Computer Science<!-- /com.omniupdate.div --></b><br />
<h4>Biography</h4>
            <bio><!-- com.omniupdate.div label="biography" group="Everyone" button="hide" --><!-- com.omniupdate.multiedit type="textarea" prompt="Biography" alt="Enter a short biography." rows="15" editor="yes" --><p>Director for the Gallena Center for Distance Education. Dr. Harris is also the Director of <strong>Biology Technology</strong> at&nbsp;Gallena University. Prior to these positions, Dr. Harris taught chemistry at Arizona State for over 10 years. Before coming to Gallena,&nbsp;He&nbsp;has been the Associate Manager for the Gallena Link-to Learn Initiative and has served as the director or co-director of numerous grant projects related to technology.</p><!-- /com.omniupdate.div --></bio>
            </content>

 

Adding MultiEdit Tags

For the tutorial, a page has been configured with a couple of MultiEdit fields already in place. This tutorial will guide through the process of converting a current standard editable region to MultiEdit tags.

Note: The PCF that will be used is using the commented OmniUpdate tags since the XSL to which it is pointing is still configured for the commented tags rather than the individual nodes.

Start by previewing the new-multiedit.pcf file that is within the /workshop-page-templating directory. Then click on Edit and observe the two edit buttons: MultiEdit and a standard editable region.

Editing the Main Content Area

 

The image, and title are within the MultiEdit fields, while the rest of the content can be edited in the WYSIWYG Editor.

Current MultiEdit Fields

Multi Edit Area

Current Editable Region Configuration

 Editable Region

Edit the page using the Source  Editor. Ensure that the code, especially the highlighted portion, appears as identified here:

<?xml version="1.0" encoding="utf-8"?>
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web"?>
<?pcf-stylesheet path="/_resources/xsl/fac_profile.xsl" extension="xml" title="XML"?>
<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
 
<document>
      <config>
            <parameter name="pagetype" type="select" group="Everyone" prompt="Page Type" alt="Please choose an appropriate page type">
                  <option value="article" selected="false">Article</option>
                  <option value="content" selected="true">Content</option>
                  <option value="onecolumn" selected="false">One Column</option>
            </parameter>
            <!-- ouc:properties -->
            <parameter name="image_teaser" type="select" group="Everyone" prompt="Article Image" alt="Do you want to display the article with an image teaser ">
                       
<option value="true" selected="true">Yes</option>
<option value="false" selected="false">No</option>
            </parameter>
            <parameter name="article_image" type="filechooser" group="Everyone" prompt="Article Image" alt="Please choose a suitable image for the article" path="/">/img/gallena_images/gossling_hall_horizontal.jpg</parameter>
            <parameter name="article_desc" type="text" group="Everyone" prompt="Article Description" alt="Please enter a suitable article heading">Gallena University Named to the President’s Higher Education Community Service Honor Roll </parameter>
            <parameter name="author" type="text" group="Everyone" prompt="Article Author" alt="Please enter an article author name">Michael Monina</parameter>
            <parameter name="keywords" prompt="Keywords" type="checkbox"  alt="Pick select the appropriate keywords for the page">
            <option value="Gallena"  selected="true">Gallena</option>
            <option value="GU"  selected="true">GU</option>
            <option value="Gallena University"  selected="false">Gallena University</option>
            <option value="Why Choose Gallena"  selected="true">Why Choose Gallena</option>
            <option value="Undergraduate"  selected="true">Undergraduate</option>
            <option value="Graduate"  selected="false">Graduate</option>
      </parameter>
      <!-- /ouc:properties -->
      </config>
     
      <metadata>
      <!-- ouc:properties -->
      <parameter name="keywords" type="checkbox" group="Everyone" prompt="Keywords" alt="Select keywords that relate to this page.">
            <option value="academics" selected="false">Academics</option>
            <option value="admissions" selected="false">Admissions</option>
            <option value="matriculation" selected="false">Matriculation</option>
            <option value="athletics" selected="true">Athletics</option>
            <option value="sports" selected="true">Sports</option>
            <option value="basketball" selected="true">Basketball</option>
            <option value="football" selected="true">Football</option>
            <option value="volleyball" selected="true">Volleyball</option>
            <option value="tennis" selected="true">Tennis</option>
      </parameter>
      <meta name="Description" content="Gallena University was recently named to the President’s Higher Education Community Service Honor Roll for 2010 " />
      <meta name="Keywords" content="" />
      <meta name="Author" content="Michael Monina" />
      <!-- /ouc:properties -->
      </metadata>
 
      <!-- ouc:properties --><title>Carol Clements</title><!-- /ouc:properties -->
 
      <content>
      <faculty-image>
            <div style="float:right;font-size:10px;padding:5px;margin:5px;">
 
            <div class="portfolio-img">
                  <!-- ouc:div label="photo" group="Everyone" button="hide" --><!-- ouc:multiedit type="image" prompt="Photo" alt="Choose a photo." path="/" lockout="no" -->
                        <img width="320" height="180"  title="" alt="" src="/_resources/images/sample/portfolio1.jpg"/>
                                    <!-- /ouc:div -->
                        <span class="portfolio-overlay" style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 4px;">&nbsp;</span>
     
                  <br />
                  </div>                 
 
                  <br />
            </div>
            </faculty-image>
            <desig>
            <h3><!-- ouc:div label="name" group="Everyone" button="hide" --><!-- ouc:multiedit type="text" prompt="Name" alt="Enter your name." -->Carol Clements<!-- /ouc:div -->, <i><!-- ouc:div label="title" group="Everyone" button="hide" --><!-- ouc:multiedit type="text" prompt="Title" alt="Enter your title." -->Professor of Marketing and Public Relations<!-- /ouc:div --></i></h3>
            </desig>
      <!-- ouc:div label="content" group="Everyone" button="700" --><!-- ouc:editor csspath="/_resources/ou/editor/twocolumn_content.css" cssmenu="/_resources/ou/editor/styles.txt" width="1042" -->
            <strong>Arizona State University, Ph.D., Chemistry</strong><br />
           
            <h4>Biography</h4>
            <bio><p>Director for the Gallena Center for Distance Education. Dr. Harris is also the Director of <strong>Biology Technology</strong> at&nbsp;Gallena University. Prior to these positions, Dr. Harris taught chemistry at Arizona State for over 10 years. Before coming to Gallena,&nbsp;He&nbsp;has been the Associate Manager for the Gallena Link-to Learn Initiative and has served as the director or co-director of numerous grant projects related to technology.</p></bio>
           
            <h4>Publications</h4>
            <ul>
<li>Harris, Greg C. and John Sampson. "Gian Chloroplast Isolation." Macrochemical Journal. 41(1-2), 875-350 (2008).</li>
<li>Harris, Greg C., Ben J. Tom and Greg P. Moore. "Determination of the Photochemical Absorption of the Lichen Using Photoacoustics." Photochemistry and Photobiology 39(2), 909-7195 (2008).</li>
</ul><!-- /ouc:div -->
      </content>
</document>

 

It is possible that this may appear differently if at some point this page was updated. To create the MultiEdit fields and see the expected styling, make sure that, at a minimum, the node structure matches.

The available attributes for MultiEdit are similar to those of variables and parameters. The three required or, in the case of alt, strongly suggested fields are displayed below. For a complete list of attributes see the Support site, and navigate to Development > Page Tagging > Page Tagging Reference.

Attribute Name

Syntax Example

Description

type

type="text”

Required

Defines the type of field. Can be:

text, textarea, image, radio, checkbox, select, asset

The attributes may be used in conjunction with other attributes. For instance, textarea may be used with editor to allow for a mini-WYSIWYG Editor to be used.

prompt

prompt=”Education”

Required

Provides a label for the user, defining the field.

alt

alt=”Enter the name of the school you attended.”

Provides instructional text to the user.

 

To update the current editable region and convert the nodes into MultiEdit fields:

  1. Remove the current div tag with label="content" and its corresponding editor tag.
  2. Wrap the education field in a div tag with the label="education" and a MultiEdit tag with type="text". (See the code example for all attribute information.) Be sure to put the div and MultiEdit tags within the <strong> tags.
  3. Wrap the biography field in a div tag with the label="biography" and a MultiEdit tag with type="textarea". Be sure to put the div and MultiEdit tags within the <bio> tags.
  4. Wrap the publications field in a div tag with the label="publications" and a MultiEdit tag with type="textarea". Be sure to put the div and MultiEdit tags after the <h4> tags.

The button should be hidden for each of the div tags.

<faculty-image>
<div style="float:right;font-size:10px;padding:5px;margin:5px;">
            <div class="portfolio-img">
                  <!-- ouc:div label="photo" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="image" prompt="Photo" alt="Choose a photo." path="/" lockout="no" -->
<img width="320" height="180"  title="" alt="" src="/_resources/images/sample/portfolio1.jpg"/>
                  <!-- /ouc:div -->
<span class="portfolio-overlay" style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 4px;">&nbsp;</span>
      <br />
            </div>                       
      <br />
</div>
</faculty-image>
<desig>
      <h3>
<!-- ouc:div label="name" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="text" prompt="Name" alt="Enter your name." -->
Carol Clements
<!-- /ouc:div -->,
<i>
<!-- ouc:div label="title" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="text" prompt="Title" alt="Enter your title." -->
Professor of Marketing and Public Relations
<!-- /ouc:div -->
</i></h3>
</desig>
<strong>
<!-- ouc:div label="education" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="text" prompt="Education" alt="Enter your education information." -->
Arizona State University, Ph.D., Chemistry
<!-- /ouc:div -->
</strong><br />
<h4>Biography</h4>
      <bio>
<!-- ouc:div label="biography" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="textarea" prompt="Biography" alt="Enter a short biography." rows="15" editor="yes" -->
<p>Director for the Gallena Center for Distance Education. Dr. Harris is also the Director of <strong>Biology Technology</strong> at&nbsp;Gallena University. Prior to these positions, Dr. Harris taught chemistry at Arizona State for over 10 years. Before coming to Gallena,&nbsp;He&nbsp;has been the Associate Manager for the Gallena Link-to Learn Initiative and has served as the director or co-director of numerous grant projects related to technology.</p>
<!-- /ouc:div -->
</bio>
<h4>Publications</h4>
      <!-- ouc:div label="publications" group="Everyone" button="hide" -->
<!-- ouc:multiedit type="textarea" prompt="Publications" alt="Add or edit the list of publications." rows="15" editor="yes" -->
<ul>
            <li>Harris, Greg C. and John Sampson. "Gian Chloroplast Isolation." Macrochemical Journal. 41(1-2), 875-350 (2008).</li>
            <li>Harris, Greg C., Ben J. Tom and Greg P. Moore. "Determination of the Photochemical Absorption of the Lichen Using Photoacoustics." Photochemistry and Photobiology 39(2), 909-7195 (2008).</li>
      </ul>
<!-- /ouc:div -->

Save the changes, and click Edit. Notice that the editable region button is gone. Click on the MultiEdit button. The fields have been added there.

Multi Edit Area

 

The page can now be edited with MultiEdit. 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)