Bug with Dynamically Created Radio Buttons in WebViewer — All Options Share the Same Value ("Yes")

w.bonazzoli · June 4, 2025, 1:14pm

WebViewer Version:

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

Hi,

I’m encountering a bug when dynamically creating radio buttons in WebViewer. I’m using the Core.Annotations.RadioButtonWidgetAnnotation to add individual radio buttons to the page. The radio buttons visually appear correctly and are grouped properly under a shared Forms.Field, but all radio buttons in the same group end up having the same value or export value (“Yes”).

As a result, when I try to set one radio button to selected/true, all radio buttons in the group become selected, instead of just one — effectively breaking the mutual exclusivity expected from radio buttons.

I’ve included a code snippet below to show how I’m generating each radio button:


addFieldWidgetOnDocument(
        page: number,
        field: FieldResponse,
        fieldPos: FieldPosition,
        index: number,
        index2: number,
    ): Core.Annotations.SignatureWidgetAnnotation | Core.Annotations.CheckButtonWidgetAnnotation | Core.Annotations.RadioButtonWidgetAnnotation | Core.Annotations.TextWidgetAnnotation | null {
        if (!field) {
            return null;
        }
        const pageHeight = this.instance!.Core.documentViewer.getPageHeight(page);
        const pageWidth = this.instance!.Core.documentViewer.getPageWidth(page);

        // mi vengono passate le posizioni in percentuale, trovo i punti in px
        const height = (fieldPos.height! / 100) * pageHeight;
        const width = (fieldPos.width! / 100) * pageWidth;
        const left = (fieldPos.left! / 100) * pageWidth;
        const top = (fieldPos.top! / 100) * pageHeight;

        const suffixField = '_' + page + '_' + index; 

      if (field.type === FieldType.RadioGroup) {
          const flags = new this.instance!.Core.Annotations.WidgetFlags();
          flags.set(this.instance!.Core.Annotations.WidgetFlags.READ_ONLY, false);
          flags.set(this.instance!.Core.Annotations.WidgetFlags.RADIO, false);
          flags.set(this.instance!.Core.Annotations.WidgetFlags.PUSH_BUTTON, false);
      
          const field = new this.instance!.Core.Annotations.Forms.Field('radioButtonField' + suffixField, {
              type: 'Btn',
              flags: flags,
          });
      
          const radioButtonWidget = new this.instance!.Core.Annotations.RadioButtonWidgetAnnotation(field, {});
          radioButtonWidget.setHeight(height);
          radioButtonWidget.setWidth(width);
          radioButtonWidget.setX(left);
          radioButtonWidget.setY(top);
          radioButtonWidget.setPageNumber(page);
          radioButtonWidget.Id = 'radioButtonField' + suffixField + '_' + index2;
      
          this.instance!.Core.annotationManager.getFieldManager().addField(field);
          return radioButtonWidget;
      }

I also tried setting radioButtonWidget.appearance = 'option' + index2, but it didn’t resolve the issue.

It seems like each radio button in the group is not being assigned a unique value or export value. Could you please advise on how to correctly assign distinct values to each radio button so that selecting one will unselect the others in the same group?

I’ve attached a screenshot to further illustrate the problem.

Thanks for your support!

Best regards,
William

system · June 4, 2025, 1:14pm

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

It seems like the issue you’re facing with dynamically created radio buttons in WebViewer is related to how radio buttons are grouped and assigned values. In a radio button group, each button should have a unique value to ensure mutual exclusivity, meaning selecting one should unselect the others.

Some things you can try:

Ensure each radio button is assigned a unique export value using the setValue() method. This value is what differentiates one button from another within the same group.

Check that the RadioButtonWidgetAnnotation objects are being correctly added to the same Forms.Field but with distinct values.

Assign a unique exportValue for each radio button when you create them. This can be done by setting the exportValue property on the RadioButtonWidgetAnnotation.

Verify that the Field creation process and the subsequent RadioButtonWidgetAnnotation creation are correctly linked by using distinct identifiers for each button.

After setting the values, ensure you refresh the appearance of the radio buttons using the refreshAppearance() method.

Here are some resources that might help you:

WebViewer Forms Guide: Detailed guide on handling forms in WebViewer, which includes creating and managing form fields.

Filling PDF Form Fields using JavaScript: Provides insight into setting and managing form field values programmatically.

Custom Annotations in WebViewer: Learn how to customize and manage annotations, including radio buttons.

Form Field Types: Overview of different form field types and their properties in WebViewer.

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

w.bonazzoli · June 4, 2025, 1:20pm

Ensure each radio button is assigned a unique export value using the setValue() method. This value is what differentiates one button from another within the same group.
TESTED, not working
Check that the RadioButtonWidgetAnnotation objects are being correctly added to the same Forms.Field but with distinct values.
Assign a unique exportValue for each radio button when you create them. This can be done by setting the exportValue property on the RadioButtonWidgetAnnotation.
Property ‘exportValue’ does not exist on type ‘RadioButtonWidgetAnnotation’
Verify that the Field creation process and the subsequent RadioButtonWidgetAnnotation creation are correctly linked by using distinct identifiers for each button.
After setting the values, ensure you refresh the appearance of the radio buttons using the refreshAppearance() method.

luke.dam · June 4, 2025, 6:19pm

Hello William,

Thank you for contacting WebViewer Forums.

Dynamically creating radio buttons this way will unify all the buttons together since the appearance options set are all the same. Although the IDs of each button are different, they will behave in unison.

To avoid this, you will need to create two separate appearance options by setting one to “First” and the other “Second”. All buttons under First will trigger but will be independent from Second. For example:

const radioButton1 = new Annotations.RadioButtonWidgetAnnotation(
  field,
  {
    appearance: 'Off',
    appearances: {
      Off: {},
      First: {},
    },
  }
);

const radioButton2 = new Annotations.RadioButtonWidgetAnnotation(
  field,
  {
    appearance: 'Off',
    appearances: {
      Off: {},
      Second: {},
    },
  }
);

It creates this effect:

Best Regards,
Luke
Web Development Support Engineer