How to enable field indicators and how to modify them

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)
I want to add field indicator in my add text field and i can show you my code so just help me how i can get an indicator in my pdf after applying fields like signature , text , date . Basically i am facing issue with my text field like there is not indicator in my text field it is plain no identification like you have to write the text here okay so i share video demo plus code please help me

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
this is my function of apply fields
const applyFields = async () => {
const { Annotations, documentViewer } = instance.Core;
const annotationManager = documentViewer.getAnnotationManager();
const fieldManager = annotationManager.getFieldManager();
const annotationsList = annotationManager.getAnnotationsList();
const annotsToDelete = ;
const annotsToDraw = ;

await Promise.all(
  annotationsList.map(async (annot, index) => {
    let inputAnnot;
    let field;

    if (typeof annot.custom !== "undefined") {
      // create a form field based on the type of annotation
      if (annot.custom.type === "TEXT") {
        field = new Annotations.Forms.Field(
          annot.getContents() + Date.now() + index,
          {
            type: "Tx",
            value: annot.custom.value,
          }
        );
        inputAnnot = new Annotations.TextWidgetAnnotation(field);
      } else if (annot.custom.type === "SIGNATURE") {
        field = new Annotations.Forms.Field(
          annot.getContents() + Date.now() + index,
          {
            type: "Sig",
            value: annot.custom.value,
          }
        );
        inputAnnot = new Annotations.SignatureWidgetAnnotation(field, {
          appearance: "_DEFAULT",
          appearances: {
            _DEFAULT: {
              Normal: {
                data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC",
                offset: {
                  x: 100,
                  y: 100,
                },
              },
            },
          },
        });
      } else if (annot.custom.type === "DATE") {
        field = new Annotations.Forms.Field(
          annot.getContents() + Date.now() + index,
          {
            type: "Tx",
            value: "mm-dd-yyyy",
            // Actions need to be added for DatePickerWidgetAnnotation to recognize this field.
            actions: {
              F: [
                {
                  name: "JavaScript",
                  // You can customize the date format here between the two double-quotation marks
                  // or leave this blank to use the default format
                  javascript: 'AFDate_FormatEx("mmm d, yyyy");',
                },
              ],
              K: [
                {
                  name: "JavaScript",
                  // You can customize the date format here between the two double-quotation marks
                  // or leave this blank to use the default format
                  javascript: 'AFDate_FormatEx("mmm d, yyyy");',
                },
              ],
            },
          }
        );

        inputAnnot = new Annotations.DatePickerWidgetAnnotation(field);
      } else {
        // exit early for other annotations
        annotationManager.deleteAnnotation(annot, false, true); // prevent duplicates when importing xfdf
        return;
      }
    } else {
      // exit early for other annotations
      return;
    }

    // set position
    inputAnnot.PageNumber = annot.getPageNumber();
    inputAnnot.X = annot.getX();
    inputAnnot.Y = annot.getY();
    inputAnnot.rotation = annot.Rotation;
    if (annot.Rotation === 0 || annot.Rotation === 180) {
      inputAnnot.Width = annot.getWidth();
      inputAnnot.Height = annot.getHeight();
    } else {
      inputAnnot.Width = annot.getHeight();
      inputAnnot.Height = annot.getWidth();
    }

    // delete original annotation
    annotsToDelete.push(annot);

    // customize styles of the form field
    Annotations.WidgetAnnotation.getCustomStyles = function (widget) {
      if (widget instanceof Annotations.SignatureWidgetAnnotation) {
        return {
          border: "1px solid #a5c7ff",
        };
      }
    };
    Annotations.WidgetAnnotation.getCustomStyles(inputAnnot);

    // draw the annotation the viewer
    annotationManager.addAnnotation(inputAnnot);
    fieldManager.addField(field);
    annotsToDraw.push(inputAnnot);
  }),
  setFieldsApplied(true)
);

// delete old annotations
annotationManager.deleteAnnotations(annotsToDelete, null, true);

// refresh viewer
await annotationManager.drawAnnotationsFromList(annotsToDraw);

};

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

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It looks like you’re trying to add form field indicators to your PDF fields, such as text, signature, and date fields, in Apryse’s WebViewer. Form field indicators are helpful for guiding users to fill out fields correctly. You can achieve this by using the setFieldIndicator API to show or hide indicators and modify their appearance.

Some things you can try:

  • Use the setFieldIndicator API to enable or disable indicators for your form fields.

  • Customize the text or appearance of the indicators using the options available in the API.

  • Ensure that your annotations are correctly added to the document before applying indicators.

  • Check that your application is correctly refreshing the annotations to reflect changes.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like

Hello Abhimanyu,

Thank you for contacting WebViewer Forums.

To enable field indicators, you can use the setFieldIndicator() API. Please see this documentation on how to programatically add field indicators to the form widgets: Adding Form Field Indicators using JavaScript | Apryse documentation

Regards,
Luke

2 Likes