The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create an Interactive E-Form

This tutorial describes how to create a form that is fillable in Print Preview.

eForm-report-result

Tip

To get started with this tutorial, open an existing reporting application or create a new application (the Add a Report to Your .NET Application section explains how to create a reporting application on different platforms).

Add Form Fields

Add the XRLabel report controls to the report and arrange them according to the form's template. Set the labels' Text property to the form's field names.

EForm-Add-Form-Fields

Add Fillable Cells

Use the XRCharacterComb control for the form's text fields. This control displays letters in individual cells and allows end users to fill these cells in Print Preview.

  1. Drop the XRCharacterComb item from the Toolbox onto the report.

    eForm-report-add-character-comb

  2. Select all the added controls and set their properties in the Properties window:

    eForm-report-character-combs-cell-settings

  3. Set the controls' XRLabel.EditOptions | EditOptions.Enabled property to True to enable content editing in Print Preview.

    eForm-report-character-combs-edit-options-enabled

  4. Choose editors for the CharacterComb controls' edit mode.

    • Controls that allow end users to enter letters
      Invoke a drop-down list for the TextEditOptions.EditorName property and select the Only Uppercase Letters item in the Letters category.

      eForm-report-character-combs-editor-name-letters

    • Controls that allow end users to enter integers
      Invoke a drop-down list for the TextEditOptions.EditorName property and select the Positive Integer item in the Numeric category.

    eForm-report-character-combs-editor-name-integer-positive

Add Check Box Editors

Add Check Box controls for the Male/Female fields.

eForm-report-add-check-boxes

Use the following properties to set up these controls:

  • Set the Text property.

  • Set appearance properties.

  • Set the EditOptions | Enabled property to True to allow end users to switch check box states in Print Preview.

  • Set the EditOptions | GroupID property to the same value to combine these two check boxes into a logical group. This allows end users to select only one option at a time.

    eForm-report-check-boxes-edit-options

Add the Signature Editor

Add the XRPictureBox report control for the form's Signature field.

EForm-add-signature-picture-box

Do the following to enable drawing in Print Preview:

  1. Set the control's EditOptions | Enabled property to True.

  2. Set the EditOptions | EditorName property to Signature.

    EForm-Signature-content-editing

Add an Image Collection Editor

Add the XRPictureBox report control for the form's Nationality field.

EForm-add-nationality-picture-box

Do the following to enable image selection in Print Preview:

  1. Set the control's EditOptions | Enabled property to True to enable image loading in Print Preview.

    EForm-add-nationality-picture-box

  2. Register an editor with an embedded image collection to allow end users to select an image (a national flag in this example). The following code demonstrates how to do this:

    WinForms Applications

    using System.Collections.Generic;
    using System.Drawing;
    using System.IO;
    using DevExpress.XtraPrinting.Preview;
    //...
    
    Dictionary<string, Image> images = new Dictionary<string, Image>();
    foreach (var file in Directory.GetFiles("../../Flags/", "*.png")) {
        Image img = Image.FromFile(file);
        if (img != null) {
            images.Add(img);
        }
    }
    EditingFieldExtensionsWin.Instance.RegisterImageCollectionEditor("Nationality", "Nationality", images, true);
    

    WPF Applications

    using System.Collections.Generic;
    using System.Drawing;
    using System.IO;
    using DevExpress.Xpf.Printing;
    //...
    
    Dictionary<string, Image> images = new Dictionary<string, Image>();
    foreach (var file in Directory.GetFiles("../../Flags/", "*.png")) {
        Image img = Image.FromFile(file);
        if (img != null) {
            images.Add(img);
        }
    }
    EditingFieldExtensions.Instance.RegisterImageCollectionEditorInfo("Nationality", images, true, "Nationality");
    

    Web Applications

    function RegisterNationalityEditor(s, e) {
        DevExpress.Report.EditingFieldExtensions.registerImageEditor({
            name: "Nationality",
            displayName: "Nationality",
            sizeOptionsEnabled: false,
            searchEnabled: true,
            drawingEnabled: false,
            images: [
                { url: "../../Flags/Australia.png", text: "Australia" },
                { url: "../../Flags/China.png", text: "China" },
                { url: "../../Flags/France.png", text: "France" }
            ]
        });
    }
    
  3. Set the Picture Box' EditOptions | EditorName property to the registered editor's name.

    using DevExpress.XtraReports.UI;
    //...
    XtraReport1 report = new XtraReport1();
    XRPictureBox pictureBox = report.Bands["ReportHeader"].FindControl("xrPictureBox1", true) as XRPictureBox;
    pictureBox.EditOptions.EditorName = "Nationality";
    

Get the Result

Switch to the Preview tab to see the result.

eForm-report-result

Click the highlight-fields-icon-bars button on the Print Preview toolbar to highlight all the editable fields on the form.

eForm-report-result

Click a field to invoke its editor.

eForm-report-result

Use TAB and SHIFT+TAB to navigate between editable fields.

See Also