EDIT LAYOUT TEMPLATES

Edit Layout Templates allow (WSD) administrators to provide complete control over the data entry form used in the Create/Edit Online screen when Page Layout Templates are used. This allows template designers to create data entry formats that are different from the layouts used when the content is actually published to the web site.

Edit Layout templates are created in the same way as Page Layout Templates, and provide some enhancements over the command sets used to build Page Layout Templates. When creating Edit Layout Templates, designers can resequence content elements to conform to input forms, and use HTML controls to

  • place restrictions on the type of information entered by content contributors, and
  • provide additional JavaScript-based functionality to assist content contributors when they are entering information to be published.

Edit Layout Templates are stored in the "editlayout" templates directory and are listed as a separate template Category in Maintain Templates.

This document provides the following information about the WebSite Director (WSD) Edit Layout Templates:

  1. Implementing Edit Layout Templates
  2. Creating Edit Layout Templates
  3. Event Processing
  4. Remote Image Lists
  5. Example  - Select List Data Entry
  6. Example  - JavaScript in Edit Layout Templates  
  7. Example  - Creating a "Preview" button for a selected image   

1. Implementing Edit Layout Templates

Edit Layout Templates are an optional component when using Page Layout Templates. If a Page Layout Template does not have an associated Edit Layout Template, the Page Layout Template is used as the basis for data entry.

Edit Layout Templates are assigned to a new WSD update request by setting the "editlayout" property using a "SetProperty " template command in a Page Layout Template. The WSD "Submit New Request" function does not have a way to select Edit Layout Templates independently from the Page Layout Template selection.

When a content contributor enters the Create/Edit Online screen, WSD checks the request properties for the "editlayout" property. If that property exists, WSD loads the specified Edit Layout Template into the Create/Edit Online screen (between the "Editing ...." title at the top and the row of buttons at the bottom).

By default, only the Page Layout Template can be selected on the request's Properties screen. Site owners can add a "Custom Property" that allows WSD users to manually assign a specific Edit Layout Template to individual requests (See Custom Properties ). Alternatively, the Page Layout Template designer can associate different Edit Layout Templates with the same Page Layout Template by:

  • creating multiple copies of a Page Layout Template and
  • associating each copy with a different Edit Layout Template.

These methods allow different content contributors to manage distinct page elements within the same content using different Edit Layout Templates.

2. Creating Edit Layout Templates

The Edit Layout Template is a data entry form, and can contain any valid HTML statement. The Edit Layout Template will be placed within the WSD-generated page, allowing content contributors to enter information for approval and publishing. As such, you should take care when using HTML <HEAD> and <BODY> tags, because some older browsers may not allow embedded documents.

The data entry form can have the same look and feel as the published document, or it may contain only a subset of the template fields used in the Page Layout Template. When an Edit Layout Template contains only a subset of fields, the fields not referenced will not be modified by WSD during editing. In addition to WSD’s Page Layout Template commands, the data entry form can contain JavaScript validation code and any other processing allowed in a traditional HTML form except the <FORM> tag. The Create/Edit Online screen created by WSD provides the <HEAD>, <BODY>, and <FORM> tags used for data entry in the screen. The Edit Layout Template can contain the same layout template field tags as Page Layout Templates, and they are processed in the same way. However, the only required attribute in template field tags in Edit Layout templates is the "name=" attribute that identifies the corresponding field on the associated Page Layout Template. When additional template field attributes are defined on an Edit Layout template, these attributes will override the corresponding attribute from the Page Layout Template.

Any WSD template language tags can be used in an Edit Layout Template. See Template Language .

In addition to regular WSD template language tags, standard HTML form fields can be defined in the Edit Layout Template using traditional HTML form field tags (i.e. "<INPUT>", "<SELECT> ", etc.). To allow WSD to match up selected values with the equivalent fields in the Page Layout Template, the field name specified in the HTML form field must match the Page Layout Template field name.

