Creating a MultiEdit Template

Size: px

Start display at page:

Download "Creating a MultiEdit Template"

Dominic Barber
5 years ago
Views:

1 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. Page 1 of 10

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

3 To create a MultiEdit PCF, a traditional 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 dropdown 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. Page 3 of 10

4 Example of a Multi-Edit Content Area <content> <faculty-image> <div style="float:right;fontsize:10px;padding:5px;margin:5px;"> <div class="portfolio-img">  <img width="320" height="180" title="" alt="" src="/_resources/images/sample/portfolio1.jpg"/>  <span class="portfolio-overlay" style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 4px;"> </span> <br /> </div> <br /> </div> </faculty-image> <desig> <h3>Richard Higgins, Ph.D, <i>Professor of Data Intelligence</i></h3> </desig> <b>Arizona State University, Ph.D., Computer Science</ b><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 Gallena University. Prior to these positions, Dr. Harris taught chemistry at Arizona State for over 10 years. Before coming to Gallena, He has been the Associate Manager for the Gallena Link-to Learn Initiative and has served as the director or codirector of numerous grant projects related to technology.</p></bio> </content> Page 4 of 10

5 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 Edit and observe the two edit buttons: MultiEdit and a standard editable region. The image, and title are within the MultiEdit fields, while the rest of the content can be edited in the WYSIWYG Editor. Page 5 of 10

6 Current MultiEdit Fields Current Editable Region Configuration Edit the page using the Source Editor. Ensure that the code, especially the highlighted portion, appears as identified here: Page 6 of 10

7 <?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 " 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>  <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> Page 7 of 10 <option value="undergraduate"

8 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 Message 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 " alt alt="enter the name of the school you attended." Required. Provides a label for the user, defining the field. 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. Page 8 of 10

9 <faculty-image> <div style="float:right;font-size:10px;padding:5px;margin:5px;"> <div class="portfolio-img">   <img width="320" height="180" title="" alt="" src="/_resources/images/ sample/portfolio1.jpg"/>  <span class="portfolio-overlay" style="float:right;fontsize:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 4px;"> </span> <br /> </div> <br /> </div> </faculty-image> <desig> <h3>   Carol Clements , <i>   Professor of Marketing and Public Relations  </i></h3> </desig> <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 Gallena University. Prior to these positions, Dr. Harris taught chemistry at Arizona State for over 10 years. Before coming to Gallena, He has been the Associate Manager for the Gallena Page 9 of 10 Link-to Learn Initiative and has served as the director or co-director of

10 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. The page can now be edited with MultiEdit. Page 10 of 10

Page Tagging Reference Guide For Editable Regions

Page Tagging Reference Guide For Editable Regions omniupdate.com Table of Contents Page Tagging for Editable Regions... 3 Tag Syntax... 3 Properties > Parameters... 3 Title/Meta Tags... 3 PCF Parameters...