Form Designer Advanced Design Features

  • Article

A Form Designer module connects a list in a Microsoft Office Live Small Business application with a form that appears on the account's Web site, collecting information from the Web site's visitors and automatically adding it to the list. Form Designer is the tool used to create and edit Form Designer modules.

If the Advanced Design features are activated for an account, you can customize a Form Designer module using Extensible Stylesheet Language Transformations (XSLT). The Office Live Small Business parser takes the XML that describes the underlying list, and the XSLT template rules that you provide, to transform XSLT into the output format you want. This article discusses how to generate the XML and write the XSLT needed for this process, and shows examples of each.

Using the Advanced Design features, you can create the look you want for the form by writing a completely custom layout; scripts to provide validation, logic and behaviors; and CSS styles. This article introduces you to some special tokens available only for Office Live Small Business that can make this process easier, and includes some example XSLT to get you started.

To learn more about creating forms to collect data, see Collect Customer Information in a Form on a Web Site.

To activate the Advanced Design features, see Activate and Deactivate Advanced Design Features.

Generate XML to Describe the List

Before you can use an XSLT transformation to customize a form, you must first generate the XML that describes the underlying list. This XML is generated when you select columns from the list on the Data Details tab of Form Designer for a Form Designer module.

Note

It is best to select only the columns that you intend to present as controls on your form. This keeps your XML smaller, making the XSLT transformation more efficient, and your pages will render more quickly for your customers.

On the Data Details tab, when you have selected the columns that you want to collect data into, click View XML source to review the XML that describes these columns. The XML opens in a separate browser window, and can remain open as a reference for you while you write your XSLT.

Example

Following is example XML for all of the columns in the Tasks list found in the Team workspace:

<Root>
<ControlBaseID /> 
<Schema>
<Field Type="Text" Name="Title" DisplayName="Title" Required="TRUE" />
<Field Type="Choice" Name="Priority" DisplayName="Priority">
<CHOICES>
<CHOICE>(1) High</CHOICE> 
<CHOICE>(2) Normal</CHOICE> 
<CHOICE>(3) Low</CHOICE> 
</CHOICES>
<MAPPINGS>
<MAPPING Value="1">(1) High</MAPPING> 
<MAPPING Value="2">(2) Normal</MAPPING> 
<MAPPING Value="3">(3) Low</MAPPING> 
</MAPPINGS>
<Default>(2) Normal</Default> 
</Field>
<Field Type="Number" Name="PercentComplete" Percentage="TRUE" Min="0" Max="1" DisplayName="% Complete" /> 
<Field Type="Note" RichText="TRUE" Name="Body" DisplayName="Description" /> 
<Field Type="DateTime" Name="StartDate" DisplayName="Start Date" Format="DateOnly">
<Default>[today]</Default> 
<DefaultFormulaValue>2007-10-24T00:00:00Z</DefaultFormulaValue> 
</Field>
<Field Type="DateTime" Name="DueDate" DisplayName="Due Date" Format="DateOnly" /> 
</Schema>
</Root>

Provide Your Own XSLT Code

When you activate the Advanced Design features for an Office Live Small Business account, a Layout tab is added to Form Designer for any new or existing Form Designer modules. On the Layout tab, there are radio buttons that let you replace the standard layouts in two ways, depending on your needs.

You can add an XSLT file to an Office Live Small Business account and then associate this file with any Form Designer module. To learn how to upload an XSLT file to an account, see Add an XSLT File to the Document Gallery. Using the Document Gallery lets you improve the maintainability of your code by allowing you to keep your XSLT file in a central location and use it across multiple forms at the same time. If you need to make changes, you can simply upload a new copy of the XSLT file with the same name and the changes automatically propagate across all Form Designer modules that are linked to that XSLT file.

Once the XSLT file is in the Document Gallery, you can link a Form Designer module to the XSLT file by using the Browse button next to Link to an XSLT file on the Layout tab of Form Designer.

Edit XSLT

If you do not link the Form Designer module to an XSLT file, you can paste or write your XSLT code directly into a text area on the Layout tab of Form Designer. This option is useful during the development process because you can quickly update and save your XSLT changes and see the form rendered on the page.

Using XSLT to Create a Custom Layout

