Creating form fields and links programmatically

[Matt Parizeau]

Q:

Is it possible to add new fields and links to a document in WebViewer?

A:

Currently this isn't supported but here's a build where it should work to programmatically create fields www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_2.2.1.49365.zip

These changes will be included in future releases of WebViewer.

The example code should be used in a config file:

$('#myButton').on('click', function() {
  var pageNumber = 1;
  var annotManager = readerControl.docViewer.getAnnotationManager();
  var fieldManager = annotManager.getFieldManager();

  var field = new Annotations.Forms.Field('myfield', {
    font: new Annotations.Font({
      name: 'Courier',
      size: 12
    }),

    type: 'Tx'

  });
  var inputAnnot = new Annotations.TextWidgetAnnotation(field);
  inputAnnot.PageNumber = pageNumber;
  inputAnnot.X = 100;
  inputAnnot.Y = 100;
  inputAnnot.Width = 200;
  inputAnnot.Height = 50;

  annotManager.addAnnotation(inputAnnot);
  fieldManager.addField(field);
  annotManager.drawAnnotations(pageNumber, null, true);
});

Here is an example of a button:

var pageNumber = 1;
var annotManager = readerControl.docViewer.getAnnotationManager();
var fieldManager = annotManager.getFieldManager();

var field = new Annotations.Forms.Field('myfield', {
  font: new Annotations.Font({
    name: 'Comic Sans MS',
    size: 12
  }),

  type: 'Btn',

  flags: ['PushButton']
});
var buttonWidget = new Annotations.PushButtonWidgetAnnotation(field, {
  backgroundColor: new Annotations.Color(255, 0, 255)
});
buttonWidget.captions.Normal = 'My Button Text';
buttonWidget.PageNumber = pageNumber;
buttonWidget.X = 100;
buttonWidget.Y = 100;
buttonWidget.Width = 200;
buttonWidget.Height = 50;

annotManager.addAnnotation(buttonWidget);
fieldManager.addField(field);
annotManager.drawAnnotations(pageNumber, null, true);

Here is an example of a signature:

var signatureField = new Annotations.Forms.Field('mysignature');

var pageNumber = 1;
var x = 100;
var y = 100;

var signatureWidget = new Annotations.SignatureWidgetAnnotation(signatureField, {
  appearance: '_DEFAULT',
  appearances: {
    '_DEFAULT': {
      Normal: {
        data: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
        offset: {
          x: x,
          y: y
        }
      }
    }
  },
  page: pageNumber
});
signatureWidget.X = x;
signatureWidget.Y = y;
signatureWidget.Width = 150;
signatureWidget.Height = 50;

annotManager.addAnnotation(signatureWidget);
fieldManager.addField(signatureField);
annotManager.drawAnnotations(pageNumber, null, true);

Example of a link annotation:

var x = 100;
var y = 50;
var width = 75;
var height = 25;

var options = {
  rect: [x, y, x + width, y + height]
};

var link = new Annotations.Link(options);
link.PageNumber = 1;
// adds mouse up action
link.addAction('U', new Actions.URI({ uri: 'https://pdftron.com' }));

annotManager.addAnnotation(link);
annotManager.drawAnnotations(link.PageNumber, null, true);