Syncfusion AI Assistant

How can I help you?

Modify PDF Form Field Properties in Vue

4 Feb 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>

View Sample on GitHub

See also