Modify Form Fields in Vue PDF Viewer

21 Oct 202624 minutes to read

You can modify form fields using the UI or API.

Modify PDF Form Field Properties using the UI

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

Modify PDF Form Field Properties programmatically

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

<template>
  <div>
    <button @click="modifyTextbox">Apply Textbox Changes</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    modifyTextbox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // 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 => f.name === 'First Name') || fields[0];
      if (field) {
        // Update textbox field styling and value
        pdfviewer.formDesignerModule.updateFormField(field, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          fontStyle: 'None',
          color: 'black',
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          alignment: 'Left',
          maxLength: 50
        });
      }
    }
  }
};
</script>

Modify PDF Form Field Properties by Field type

Textbox

  • UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
    Textbox properties panel
    Use updateFormField() for value, typography, alignment, colors, borders.
<template>
  <div>
    <button @click="modifyTextbox">Apply Textbox Changes</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    modifyTextbox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const field = fields.find(f => f.name === 'First Name') || fields[0];
      if (field) {
        pdfviewer.formDesignerModule.updateFormField(field, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          fontStyle: 'None',
          color: 'black',
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          alignment: 'Left',
          maxLength: 50
        });
      }
    }
  }
};
</script>

Password

  • UI: Tooltip, required, max length, font, appearance.
    Password edited from UI
    Use updateFormField() for tooltip, validation flags, typography, colors, alignment, borders.
<template>
  <div>
    <button @click="modifyPasswordBox">Edit PasswordBox</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    modifyPasswordBox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const field = fields.find(f => f.name === 'Password');
      if (field) {
        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
        });
      }
    }
  }
};
</script>

CheckBox

  • UI: Toggle checked state.
    CheckBox edited from UI
    Use updateFormField() for isChecked, tooltip, colors, borders.
<template>
  <div>
    <button @click="modifyCheckbox">Modify CheckBox</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    modifyCheckbox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const cb = fields.find(f => f.name === 'Subscribe');
      if (cb) {
        pdfviewer.formDesignerModule.updateFormField(cb, {
          isChecked: true,
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          tooltip: 'Subscribe to newsletter'
        });
      }
    }
  }
};
</script>

RadioButton

  • UI: Set selected item in a group (same Name).
    RadioButton edited from UI
  • API: updateFormField() to set selected value and border appearance.
<template>
  <div>
    <button @click="editRadio">Modify RadioButton</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editRadio() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const genderRadios = fields.filter(f => f.name === 'Gender');
      if (genderRadios[1]) {
        pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false });
        pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
      }
    }
  }
};
</script>

ListBox

  • UI: Add/remove items, set selection, adjust fonts/colors.
    ListBox edited from UI
  • API: updateFormField() for items, selection, borders.
<template>
  <div>
    <button @click="editListBox">Edit ListBox</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editListBox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const lb = fields.find(f => f.name === 'States');
      if (lb) {
        const 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,
        });
      }
    }
  }
};
</script>
  • UI: Add/remove items, default value, appearance.
    DropDown edited from UI
  • API: updateFormField() for items, value, borders.
<template>
  <div>
    <button @click="editDropDown">Edit DropDown</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editDropDown() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const dd = fields.find(f => f.name === 'Country');
      if (dd) {
        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'
        });
      }
    }
  }
};
</script>

Signature Field

  • UI: Tooltip, thickness, indicator text, required/visibility.
    Signature field edited from UI
  • API: updateFormField() for tooltip, required, colors, borders.
<template>
  <div>
    <button @click="editSignature">Edit Signature</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editSignature() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const sig = fields.find(f => f.name === 'Sign');
      if (sig) {
        pdfviewer.formDesignerModule.updateFormField(sig, {
          tooltip: 'Please sign here',
          thickness: 3,
          isRequired: true,
          isPrint: true,
          backgroundColor: 'white',
          borderColor: 'black'
        });
      }
    }
  }
};
</script>

Initial Field

  • UI: Tooltip, indicator text, thickness, required/visibility.
    Initial field edited from UI
  • API: updateFormField() for tooltip, required, colors, borders.
<template>
  <div>
    <button @click="editInitial">Edit Initial</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editInitial() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const fields = pdfviewer.retrieveFormFields();
      const init = fields.find(f => f.name === 'Initial');
      if (init) {
        pdfviewer.formDesignerModule.updateFormField(init, {
          tooltip: 'Add your initials',
          thickness: 2,
          isRequired: true,
          isPrint: true,
          backgroundColor: 'white',
          borderColor: 'black'
        });
      }
    }
  }
};
</script>

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

Date and time fields can also be used to enter values directly or choose a value from the picker:

  • For a date field, type a date or open the calendar picker.

    Calendar picker open for a DateTime field

  • For a time field, type a time or open the time picker.

    Time picker open for a DateTime field

Use the field’s General properties to review or edit its name, value, tooltip, visibility, read-only and required settings, and print visibility.

General properties for a DateTime Picker field

The Appearance properties include font, colors, border, and alignment.

DateTime Picker Appearance

Use the Format tab to change the field type (Date or Time), select a display format, and review the preview.

DateTime Picker format settings with type, format, and preview

View Sample on GitHub

See Also