How to Create an AcroForm Designer with DevExpress Reports and PDF Viewer

As you know, interactive forms (AcroForms) are an important part of the PDF standard. AcroForms allow you and your users to create «fillable» PDF documents. Though our WinForms PDF Viewer and WPF PDF Viewer do not support interactive form generation, you can incorporate an AcroForm designer in your application with two straightforward workarounds.

Create Interactive Forms with DevExpress Reports

If you're generating documents from scratch or need to integrate AcroForms with existing reports, you can use our End User Report Designer to create interactive forms. You’ll need,

• Label – used to create text fields
• Character Comb – used to create text fields (each character is printed in an individual cell)
• Check Box – used to create check boxes and radio groups in PDF files.

To enable editing in the resulting PDF document, set the EditOptions | Enabled property to true in the designer (as shown in the image below), or enable edit mode in code when the control is added to the report:

var designForm = new XRDesignForm();
designForm.DesignMdiController.DesignPanelLoaded += (panel, args) =>
  ((XRDesignPanel)panel).ComponentAdded += (s, componentEventArgs) => {
    XRLabel label = componentEventArgs.Component as XRLabel;
    if (label != null)
      label.EditOptions.Enabled = true;
    XRCheckBox checkBox = componentEventArgs.Component as XRCheckBox;
    if (checkBox != null)
      checkBox.EditOptions.Enabled = true;
  };
designForm.OpenReport(report);
designForm.ShowDialog();

To export these fields to PDF as interactive form fields, enable Export Editing Fields to AcroForms via the designer’s UI or in code:

report.ExportToPdf(pdfFileName, 
  new PdfExportOptions { ExportEditingFieldsToAcroForms = true });

Our installation ships with an E-Form demo for WinForms, WPF, ASP and ASP NET.Core platforms. Feel free to review it for implementation details.

Create Interactive Forms with the DevExpress PDF Viewer and PDF Document API

This implementation allows you to create interactive forms for an existing PDF document (such as a scanned paper form). It uses our PDF Document API to add AcroForm fields to a PDF document displayed within our WinForms/WPF PDF Viewer. The API allows you to modify form field appearance and behavior as needed.

Follow these steps to add a text box field to a document:

1. Specify the form field’s boundaries and its position on the page using the PdfViewer.GetDocumentPosition method.

   We use MouseDown and MouseUp events to draw the text box field (based on specified coordinates). The GetDocumentPosition method converts mouse coordinates to page coordinates within the document.

   int pageNumber;
   PdfPoint c1, c2;
   
   void pdfViewer_MouseDown(object sender, MouseEventArgs e) {
     var documentPosition = pdfViewer.GetDocumentPosition(e.Location, true);
   
     // Obtain the page number where the text box should be placed.
     pageNumber = documentPosition.PageNumber;
   
     // Obtain the page coordinates.
     c1 = documentPosition.Point;
   }
   
   void pdfViewer_MouseUp(object sender, MouseEventArgs e)         {
     // Obtain the page coordinates.
     c2 = pdfViewer.GetDocumentPosition(e.Location, true).Point;
   }
   
   // Create the rectangle that specifies the text box's size and location.
   var fieldBounds = new PdfRectangle(Math.Min(c1.X, c2.X), Math.Min(c2.Y, c2.Y),
     Math.Max(с1.X, с2.X), Math.Max(с1.Y, с2.Y));
   
   

2. Create the text box field on the document page.

   var field = new PdfAcroFormTextBoxField(“FieldName”, pageNumber, fieldBounds) {
     Text = “Initial value”,
     Multiline = true,
     Type = PdfAcroFormTextFieldType.PlaneText,
     TextAlignment = PdfAcroFormStringAlignment.Far,
     Appearance = Appearance.CreateAcroFormFieldAppearance(),
     ReadOnly = false,
     Required = true,
     Print = true,
     ToolTip = “Text form field tooltip”; 
   }
   

3. Modify form field appearance.

   Create an instance of PdfAcroFormFieldAppearance and specify the field’s background and foreground colors, display its borders and configure font attributes for field text.

   public PdfAcroFormFieldAppearance CreateAcroFormFieldAppearance() {
     var acroFormFieldAppearance = new PdfAcroFormFieldAppearance();
     acroFormFieldAppearance.BackgroundColor = ToPdfColor(BackgroundColor);
     acroFormFieldAppearance.ForeColor = ToPdfColor(ForeColor);
     acroFormFieldAppearance.BorderAppearance = new PdfAcroFormBorderAppearance() {
       Color = ToPdfColor(BorderColor),
       Width = BorderWidth,
       Style = BorderStyle
     };
     Font font = Font;
     if (font == null) {
       acroFormFieldAppearance.FontFamily = null;
       acroFormFieldAppearance.FontSize = 0;
       acroFormFieldAppearance.FontStyle = PdfFontStyle.Regular;
     }
     else {
       acroFormFieldAppearance.FontFamily = font.FontFamily.Name;
       acroFormFieldAppearance.FontSize = font.SizeInPoints;
       acroFormFieldAppearance.FontStyle = (PdfFontStyle)font.Style;
     }
     return acroFormFieldAppearance;
   }
   

   Please note that each PDF color component is represented by a floating-point value within the range (0, 1). Convert GDI color to PDF color as follows:

   static PdfRGBColor ToPdfColor(Color color) {
     return color.IsEmpty ? null 
       : new PdfRGBColor(color.R / 255.0, color.G / 255.0, color.B / 255.0);
   }
   
   

You can create other form field types using the same method. Review the following documentation topic for additional information on interactive form fields.

This implementation was used in our PDF Form Creation demo. You can find demo source code in the DevExpress demo source directory (C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Office File API\...).

Web-Based PDF Viewer

Note: At present, we do not ship a web-based PDF Viewer. You can, however, create a custom PDF Viewer for ASP.NET and MVC using our PDF Document API (refer to the following example). Once you create the Viewer, you can use the same approach outlined here to add interactive form fields to your PDF documents.

Summary

If you want to create a new document, use DevExpress Reports for your interactive form.

If using an existing PDF document, use the DevExpress PDF Viewer and PDF Document API.

If you need to add combo boxes or list boxes to your interactive form, use the PDF Document API.

If you want to modify existing form field properties, remove this field from the document and create one with the desired settings using the PDF Document API.

If you still have questions, feel free to contact us in our Support Center. We’d love to hear your feedback!

Free DevExpress Products - Get Your Copy Today