Search results

Form fields in Vue DocumentEditor component

24 May 2022 / 3 minutes to read

Document Editor Container component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.

Form Fields

Insert form field

Form fields can be inserted using insertFormField method in editor module.

Copied to clipboard
//Insert Text form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('Text');
//Insert Checkbox form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('CheckBox');
//Insert Drop down form field
this.$refs.documenteditor.ej2Instances.editor.insertFormField('Dropdown');

Get form field names

All the form fields names form current document can be retrieved using getFormFieldNames().

Copied to clipboard
this.$refs.documenteditor.ej2Instances.getFormFieldNames();

Get form field properties

Form field properties can be retrieved using getFormFieldInfo().

Copied to clipboard
//Text form field
var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
//Checkbox form field
var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
//Dropdown form field
var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');

Set form field properties

Form field properties can be modified using setFormFieldInfo.

Copied to clipboard
// Set text form field properties
var textfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Text1');
textfieldInfo.defaultValue = "Hello";
textfieldInfo.format = "Uppercase";
textfieldInfo.type = "Text";
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Text1',textfieldInfo);

// Set checkbox form field properties
var checkboxfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Check1');
checkboxfieldInfo.defaultValue = true;
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Check1',checkboxfieldInfo);

// Set checkbox form field properties
var dropdownfieldInfo = this.$refs.documenteditor.ej2Instances.getFormFieldInfo('Drop1');
dropdownfieldInfo.dropDownItems = ['One','Two', 'Three']
this.$refs.documenteditor.ej2Instances.setFormFieldInfo('Drop1',dropdownfieldInfo);

Export form field data

Data of the all the Form fields in the document can be exported using exportFormData.

Copied to clipboard
var formFieldDate = this.$refs.documenteditor.ej2Instances.exportFormData();

Import form field data

Form fields can be prefilled with data using importFormData.

Copied to clipboard
var textformField = {fieldName: 'Text1', value: 'Hello World'};
var checkformField = {fieldName: 'Check1', value: true};
var dropdownformField = {fieldName: 'Drop1', value: 1};
//Import form field data
this.$refs.documenteditor.ej2Instances.importFormData([textformField,checkformField,dropdownformField]);

Reset form fields

Reset all the form fields in current document to default value using resetFormFields.

Copied to clipboard
this.$refs.documenteditor.ej2Instances.resetFormFields();

Protect the document in form filling mode

Document Editor provides support for protecting the document with FormFieldsOnly protection. In this protection, user can only fill form fields in the document.

Document editor provides an option to protect and unprotect document using enforceProtection and stopProtection API.

The following example code illustrates how to enforce and stop protection in Document editor container.

Copied to clipboard
<template>
    <div id="app">
      <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
    </div>
</template>
<script>
  import Vue from 'vue';
  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';

  Vue.use(DocumentEditorContainerPlugin);

  export default {
    data() {
      return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'};
    },
    provide: {
      //Inject require modules.
      DocumentEditorContainer: [Toolbar]
    },
    mounted(){
    //enforce protection
    this.$refs.container.ej2Instances.documentEditor.editor.enforceProtection('123','FormFieldsOnly');
    //stop the document protection
    this.$refs.container.ej2Instances.documentEditor.editor.stopProtection('123');
    }
  }
</script>

Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are NoProtection |ReadOnly |FormFieldsOnly. In stop protection method, parameter denotes the password.