How can I help you?
PDF form field flags in MVC PDF Viewer
10 Feb 202618 minutes to read
The Syncfusion MVC PDF Viewer allows you to control how users interact with form fields and how those fields behave during validation and printing by applying form field flags. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
This topic explains:
- Supported form field flags
- How each constraint affects field behavior
- How to apply flags during field creation
- How to update flags on existing fields
- How flags work with validation and printing
Supported PDF Form Field Flags
The following flags are supported in the PDF Viewer:
-
isReadOnly
Prevents users from modifying the form field in the UI while still allowing updates through APIs. -
isRequired
Marks the form field as mandatory and includes it in form field validation. -
isPrint
Controls whether the form field appears when the document is printed.
Key Actions
Make Fields Read Only
Use the isReadOnly property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Example: add read-only fields once the document is loaded
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'EmployeeId',
bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
isReadOnly: true,
value: 'EMP-0001'
});
pdfviewer.formDesignerModule.addFormField('SignatureField', {
name: 'ApplicantSign',
bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
isReadOnly: true,
tooltip: 'Sign to accept the terms'
});
};
});
</script>Mark Fields as Required
Use the isRequired property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
- Enable validation using enableFormFieldsValidation
- Validate fields using validateFormFields
If required fields are empty, validation can prevent further actions.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Default for new Textbox fields
pdfviewer.textFieldSettings = { isRequired: true };
// Validation wiring
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.validateFormFields = function (args) {
if (args && args.formField && args.formField.length > 0) {
alert('Please fill all required fields. Missing: ' + args.formField[0].name);
}
};
// Add a Textbox when the document is loaded
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'Email',
bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
isRequired: true,
tooltip: 'Email is required'
});
};
});
</script>Control Print Behavior
Use the isPrint property to control whether a form field appears in the printed output of the PDF document.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Default for new signature fields
pdfviewer.signatureFieldSettings = { isPrint: false };
// Add a signature field that will not be printed
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('SignatureField', {
name: 'ApplicantSign',
bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
isPrint: false
});
// Update existing field (toggle to print)
var sign = pdfviewer.formFieldCollections.find(function (f) { return f.name === 'ApplicantSign'; });
if (sign) {
pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true });
}
};
});
</script>NOTE
Printing can be triggered programmatically using pdfviewer.print(). Form fields with isPrint: false are excluded from the printed output.
Apply PDF Form Field Flags Using the UI
Steps
- Enable Form Designer mode in the PDF Viewer.
- Select an existing form field on the PDF page.
- The Right click To open context menu - > Properties popover is displayed.
- Configure the required constraint options.
- Click “Ok” and Close the properties popover to apply the changes.
Changes are reflected immediately in the viewer.
Applying form field flags using the UI
Apply PDF Form Field Flags Programmatically
You can apply or modify form field flags in the following ways.
Apply flags When Creating Fields
Pass the flags properties in the settings object when creating form fields using addFormField().
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Add fields with flags once the document is loaded
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'EmployeeId',
bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
isReadOnly: true,
isRequired: false,
isPrint: true,
value: 'EMP-0001'
});
pdfviewer.formDesignerModule.addFormField('SignatureField', {
name: 'ApplicantSign',
bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
isReadOnly: false,
isRequired: true,
isPrint: false,
tooltip: 'Sign to accept the terms'
});
};
});
</script>Update flags on Existing Fields programmatically
Use the updateFormField() method to modify constraint values on existing form fields.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'Email',
bounds: { X: 146, Y: 260, Width: 220, Height: 24 }
});
var field = pdfviewer.formFieldCollections.find(function (f) { return f.name === 'Email'; });
if (field) {
pdfviewer.formDesignerModule.updateFormField(field, {
isReadOnly: false,
isRequired: true,
isPrint: true,
tooltip: 'Enter a valid email'
});
}
};
});
</script>Set Default Flags for New PDF Form Fields
You can configure default flag values so that form fields added using the Form Designer toolbar automatically inherit them. This helps ensure consistent behavior for all newly created fields.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Textbox fields will be editable, required, and included in print by default
pdfviewer.textFieldSettings = {
isReadOnly: false,
isRequired: true,
isPrint: true,
tooltip: 'Required field'
};
// Signature fields will be optional and hidden when printing
pdfviewer.signatureFieldSettings = {
isReadOnly: false,
isRequired: false,
isPrint: false,
tooltip: 'Sign if applicable'
};
});
</script>