Home : WebDocumentViewer PDF Fillable Forms JavaScript API
Q10405 - INFO: WebDocumentViewer PDF Fillable Forms JavaScript API

WebDocumentViewer and Fillable PDF Forms support

... the undocumented document

DotImage 10.5 introduced support for PDF Fillable forms. Support is enabled using our PdfGeneratedDocument class which is part of our DotPdf product, and PDF forms are covered in our Developers Guide.

We also added support for PDF form filling in our WebDocumentViewer control, however, the documentation of the clientside API missed inclusion in the 10.5 release.

Here is the "missing documentation" for the clientside WebDocumentViewer JavaScript API as it relates to PDF Forms.

Please keep in mind: this is not the official documentation, and is incomplete in some areas, but it is what we have available until the official documentation is added to DotImage.

Constructor & Configuration Parameters

WebDocumentViewer(Config)

This takes a configuration object (a list) that gets used to construct the web document viewer, or web annotation viewer.

In addition to the Config options in the Developers Guide WebDocumentViewer Javascript API section, there's a configuration parameter for enabling PDF Forms:

  Configuration Parameters:
    Config.allowforms: Boolean
        Turns support for Pdf Forms on or off
        Default is false

Example Config

<script type="text/javascript" language="javascript">
    var _docUrl = '/Images/authoredForm.pdf';
    var _serverUrl = '/WebDocViewerHandler.ashx';
    var _saveUrl = '/Saves/';
        
    var _viewer = new Atalasoft.Controls.WebDocumentViewer({
        'parent': $('#_container1'), // parent container to put the viewer in
        'toolbarparent': $('#_toolbar1'), // parent container to put the viewer toolbar in
        'serverurl': _serverUrl, // server handler url to send image requests to
        'documenturl': _docUrl, // document url relative to the server handler url
        'allowannotations': true,
        'allowforms': true, // only available if you've got a license for our DotPDF assemblies.
        'savepath': _saveUrl
    });
</script>

Forms Controller Public Methods

Viewer
... at same level as .annotations ...

  .forms 
    createOnPage(map fieldObject, int pageIndex, [function callback()])
  This creates a field object on a page...
  You pass in a field object and page number (zero indexed) and an optional callback function
    deleteFromPage(int fieldIndex, int pageIndex)
      deletes a field from the page specified (deletes all from page if no specifid fieldIndex?
    getFromPage(int pageIndex)
      gets an array of all field objects on the given page
    insertForm(string sourceUrl, int sourceIndex, int destIndex, [function callback])
    moveForm(int sourceIndex, int destIndex, [function callback])
    removeForm(int targetIndex,[function callback])

Public Events

The following form-specific events are exposed (for use with _viewer.bind('eventname', handlerFunctionHere);

fieldclicked
fieldcreated
fielddoubleclicked
fieldloaded
fieldmousedown
fieldmousedownleft
fieldmousedownright
fieldmousemove
fieldmouseout
fieldmouseover
fieldmouseup
fieldmoved
fieldpinchresize
fieldrepainted
fieldresized
fieldrightclicked
fieldtouchend
fieldtouchmove
fieldtouchstart

The Field Object

  backgroundcolor:  string htmlOrCssColor
    the background color of the field
    This is a string that contains either a color name supported by the 
    CSS color specification, or a hex code (with the preceding '#' optional.)
  border: [border Object]   {
  color: string htmlOrCssColor
    This is a string that contains either a color name supported by the 
    CSS color specification, or a hex code (with the preceding '#' optional.)
  radius: [map Object] {
     horizontal: int 0
     vertical: int 0
    }
  style: string "none"
  width: int 0
      width of the border in pixels
  }
  color: string htmlOrCssColor
   This is a string that contains either a color name supported by the 
   CSS color specification, or a hex code (with the preceding '#' optional.)
  fieldname: string
   This is the name of the form field
  height: float
   This is the height (in pixels) of the field object on the page
  hidden: boolean
   Whether or not to hide the form field
  isFieldRequired: boolen
   Whether or not this field is considered "required" or not
  items: (subarray?)
   Some fields may have sub items such as dropdown boxes...
  locked: boolean false
   Whether or not to lock this field
  norotate: boolean false
   Controls whether this field can be rotated
  noview: boolean false
   Controls whether this field can be viewed?
  nozoom: boolean false
   Controls whether this field responds to zoom?
  readonly: boolean false
   Controls whether this field is readonly or is user-updatable
  required: boolean false
   seems like a copy of isFieldRequired
  text: [text Object] {
    align: string ("left" or "right" or "center")
    defaultvalue: string ""
     This is text that will be filled in by default if the actual text field is left blank
    font: [font Object] {
     bold: boolean false
     color: string htmlColor
     family: string "Helvetica"
     italic: boolean false
     oblique: boolean false
     size: int fontSizeInPoints
     strike: boolean false
     underline: boolean false
    }
    ismultiline: boolean false
   For some field types, you may want to say whether carriage returns / multiple lines are supported
    ispassword: boolean false
      If true, value will be recorded, but displayed with * placeholders for visible characters
    isrichtext: boolean false
      Whether the field in question is rich text or not (simple ASCII)
    isscrollable: boolean false
      for multiline fields, controls whether scrollbars are provided
    masked:  boolean false
      masking as in (999) 999-9999
    maximumlength: int 0
      max length of input?
    maxlength: int 0
      max length of input?
    multiline: boolean false
      may be ismultiline copy
    padstart: int 3
      padding from beginning of control?
    scrollable: boolean true
      copy of isscrollable?
    value: string ""
      If it's text: the value of the text... probably a mirror of field.text.value
  }
  type: string 
    This is a string that represents the type of PDF form field - known values: "textbox", "checkbox"
      button
   checkbox
   radio
   textbox
   signature
   choice
  width: float
    The width of this field in pixels
  x: float
    the x-position (left right) in pixels where 0==left of the page
  y: float
    the y-powition (top bottom) in pixels where 0 == top of the page

Example Field

This is an example of making a textbox field with all components defined. In theory: the only things absolutely required would be fieldname, height, width, x, y, and type

   var field = {
      backgroundcolor: "#FFFFFF",
      border: {
         color: "#000000",
         radius: {
            horizontal: 0,
            vertical: 0
         },
         style: "none",
         width: 0
      },
      color: "#000000",
      fieldname: "PageOneTextAnno",
      height: 37.9999694824219,
      hidden: false,
      isfieldrequired: false,
      items: null,
      locked: false,
      norotate: false,
      noview: false,
      nozoom: false,
      readonly: false,
      required: false,
      text: {
         align: "left",
         defaultvalue: "",
         font: {
            bold: false,
            color: "#000000",
            family: "Helvetica",
            italic: false,
            oblique: false,
            size: 16,
            strike: false,
            underline: false
         },
         ismultiline: false,
         ispassword: false,
         isrichtext: false,
         isscrollable: false,
         masked: false,
         maximumlength: 0,
         maxlength: 0,
         multiline: false,
         padstart: 3,
         scrollable: true,
         value: "user text ends up here"
      },
      type: "textbox",
      width: 213.333343505859,
      x: 125,
      y: 91.0000305175781
   };

Related Articles
No Related Articles Available.

Article Attachments
No Attachments Available.

Related External Links
No Related Links Available.
Help us improve this article...
What did you think of this article?

poor 
1
2
3
4
5
6
7
8
9
10

 excellent
Tell us why you rated the content this way. (optional)
 
Approved Comments...
No user comments available for this article.

Powered By InstantKB.NET v1.3
Copyright © 2002, 2019. InstantASP Ltd. All Rights Reserved