How to Create formField placeholder from code instead of Toolbar UI?

I need to create formFields that can be moved and resized and then converted to fillable form fields.

The documentation suggests to create formFields placeholders.
I’m using startFormFieldCreationMode, but i want to create formFields placeholder programatically and not using PDFTron’s UI.

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hi Laxman,

FormField placeholder annotations are just Rectangle annotations that have a FormField type key.
Here is an example of creating a placeholder annotation.

  const { UI, Core } = instance;
  const { Annotations, documentViewer, annotationManager } = Core;
  const { Color } = Annotations;
  const formFieldManager = annotationManager.getFormFieldCreationManager();

  documentViewer.addEventListener('annotationsLoaded', () => {
    formFieldManager.startFormFieldCreationMode();
    const annot = new Annotations.RectangleAnnotation({
      PageNumber: 1,
      X: 100,
      Y: 50,
      Width: 500,
      Height: 500,
      StrokeColor: new Color(0, 0, 0, 1),
      FillColor: new Color(211, 211, 211, 0.5),
      FontSize: '12px',
    });
    annot.setCustomData('trn-form-field-type', 'TextFormField') // Required to be a form field placeholder
    formFieldManager.setFieldName(annot, "TextFormField 1")
    annotationManager.addAnnotation(annot)
    annotationManager.redrawAnnotation(annot);
    // formFieldManager.endFormFieldCreationMode(); // End Creation mode to apply the field as a widget
  });

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com