Custom draggable annotations

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:

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?

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();

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.

Hi Matt, thank you for your response!

I was able to create the draggable fields using this repo as an example:

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