HOW TO CREATE/EDIT AN EDIT LAYOUT TEMPLATE

Edit Layout Templates allow WebSite Director (WSD) administrators to provide complete control over the data entry form 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 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 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 tutorial provides the following sections:

  • Implementing Edit Layout Templates
  • Creating Edit Layout Templates
  • Example 1 – Select List Data Entry
  • Example 2 – Javascript in Edit Layout Templates
  • Example 3 – Create a "Preview" button for a selected image

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. In this initial release, the WSD "Submit New Request" function does not have a way to select Edit Layout Templates independently from the Page Layout Template selection.

Example: To associate the "sample.edit_layout" Edit Layout Template with the "sample.template" Page-Layout Template, include the following command at the top of the "sample.template" template: SetProperty editlayout = "sample.edit_layout"

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).

Because only the Page Layout Template can be selected on the request's Properties screen, 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.

This allows different content contributors to manage distinct page elements within the same content by using different Edit Layout Templates.

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 browsers may not allow imbedded 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.

Example: You can remove the prompt value defined in the Page Layout Template by setting 'prompt=" "' in the Edit Layout Template.

In addition to regular WSD template field 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 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: "{$<name>$}".

For example: <INPUT type=TEXT name=$Headline$ value="{$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>

The format of this reference is:  {$<name>$:"<value>":"<keyword>"}

Example 1 – 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 {$NewsReleaseYear$:"2000":"selected"}>2000
<OPTION value=2001 {$NewsReleaseYear$:"2001":"selected"}>2001
<OPTION value=2002 {$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.

Example 2 – 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. Part 1 precedes the other page content. Part 2 is placed at the location in the template where the content contributor actually chooses the information to be stored in the content. 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="{$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; 
                    } 
            }
    }
    parse_date_field();
    //-->
    </script>

    Example 3 – Create 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$(){ <BR>       varwindow_opts='toolbar=no,location=no,directories=no,status=no,width=220,height=300,< BR>       '+'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">
    <!—
    function preview$<variable-name>$(){ <BR>       varwindow_opts='toolbar=no,location=no,directories=no,status=no,width=220,height=300,< BR>       '+'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>$()">

    • Copyright 2000-2003 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.