Form Fields in Blazor DocumentEditor Component

2 Aug 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
await container.DocumentEditor.Editor.InsertFormFieldAsync(FormFieldType.Text);
//Insert Checkbox form field
await container.DocumentEditor.Editor.InsertFormFieldAsync(FormFieldType.CheckBox);
//Insert Drop down form field
await 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 = await 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 = await 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
await container.DocumentEditor.ImportFormDataAsync(formData);

Reset form fields

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

await 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 async void protectDocument(object args)
    {
        //enforce protection
        await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.FormFieldsOnly);
        //stop the document protection
        await 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.