Form Fields in Blazor DocumentEditor Component

13 Aug 20254 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();

Form Field Shading

You can customize form field shading at the application level using the formFieldSettings property.

The example code below demonstrates how to set a custom shading color and how to disable shading (by default, shading is enabled).

// Set a custom shading color (for example, white) 
@page "/"
@using Syncfusion.Blazor.DocumentEditor
@inject IJSRuntime JS
<SfDocumentEditorContainer @ref="container" EnableToolbar="true" DocumentEditorSettings="Settings" Height="590px">
</SfDocumentEditorContainer>

@code {
    private SfDocumentEditorContainer container;
    private DocumentEditorSettingsModel Settings = new DocumentEditorSettingsModel()
    {
        FormFieldSettings = new FormFieldSettingsModel() { ShadingColor = "#ffffff" }
    };
}

// Disable form field shading entirely 
@page "/"
@using Syncfusion.Blazor.DocumentEditor
@inject IJSRuntime JS
<SfDocumentEditorContainer @ref="container" EnableToolbar="true" DocumentEditorSettings="Settings" Height="590px">
</SfDocumentEditorContainer>

@code {
    private SfDocumentEditorContainer container;
    private DocumentEditorSettingsModel Settings = new DocumentEditorSettingsModel()
    {
        FormFieldSettings = new FormFieldSettingsModel() { ApplyShading = false }
    };
}

NOTE

This customization only affects the application UI and will not be preserved when exporting the document.

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.