To prevent name collisions with internal WSD fields in the same form, references to Page Layout Template field names are made in the form $<name>$ where <name> is the declared template field name from the Page Layout Template (i.e. "NewsReleaseYear"). The "$<name>$ " reference can be used in any HTML statement, including HIDDEN fields. To refer to the value of a WSD field anywhere on the form, use the format: "<$field:fieldname$> ".

    For example:<INPUT type=TEXT name=$Headline$ value="<$field:Headline$>">

The following annotation is required when you want WSD to associate previously entered <OPTION>, <INPUT type=RADIO>, and <INPUT type= CHECKBOX> field values to render them properly when content contributors are modifying existing content. There are three elements associated with any of these fields when they are to be rendered by WSD. These are:

  1. $<name>$ - The value of the "name=" attribute of the associated field in the Page Layout Template
  2. "<value>" - The data value previously selected from the list of <OPTION> tags, or the value associated with an <INPUT type=RADIO>, or <INPUT type= CHECKBOX>entry, as stored in the content associated with this use of the Page Layout Template
  3. "<keyword>" - The word or phrase (i.e. "selected" or "checked") placed in the list of entries associated with the specific entry identified by <value>

3. Event Processing

Edit Layout templates can include JavaScript functions that are executed during certain "events" performed by the browser, such as the user leaving a selection list field. Event functions that are based on fields defined within the Edit Layout template can be "attached" to those fields within the template itself. But certain events are defined in the part of the Create/Edit online screen that is not controlled by the Edit Layout template. To attach JavaScript functions to those events, the following local properties can be used:

UpdateEvent - Used to specify a JavaScript validation function that is called when the user clicks the "Update", "Update and Return", or "Preview" buttons. The UpdateEvent property should be set to the name of a JavaScript function previously defined in the Edit Layout template that takes no parameters and returns a value of true or false. An example of setting such a property is as follows:

    <$setproperty UpdateEvent=validate_fields>

If the validation function returns false, the update (or preview) will be cancelled. If the function returns true, the update (or preview) will continue normally.

