I can't drag textfield created from code

WebViewer Version:

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Does the issue only happen on certain browsers?
Is your issue related to a front-end framework?
Is your issue related to annotations?

Please give a brief summary of your issue:
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

Good morning, I have a problem when I want to add a text field from the code, when I want to drag the textfield it does not let me, it disappears when I click on the form where it is supposed to leave me. I do not know if I am using the correct tool or what is the name of the normal textfield.


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,

May I have the code you’re using to create the text field? Thanks.

Wanbo

I am using the one in the documentation : PDFTron

WebViewer(…)
.then(instance => {
const { annotationManager, Annotations } = instance.Core;
const { WidgetFlags } = Annotations;

// myBtn is your own custom button
document.getElementById(‘myBtn’).addEventListener(‘click’, () => {

// set flags for multiline and required
const flags = new WidgetFlags();
flags.set('Multiline', true);
flags.set('Required', true);

// create a form field
const field = new Annotations.Forms.Field("some text field name", {
  type: 'Tx',
  defaultValue: "some placeholder default text value",
  flags,
});

// create a widget annotation
const widgetAnnot = new Annotations.TextWidgetAnnotation(field);

// set position and size
widgetAnnot.PageNumber = 1;
widgetAnnot.X = 100;
widgetAnnot.Y = 100;
widgetAnnot.Width = 50;
widgetAnnot.Height = 20;

//add the form field and widget annotation
annotationManager.getFieldManager().addField(field);
annotationManager.addAnnotation(widgetAnnot);
annotationManager.drawAnnotationsFromList([widgetAnnot]);

});
});

This is the control that does not allow me to edit it from the form mode.

Hi,

As the widget has no background color or stroke color, so when we go into form mode it is invisible, but it is still there. You can open the notes panel and see all the editable widgets. A simple fix here is adding the background color as below:

widgetAnnot.backgroundColor = new Annotations.Color(211, 211, 211, 0.5);

Thanks.

Wanbo

1 Like

Thanks Problem solved

To remove or change the border color, it would be something like this.

widgetAnnot.borderStyler = 'none'

Is this okay?
I have tried many different ways and I have not been able to

Do you mean the red border? I think it’s due to the Required flag.

1 Like