Custom draggable annotations

Technical Support
,
1

Product: WebViewer, Annotations/Forms

Product Version: latest

Please give a brief summary of your issue:

I would like to create a custom annotation that is inserted by a button outside of the viewer.
Clicking this button should insert a text field annotation that the user can place
where it belongs inside of their contract.

I have followed the documentation and example here:
https://www.pdftron.com/documentation/web/guides/forms/create-text-field/

However, after following this example the annotation cannot be selected to resize or drag around.

Am I following the correct documentation or what do I need to use in order to accomplish this?

2

When adding a text widget the default mode is that you can enter text into it but it isn’t draggable or resizable. If you want to make it resizable/draggable you can switch into the form field edit/creation mode, either from the UI by clicking the “Forms” toolbar group header or using the following code:

const { annotationManager } = instance.Core;

const formFieldCreationManager = annotationManager.getFormFieldCreationManager();
formFieldCreationManager.startFormFieldCreationMode();

Is this what you’re looking for? There are potentially other ways of handling this using custom annotations, or temporary annotations and converting them to a form field after but this way is likely the most straightforward.

3

Hi Matt, thank you for your response!

I was able to create the draggable fields using this repo as an example: https://github.com/PDFTron/pdftron-sign-app/tree/a7ef00ada6bbdb838da6604301c77f28e5513235

4

Sounds good, that would be another way to approach it!