Text box field label in form view

[tamir.we]

Hi
I would like to add a label on text box field or signature field that describe the meaning of the field

[system]

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

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

Guides:

• Create signature field and signature widget annotation using JavaScript
• Create list box field and list widget annotation using JavaScript
• Create radio field and radio widget annotation using JavaScript
• Creating a signature field in a PDF using JavaScript

APIs:

• Core. Tools - TEXT_FORM_FIELD
• Core.Tools. SignatureCreateTool - addSignature()
• UI. Fonts - addSignatureFont(font)

Forums:

• ReactJS: How to add annotation on Page thumbnail
• Validating Signature Field on Web
• How to create HTML Annotation and exactly what is the use of it?

[cmendoza]

Hi tamir.we

WebViewer doesn’t support labels for text form field widgets and signature widgets “out of the box” but there are some workarounds for this that you might be able to use:

• For signature widgets, you can create a custom createSignHereElement

• For text box fields, you can set a custom create inner element handler and append a label to the TextWidgetAnnotation like so:

Annotations.setCustomCreateInnerElementHandler(Annotations.TextWidgetAnnotation, function(annotationManager, { annotation, originalCreateInnerElement }) {
    const field = this;
    const el = originalCreateInnerElement();
  
    const label = document.createElement('label');
    const text = document.createTextNode(annotation.fieldName);
    label.appendChild(text);

    // Wrapper div
    const wrapper = document.createElement('div');
    wrapper.appendChild(el);
    wrapper.appendChild(label);

    return wrapper;
  });

(Note: using this would mean the styling used for TextWidgetAnnotations may not work correctly so you might also need to add custom CSS to make the text fields appear how you want them.)

As an alternative, you could also set tooltipName for your form fields to add a description when hovering the fields.

Best Regards,

Carlo Mendoza
Software Developer
PDFTron Systems, Inc.
www.pdftron.com