Form Fields in Blazor DocumentEditor Component

3 Jan 20232 minutes to read

Blazor Word Processor component (a.k.a Document Editor) component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.

Insert form field

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

//Insert Text form field
container.DocumentEditor.Editor.InsertFormFieldAsync(FormFieldType.Text);
//Insert Checkbox form field
container.DocumentEditor.Editor.InsertFormFieldAsync(FormFieldType.CheckBox);
//Insert Drop down form field
container.DocumentEditor.Editor.InsertFormFieldAsync(FormFieldType.DropDown);

Get form field names

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

Task<List<string>> formFieldsNames = container.DocumentEditor.GetFormFieldNamesAsync();

Export form field data

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

Task<List<FormFieldData>> formFieldDatas=container.DocumentEditor.ExportFormDataAsync();

Import form field data

Form fields can be pre-filled with data using ImportFormDataAsync.

FormFieldData textformField = new FormFieldData();
textformField.FieldName = "Text1";
textformField.Value = "Hello World";
FormFieldData checkformField = new FormFieldData();
checkformField.FieldName = "Check1";
checkformField.Value = true;
FormFieldData dropdownformField = new FormFieldData();
dropdownformField.FieldName = "Drop1";
dropdownformField.Value = 1;
   
List<FormFieldData> formData = new List<FormFieldData>();
formData.Add(textformField);
formData.Add(checkformField);
formData.Add(dropdownformField);
//import form field data
container.DocumentEditor.ImportFormDataAsync(formData);

Reset form fields

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

container.DocumentEditor.ResetFormFieldsAsync();

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 EnforceProtectionAsync and StopProtectionAsync API.

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

@using Syncfusion.Blazor.DocumentEditor

<button @onclick="protectDocument">Protection</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    protected void protectDocument(object args)
    {
        //enforce protection
        container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.FormFieldsOnly);
        //stop the document protection
        container.DocumentEditor.Editor.StopProtectionAsync("123");
    }
}

NOTE

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