OnloadEvent - Used to specify a JavaScript function that is called after the template has been fully processed and the screen is fully displayed (in the screen's "Onload" event). This event should be used for any function that depends on the value of any form fields in the Edit Online screen (such as the "parse_date_field" function used in the sample2.edit_layout template). An example of setting this property is as follows:

    <$setproperty OnloadEvent=parse_date_field>

4. Remote Image Lists

WSD allows you use two different methods to insert images into your web page:

  1. a selection list for an IMAGE template field, and
  2. the "Insert Image" dialog in EditLive.

By default, WSD uses the "Edit Online Image Dir" settings from a Page Layout Template, Directory Properties, or System Config to generate a list of images from one or more directories on the web server.

To support Remote Image Lists, WSD can call an external script or program to retrieve a list of images for use in IMAGE template fields or the EditLive Insert Image dialog. The external script or program is specified through a URL and can reside on any web server accessible through an HTTP connection from WSD. The external script or program can be written in any scripting or programming language.

The URL to the Remote Image List script or program is specified in a property called "imagedirurl". When layout templates are used, the property can be set in a Page or Edit Layout Template using the <$setproperty ...> template tag. When using the Remote Image List feature in EditLive when layout templates are not used, the property can be set as a custom directory property.

The "imagedirurl" property should be a fully-qualified URL to the Remote Image List script or program. Parameters for the script or program can be appended to the URL using standard HTTP GET form field formatting. The following properties can be inserted into the URL using "$prop:propname$" replacement variables:

  • imagedir - List of directories, comma-separated, derived from the page/edit layout template, directory properties, or System Config.
  • mimetypes - Mime setting from layout field, or default of "image/*"
  • imagelistpref - "Links" or "Inline" setting from User Preferences
  • absolute - Set to "Yes" if "absolute" attribute set in layout field
  • filename - Filename of document being edited
  • fileurl - URL of document being edited
  • fname - Filename without path of document being edited
  • extension - File extension of document being edited
  • mimetype - Mime type of document being edited
  • dir... - All directory properties for the document directory

The Remote Image List script or program must return the list of available images as an XML document. A sample document is as follows:

<imagelist>
   <title>Test Image List</title>
   <urlprefix>http://www.cyberteams.com/images/</urlprefix>
   <image>
      <url>cti-logo-reg.gif</url>
      <displayname>cti-logo-reg.gif (CyberTeams Logo)</displayname>
   </image>
   <image>
      <url>ComstockPatriotic.jpg</url>
      <displayname>Flag</displayname>
   </image>
   <image>
      <url>exp-header-2.1.gif</url>
      <displayname>exp-header-2.1.gif</displayname>
   </image>
</imagelist>
White
space and line feeds are optional.
The XML tags used in the response are as follows:
  • imagelist - The outer container of the list of images
  • title - String displayed as the title of the EditLive Insert Image window (optional)
  • urlprefix - URL string to prepend to all image url values (optional)
  • image - The container for all information specified for each image in the list. Must contain a url and displayname tag for each image.
  • url - The URL to the image, which may be relative to the URL specified in the "urlprefix" tag
  • displayname - The text string to display to the user for the image

5. Example - Select List Data Entry

The following example is taken from the "sample.edit_layout" template. It allows WSD to properly show the actual selected value (i.e. "2001" if it was selected during initial entry) from the existing content when WSD displays it during content modification.

HTML used for data entry/selection:

    <SELECT name=$NewsReleaseYear$>
    <OPTION value=2000 {$field:NewsReleaseYear$:"2000":"selected"}>2000
    <OPTION value=2001 {$field:NewsReleaseYear$:"2001":"selected"}>2001
    <OPTION value=2002 {$field:NewsReleaseYear$:"2002":"selected"}>2002
    </OPTION>
    </SELECT>

Template designers can also reference Page Layout Template variables in creating JavaScript code that manipulates one or more data entry <FORM> field variables to calculate values to be stored in content maintained by Page Layout Templates.

6. Example - JavaScript in Edit Layout Templates

The following example is taken from the "sample2.edit_layout" template. It shows the use of JavaScript to join multiple data entry fields (data values selected for 3 <SELECT> fields named "NewsReleaseMonth," "NewsReleaseDay," and "NewsReleaseYear") to be placed into a single Page Layout Template field named "NewsReleaseDate" in such a manner that WSD can properly render it back to the content contributor when the content is later modified. The example has 3 parts, placed in different locations of the Edit Layout template: 

  1. Part 1 precedes the other page content.
  2. Part 2 is placed at the location in the template where the content contributor actually chooses the information to be stored in the content.
  3. Part 3 is placed at the end of the Edit Layout template and used by WSD to place/replace the calculated value in the content file.

Part 1, precedes template commands:

    <script language="JavaScript">
    <!--
    function build_date_field() {
      var month_field = document.EditOnline.NewsReleaseMonth; 
      var selected_month = month_field.options[month_field.selectedIndex]; 
      var day_field = document.EditOnline.NewsReleaseDay; 
      var selected_day = day_field.options[day_field.selectedIndex]; 
      var year_field = document.EditOnline.NewsReleaseYear; 
      var selected_year = year_field.options[year_field.selectedIndex]; 
      var date_field = document.EditOnline.$NewsReleaseDate$; 
      date_field.value = selected_month.value + " " + selected_day.value + 
            ", " + selected_year.value;
    }
    //-->
    </script>

Part 2, used for data entry/selection:

    <select name="NewsReleaseMonth" onChange="build_date_field()">
    <option value="January">January
    <option value="February">February
    ...
    <option value="December">December
    </select>
    <select name="NewsReleaseDay" onChange="build_date_field()">
    <option value="1">1
    <option value="2">2
    ...
    <option value="30">30
    <option value="31">31
    </select> ,
    <select name="NewsReleaseYear" onChange="build_date_field()">
    <option value="2000">2000
    <option value="2001">2001
    <option value="2002">2002
    </select>
    <input type=hidden name="$NewsReleaseDate$" value="<$field:NewsReleaseDate$>">

Part 3, parses previously entered value before page is displayed:

    <script language="JavaScript">
    <!--
    function parse_date_field() { 
            var date_value = document.EditOnline.$NewsReleaseDate$.value; 
            if (date_value == "") { 
                    document.EditOnline.$NewsReleaseDate$.value = "January 1, 2000"; 
                    return; 
            } 
            var month_field = document.EditOnline.NewsReleaseMonth; 
            var space_pos = date_value.indexOf(" "); 
            if (space_pos == -1) return; 
            var current_month = date_value.substring(0,space_pos); 
            for (loop = 0; loop < month_field.length; loop++) { 
                    if (current_month == month_field.options[loop].value) { 
                            month_field.selectedIndex = loop; break; 
                    } 
            } 
            var remainder = date_value.substring(space_pos + 1,date_value.length); 
            var comma_pos = remainder.indexOf(","); 
            if (comma_pos == -1) return; 
            var current_day = remainder.substring(0,comma_pos); 
            var current_year = remainder.substring(comma_pos + 2,remainder.length); 
            var day_field = document.EditOnline.NewsReleaseDay; 
            for (loop = 0; loop < day_field.length; loop++) { 
                    if (current_day == day_field.options[loop].value) { 
                            day_field.selectedIndex = loop; break; 
                    } 
            } 
            var year_field = document.EditOnline.NewsReleaseYear; 
            for (loop = 0; loop < year_field.length; loop++) { 
                    if (current_year == year_field.options[loop].value) { 
                            year_field.selectedIndex = loop; break; 
                    } 
            }
    }
    <$setproperty OnloadEvent=parse_date_field>
    //-->
    </script>

7. Example - Creating a "Preview" button for a selected image

The following example is taken from the "sample.edit_layout" template. It uses JavaScript to create an "Image Preview Button" in an Edit Layout Template. This button allows a content contributor to preview the currently selected image for a Page Layout Template image insertion command without having to preview the entire page. As with all JavaScript examples, this one has multiple parts.

Part 1 - precedes template commands, and defines the JavaScript required to assemble a proper URL for use in the preview button.

    <script language="JavaScript">
    <!--
    function preview$Picture$(){ 
      varwindow_opts='toolbar=no,location=no,directories= no,
                      status=no,width=220,height= 300,
      '+'menubar=no,scrollbars=yes,resizable=yes'; 
      var icon_field = document.EditOnline.$Picture$; 
      if (icon_field.selectedIndex == 0) { 
             alert('You must select a Picture'); 
             return; 
      } 
      var icon = icon_field.options[icon_field.selectedIndex].value; 
      var url='http://www.cyberteams.com' + icon; 
      win = window.open(url,'preview_Icon',window_opts); 
      win.focus();
    }
    //-->
    </script>

Part 2 - consists of the HTML code for Preview Button:

    <input type=button value="View Picture" name="preView$Picture$" onclick="return preview$Picture$()">

The following shows the format used for this example

    (Part-1)
    <script language="JavaScript">
    <!--
    functionpreview$<variable-name>$(){ 
           varwindow_opts='toolbar=no,location=no,directories=no,status=no,width=220,height= 300,
           '+'menubar=no,scrollbars=yes,resizable=yes'; 
            var icon_field = document.EditOnline.$<variable-name>$; 
            if (icon_field.selectedIndex == 0) { 
                    alert('<error message text if variable has not
                         been selected>'); 
                    return; 
            } 
            var icon = icon_field.options[icon_field.selectedIndex].value; 
            var url='<base URL to directory from which content for
               variable-name was selected>' + icon; 
            win = window.open(url,'preview_Icon',window_opts); 
            win.focus();
    }
    //-->
    </script>

      Note: The text above that begins with "var window" and ends with "resizable=yes';" must be on the same line in your template.

    (Part-2)
    <input type=button value="<text for Preview Button>" name="preView$<variable-name>$" onclick="return preview$<variable-name>$()"> < /P> < /UL>

Copyright 2000-2005 CyberTeams, Inc., http://www.cyberteams.com All rights reserved.
CyberTeams and WebSite Director are registered trademarks of CyberTeams, Inc. All other marks are the property of their respective owners.