XForms

Table of contents

• Introduction
• Basic XForms concept
• XForms forms management structure
• EPiServer.XForms namespace
• EPiServer.XForms.WebControls namespace
• Sending form data
• FAQ
• Working with XForms in MVC

Introduction

XForms contains logic to store and present forms and data posted from forms. Together with the forms editor in the EPiServer CMS edit view, it enables editors to create and modify forms and to view form data. The XForms architecture enables customization, allowing developers to adapt the XForms functionality. This document describes how the technology is built up and answers common questions concerning EPiServer XForms.

Basic XForms concept

Editors use the Forms Editor to create forms in edit view. When saved, the content of the form is saved as XHTML and XForms markup.

When the form is presented, it is loaded as web controls and rendered as HTML to the client, so there is no need to install any additional software to support XForms to the client. Note that when using this approach, EPiServer CMS does not support the client-side functionality that may be available when using an XForms browser plug-in.

Folders for forms

Form folders make it possible to organize a group of forms in a folder structure, which can be useful if the site contains many forms. It is also possible to set a default folder for forms for either the entire website or parts of the website, making it easier for editors to manage forms. This is done by adding a dynamic property named “DefaultFormFolder” and then setting the property value to the folder of your choice for the part(s) of the website you want to affect.

When creating a new form page and selecting a form, the default folder will be the starting point for the form selection. When creating new forms, the default folder will be suggested. This property is supported, but is not included in the sample site and is, therefore, not included in the language files.

XForms forms management structure

1. A form is created in the Form Editor in EPiServer CMS.
   
   
2. Through EPiServer.XForms, the form is converted to XHTML and XForms. Steps 1 and 2 can be repeated until the form has the desired look and functionality.
   
   
3. The form is sent through EPiServer.XForms to the client as HTML. It is possible to alter the form before it is presented to the client by attaching to events.
   
   
4. Data is posted and validated. If the input does not pass validation, error messages will be sent to the client. (It is also possible to have additional validation on the client before sending the form to the server. This is done by setting the EnableClientScript property to true on the XFormControl web control.)
   
   
5. Through EPiServer.XForms, form data is passed into the EPiServer CMS data warehouse. It is also possible to send the posted data as an e-mail or to a custom URL.
   
   
6. If the data has been saved to the database, it is possible to load and show the posted data on the website.

EPiServer.XForms namespace

XForm class

The XForm class is a representation of the content and the structure of the form. The content of the form is saved as XML. The XML contains the instance node, which contains the data for the form such as field validation and default values for fields. It also stores information about the structure of the form; this is stored as XHTML with controls from the XForms namespace. This class is responsible for creating a default XFormData object from its instance node.

The following code shows an example of the content of an XForm. When exporting a form with the EPiServer CMS forms editor, the form content will be represented in this format.

<root xmlns:xforms=a href="http://www.w3.org/2002/xforms">http://www.w3.org/2002/xforms</a>
      xmlns:xsi=<a href="http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance</a>>
    <model>
           <instance>
                </Author />
                  </instance>
    </model>
      <table id="id_matrix" border="0">
              <tr>
                  <td valign="top" width="100" height="10">
                                   <span id="id_fields1">Author</span></td>
                  <td valign="top" width="200" height="10">
                      <xforms:input ref="Author" value="" id="id_fields2" size="40" /></td>
              </tr>
      </table>
</root> 

XFormData class

The XFormData class contains information on the content of a posted form. Normally a new XFormData class instance is created when a form is posted, but it is also possible to define an old post when loading a form to be able to re-edit data. This is also the class representing existing data when loading form data for a form.

DataTypes class

The DataTypes class contains information on all the data types available for form fields. These are contained in a public property, Types, which is basically a hash table. The hash table simply contains keys and values, where keys are the unique key for the data type and the value is a regular expression.

When posting form data, all input will be validated against the regular expression for the data type of the input control. If no data type has been specified for the control, the data will be validated against the public string property InvalidDefaultInputRegex. The reason for having a default validation is to prevent malicious data being posted from a form.

EPiServer.XForms.WebControls namespace

XFormControl class

This is probably the most important class when working with XForms. XFormControl is a web control that is used to display an XForms form and makes sure that the input is validated. The class exposes a public method, SubmitForm, to be able to submit form data. The form itself does not trigger the actual posting. This is handled by any existing submit web controls in the form, which is also why it is possible to have several buttons on the same form that may trigger different actions. Of course, it is also possible to call this method from the code.

What happens when the form is loaded?

1. The BeforeLoadingForm event is triggered. It is possible to alter the XForm definition here by changing the FormDefinition property of the LoadFormEventArgs that are sent to the event handler. (For instance, you could replace the table structure with a div structure by applying regular expressions to the form content).
   
   
2. The XML from the FormDefinition.Document property is parsed by Page.ParseControl. The parsed controls are added as child controls. Basically these would be Literal controls for the HTML and form web controls derived from XFormControlBase.
   
   
3. For fields that have validation, validation control(s) are added and connected to the corresponding web control.
   
   
4. ControlsCreated is a triggered public event. It is possible to alter the appearence and function of the form at this time.
   
   
5. Rendering of the form takes place. All Xform controls are rendered as XHTML.

What happens when data is submitted?

1. The SubmitForm event for a submit control is triggered. If defined on the submit control, the submit will set values for e-mail and/or custom URL to the forms data property for the XFormControl that it is contained in. The SubmitForm method is called with the channel options set on the submit control. See section Sending Form Data below for more information on available channels.
   
   
2. Validation will take place to ensure that rules about anonymous users and multiple postings from the same user are followed. If there are validation errors against these rules, StaticValidators will be added to the Page.Validators collection to ensure that validation errors will be thrown. A StaticValidator is a validator that will always give a validation error.
   
   
3. BeforeReadingPostedData is a triggered public event and Page.Validate() is called for the current validation group. If the CancelSubmit property is set to true, a StaticValidator is added for all strings in the ErrorMessages array. Any validation errors to the XForm controls will also result in validation errors and the form posting is cancelled with a list of validation errors.
   
   
4. BeforeSubmitPostedData is a triggered public event and any event handlers that sets CancelSubmit to true will cancel the form posting.
   
   
5. The form data is sent to the specified channel. If the user is anonymous, a cookie will be set to indicate that the form has been posted.
   
   
6. AfterSubmitPostedData is a triggered public event.

XForms web controls

public class XFormPageController : PageController<XFormPage>
{
    private XFormPageUnknownActionHandler _xformHandler;

    public XFormPageController(XFormPageUnknownActionHandler xformHandler)
    {
        _xformHandler = xformHandler;
    }

    public ActionResult Index(PageData currentPage)
    {
        return View(currentPage);
    }

    #region Success and failed actions

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Success(PageData currentPage, XFormPostedData xFormPostedData)
    {
        return View("Success", currentPage);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Failed(PageData currentPage, XFormPostedData xFormPostedData)
    {
        return View("Failed", currentPage);
    }

    #endregion

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult DoSubmit(XFormPostedData xFormpostedData)
    {
        return _xformHandler.HandleAction(this);
    }
}