XSLT gives you incredible flexibility to transform the XML generated automatically for you by Office Live Small Business into the HTML layout of your choice. You can use just about any HTML and CSS styles that you need to get the exact layout you want. You can also add <script> tags to provide JavaScript for added functionality such as validation, field masks, and cursor behavior.

In addition to the features built into XSLT, Office Live Small Business developers have three important placeholder tokens available to make form design easier by abstracting away much of the work of generating form controls. These tokens are:

  • <ol:input>

  • <ol:validator>

  • <ol:submit>

<ol:input>

A significant amount of time is often spent when designing a form to make sure that the controls on the form match the requirements for the underlying columns. Office Live Small Business has added the <ol:input> token to make this easier.

The <ol:input> token is used to determine the type, placement, and attributes of a control on your form. In your XSLT layout, wherever you want a control to appear, add the <ol:input> tag and set the id attribute to match the Name attribute for the <Field> node from the XML.

Example

This example loops through every <Field> node in the XML and creates a control for it, followed by two line breaks.

<xsl:for-each select="//Schema/Field">
<ol:input>
<xsl:attribute name="id">
<xsl:value-of select="@Name"/>
</xsl:attbribute>
</ol:input>
<br/><br/>
</xsl:for-each>

<ol:validator>

The <ol:validator> token is a placeholder for error messages from the server associated with a field. When the form is first loaded, the validator is blank. When the Web site visitor submits the form, the server runs validation on the data. If the data fails validation, the server rejects the form and sends it back to the user with the error message inserted into the placeholder where the validator tag was.

Implementation of this token is similar to the <ol:input> token, in that your XSLT must set the id attribute for each <ol:validator> to match the Name attribute for the <Field> node from the XML.

Example

Building on the previous example, this example loops through every <Field> node in the XML, outputs a control, then a line break, and then a validator placeholder.

<xsl:for-each select="//Schema/Field">
<ol:input>
<xsl:attribute name="id">
<xsl:value-of select="@Name"/>
</xsl:attbribute>
</ol:input>
<br/>
            <ol:validator>
              <xsl:attribute name="id">
                <xsl:value-of select="@Name" />
              </xsl:attribute>
            </ol:validator>
</xsl:for-each>

<ol:submit>

The <ol:submit> token is a placeholder for the submit button on your form. Office Live Small Business makes it available as a token so that you can put the submit button anywhere you want on the form. You can also change the attributes for the submit button using the <xsl:attribute> tag. For example, you can add an onclick event to the button that runs your own custom validation before the form is submitted.

Example

In this example, the onclick event is configured to call a function called myJavascriptFunction() each time the submit button is clicked.

<ol:submit id="btnSubmit">
<xsl:attribute name="onclick">myJavascriptFunction()</xsl:attribute>
</ol:submit>

Example XSLT Form Designer Module Layout

The code below is the XSLT that supports the default Align text on top layout available for a Form Designer module.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ol="http://www.officelive.com" version="1.0">
  <xsl:output method="html" />

  <xsl:template match="/">
    <table border="0" cellpadding="0" cellspacing="0">
      <xsl:for-each select="//Schema/Field">
        <tr valign="top">
          <td style="padding-top:5px;padding-bottom:5px;">
            <xsl:value-of select="@DisplayName"/>
            <xsl:if test="@Required='TRUE'">
              <span style="color:#FF0000;font-size:14px; ">&#160;*</span>
            </xsl:if>
            <br/>
            <ol:input>
              <xsl:attribute name="id">
                <xsl:value-of select="@Name"/>
              </xsl:attribute>
              <xsl:attribute name="title">
                <xsl:value-of select="@DisplayName"/>
              </xsl:attribute>
            </ol:input>
          </td>
        </tr>
        <tr valign="top">
          <td>
            <ol:validator>
              <xsl:attribute name="id">
                <xsl:value-of select="@Name" />
              </xsl:attribute>
            </ol:validator>
          </td>
        </tr>
      </xsl:for-each>
      <tr >
        <td style="padding-top:20px">
          <ol:submit id="btnSubmit">
          </ol:submit>
        </td>
      </tr>
    </table>


  </xsl:template>
</xsl:stylesheet>

See also

Collect Customer Information in a Form on a Web Site
Activate and Deactivate Advanced Design Features
Add an XSLT File to the Document Gallery