Modify Form Fields in JavaScript (ES6) PDF Viewer

21 Oct 202612 minutes to read

Form fields can be modified using the UI or API.

Modify Form Fields in JavaScript (ES6) PDF Viewer using the UI

Right-click a field → Properties to update settings.
Drag to move; use handles to resize.
Use the toolbar to toggle field mode or add new fields.

Modify Form Fields in JavaScript (ES6) PDF Viewer programmatically

Use updateFormField() to change behavior/data (including position and size):

<button id="modifyTextbox">Apply Textbox Changes</button>

(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is First Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // Update textbox field styling and value
    pdfviewer.formDesignerModule.updateFormField(field, {
      value: 'John',
      fontFamily: 'Courier',
      fontSize: 12,
      fontStyle: FontStyle.None,
      color: 'black',
      backgroundColor: 'white',
      borderColor: 'black',
      thickness: 2,
      alignment: 'Left',
      maxLength: 50
    } as TextFieldSettings);
  }
});

Modify Form Fields in JavaScript (ES6) PDF Viewer by field type

Textbox

UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
API: updateFormField() for value, typography, alignment, colors, borders.

<button id="modifyTextbox">Apply Textbox Changes</button>

(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is First Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // Update textbox field styling and value
    pdfviewer.formDesignerModule.updateFormField(field, {
      value: 'John',
      fontFamily: 'Courier',
      fontSize: 12,
      fontStyle: FontStyle.None,
      color: 'black',
      backgroundColor: 'white',
      borderColor: 'black',
      thickness: 2,
      alignment: 'Left',
      maxLength: 50
    } as TextFieldSettings);
  }
});

Password

UI: Tooltip, required, max length, font, appearance.

API: updateFormField() for tooltip, validation flags, typography, colors, alignment, borders.

 <button id="modifyPasswordBox">Edit PasswordBox</button>

(document.getElementById('modifyPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the password field by name (Here field name is Password)
const field = fields.find((f: any) => f.name === 'Password');
if (field) {
  // Update password field properties
  pdfviewer.formDesignerModule.updateFormField(field, {
    tooltip: 'Enter your password',
    isReadOnly: false,
    isRequired: true,
    isPrint: true,
    fontFamily: 'Courier',
    fontSize: 10,
    color: 'black',
    borderColor: 'black',
    backgroundColor: 'white',
    alignment: 'Left',
    maxLength: 20,
    thickness: 1
  } as PasswordFieldSettings);
}
});

CheckBox

UI: Toggle checked state.

API: updateFormField() for isChecked, tooltip, colors, borders.

<button id="modifyCheckbox">Modify CheckBox</button>

(document.getElementById('modifyCheckbox') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the checkbox field by name (Here field name is Subscribe)
const cb = fields.find((f: any) => f.name === 'Subscribe');
if (cb) {
  // Update checkbox field properties and state
  pdfviewer.formDesignerModule.updateFormField(cb, {
    isChecked: true,
    backgroundColor: 'white',
    borderColor: 'black',
    thickness: 2,
    tooltip: 'Subscribe to newsletter'
  } as CheckBoxFieldSettings);
}
});

RadioButton

UI: Set selected item in a group (same Name).

API: updateFormField() to set selected value and border appearance.

<button id="editRadio">Modify RadioButton</button>

(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Filter the radio button group by name (Here group name is Gender)
const genderRadios = fields.filter((f: any) => f.name === 'Gender');
if (genderRadios[1]) {
  // Update radio button selection and appearance
  pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings);
  pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings);
}
});

ListBox

UI: Add/remove items, set selection, adjust fonts/colors.
API: updateFormField() for items, selection, borders.
```
<button id="editListBox">Edit ListBox</button>
```
```ts
(document.getElementById(‘editListBox’) as HTMLButtonElement)?.addEventListener(
‘click’,
() => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the listbox field by name (Here field name is States)
const lb = fields.find((f: any) => f.name === ‘States’);
if (lb) {
// Update listbox options, selection, and appearance
let option = [
{ itemName: ‘Alabama’, itemValue: ‘AL’ },
{ itemName: ‘Alaska’, itemValue: ‘AK’ },
{ itemName: ‘Arizona’, itemValue: ‘AZ’ },
];
pdfviewer.formDesignerModule.updateFormField(lb, {
fontFamily: ‘Courier’,
fontSize: 5,
color: ‘black’,
backgroundColor: ‘white’,
tooltip: ‘listbox’,
options: option,
} as ListBoxFieldSettings);
}
});


### DropDown
- UI: Add/remove items, default value, appearance.
![DropDown edited from UI](../../images/ui-dropdown-edit.png)
- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
```html
<button id="editDropDown">Edit DropDown</button>

(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the dropdown field by name (Here field name is Country)
  const dd = fields.find((f: any) => f.name === 'Country');
  if (dd) {
    // Update dropdown items, value, and appearance
    pdfviewer.formDesignerModule.updateFormField(dd, {
      options: [
        { itemName: 'USA', itemValue: 'US' },
        { itemName: 'Canada', itemValue: 'CA' },
        { itemName: 'Mexico', itemValue: 'MX' }
      ],
      value: 'US',
      fontFamily: 'Courier',
      fontSize: 10,
      color: 'black',
      borderColor: 'black',
      backgroundColor: 'white'
    } as DropdownFieldSettings);
  }
});

Signature Field

UI: Tooltip, thickness, indicator text, required/visibility.

API: updateFormField() for tooltip, required, colors, borders.

<button id="editSignature">Edit Signature</button>

(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the signature field by name (Here field name is Sign)
const sig = fields.find((f: any) => f.name === 'Sign');
if (sig) {
  // Update signature field properties
  pdfviewer.formDesignerModule.updateFormField(sig, {
    tooltip: 'Please sign here',
    thickness: 3,
    isRequired: true,
    isPrint: true,
    backgroundColor: 'white',
    borderColor: 'black'
  } as SignatureFieldSettings);
}
});

Initial Field

UI: Tooltip, indicator text, thickness, required/visibility.

API: updateFormField() for tooltip, required, colors, borders.

<button id="editInitial">Edit Initial</button>

(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the initial field by name (Here field name is Initial)
const init = fields.find((f: any) => f.name === 'Initial');
if (init) {
  // Update initial field properties
  pdfviewer.formDesignerModule.updateFormField(init, {
    tooltip: 'Add your initials',
    thickness: 2,
    isRequired: true,
    isPrint: true,
    backgroundColor: 'white',
    borderColor: 'black'
  } as InitialFieldSettings);
}
});

DateTime Picker

Select a DateTime Picker field in Form Designer to review or change its settings. The toolbar includes the DateTime Picker tool, and the page displays date and time fields.

DateTime Picker tool and date and time fields in Form Designer