Syncfusion AI Assistant

How can I help you?

Form Fields API in ASP.NET Core PDF Viewer

28 Feb 202619 minutes to read

The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The table below lists the available APIs:

API Description
updateFormFieldsValue Updates the value for one or more form fields.
updateFormFields Updates the properties of one or more form fields.
retrieveFormFields Retrieves all form fields or by specific criteria.
resetFormFields Resets the specified or all form fields to their default values.
importFormFields Imports values and states for form fields from a JSON object or file stream.
focusFormField Sets focus to a form field by name or ID.
exportFormFieldsAsObject Exports form fields as a JSON object.
exportFormFields Exports form fields as a downloadable file.
clearFormFields Clears values of specified or all form fields without removing them.
isFormFieldDocument Indicates whether the loaded document contains form fields.
isFormDesignerToolbarVisible Gets whether the Form Designer toolbar is currently visible.
formFieldCollections Gets the collection of current form fields with their properties.
enableFormFieldsValidation Enables or disables form field validation.
enableFormFields Enables or disables interaction with form fields.
enableFormDesignerToolbar Shows or hides the Form Designer toolbar.

updateFormFieldsValue

Form field values can be updated programmatically using this API.

<button id="updateFormFieldsValue">updateFormFieldsValue</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('updateFormFieldsValue');
  if (btn) {
    btn.onclick = function () {
      var fields = pdfviewer && pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields();
      var field = (fields && fields.find(function (f) { return f && f.name === 'First Name'; })) || (fields && fields[0]);
      if (field) {
        field.value = 'John Doe';
        field.tooltip = 'First';
        pdfviewer.updateFormFieldsValue(field);
      }
    };
  }
});
</script>

updateFormFields

Form field properties such as bounds, color, font, isReadOnly, required, and more can be updated using this API.

<button id="updateFormFields">updateFormFields</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('updateFormFields');
  if (btn) {
    btn.onclick = function () {
      var fields = pdfviewer && pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields();
      var field = (fields && fields.find(function (f) { return f && f.name === 'First Name'; })) || (fields && fields[0]);
      if (field) {
        pdfviewer.formDesignerModule.updateFormField(field, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          color: 'black',
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          alignment: 'Left',
          maxLength: 50
        });
      }
    };
  }
});
</script>

retrieveFormFields

All form fields and their properties can be retrieved, or results can be filtered by type or name.

<button id="retrieveFormFields">retrieveFormFields</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('retrieveFormFields');
  if (btn) {
    btn.onclick = function () {
      var fields = pdfviewer && pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields();
      console.log(fields);
    };
  }
});
</script>

resetFormFields

Specified form fields or all fields can be reset to their default values.

<button id="resetFormFields">resetFormFields</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('resetFormFields');
  if (btn) {
    btn.onclick = function () {
      pdfviewer.resetFormFields();
    };
  }
});
</script>

importFormFields

Form field data can be imported from an object or file into the current document.

<button id="importFormFields">importFormFields</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('importFormFields');
  if (btn) {
    btn.onclick = function () {
      // The file for importing should be accessible at the given path or as a file stream depending on your integration
      pdfviewer.importFormFields('File', 'Json');
    };
  }
});
</script>

focusFormField

Focus can be moved to a form field by name or ID.

<button id="focusFormField">focusFormField</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('focusFormField');
  if (btn) {
    btn.onclick = function () {
      pdfviewer.focusFormField('FirstName');
    };
  }
});
</script>

exportFormFieldsAsObject

Current form field values and states can be exported as a JSON object.

<button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('exportFormFieldsAsObject');
  if (btn) {
    var exportedData;
    btn.onclick = function () {
      pdfviewer.exportFormFieldsAsObject('Fdf').then(function (data) {
        exportedData = data; // Save or send to server
        console.log('Exported object:', exportedData);
      });
    };
  }
});
</script>

exportFormFields

Form field data can be exported to a file for download.

<button id="exportFormFields">exportFormFields</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('exportFormFields');
  if (btn) {
    btn.onclick = function () {
      pdfviewer.exportFormFields('FormData', 'Json');
    };
  }
});
</script>

clearFormFields

Values of specified or all fields can be cleared without removing the fields.

<button id="clearformfield">clearformfield</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var btn = document.getElementById('clearformfield');
  if (btn) {
    btn.onclick = function () {
      var field = pdfviewer.retrieveFormFields();
      pdfviewer.clearFormFields(field[0]);
    };
  }
});
</script>

isFormFieldDocument

Returns true if the loaded document contains form fields.

<button id="checkFormFieldDocument">checkFormFieldDocument</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var element = document.getElementById('checkFormFieldDocument');
  if (element) {
    element.onclick = function () {
      console.log(pdfviewer.isFormFieldDocument);
    };
  }
});
</script>

isFormDesignerToolbarVisible

Gets the visibility status of the Form Designer toolbar.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  if (!pdfviewer) return;
  // Open the Form Designer toolbar and read its visibility state
  pdfviewer.enableFormDesignerToolbar(true);
  console.log(pdfviewer.isFormDesignerToolbarVisible);
});
</script>

formFieldCollections

The current collection of form fields with their properties can be retrieved from the viewer instance.

<button id="formfieldcollection">formfieldcollection</button>
<button id="formfieldcollection">formfieldcollection</button>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  var element = document.getElementById('formfieldcollection');
  if (element) {
    element.onclick = function () {
      console.log(pdfviewer.formFieldCollections);
    };
  }
});
</script>

enableFormFieldsValidation

Built-in validation for required and constrained fields can be enabled or disabled.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  if (!pdfviewer) return;
  pdfviewer.enableFormFieldsValidation = true; // enable form fields validation
});
</script>

enableFormFields

User interaction with form fields can be enabled or disabled globally.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  if (!pdfviewer) return;
  pdfviewer.enableFormFields = false;  // Disable interaction with all fields
});
</script>

enableFormDesignerToolbar

The Form Designer toolbar can be shown or hidden at runtime.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var viewerElement = document.getElementById('pdfviewer');
  var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
  if (!pdfviewer) return;
  // Show or hide the Form Designer toolbar at runtime
  pdfviewer.enableFormDesignerToolbar(true); // show
  // pdfviewer.enableFormDesignerToolbar(false); // hide
});
</script>

See also