Document Viewer: Pre-Select Form Fields Client-Side using JavaScript

A form can be prepared by merging known data into the document before the Document Viewer is used to deliver the form to the end user. Consider the following template, which consists of form text fields, check boxes, and drop-down boxes.

Pre-Select Known Values

There are three ways to preselect known data:

• The default values will be pre-selected and stored in the template.
• Known data is merged server-side using MailMerge ╰ TX Text Control .NET Server for ASP.NET
  ╰ DocumentServer Namespace
  ╰ MailMerge Class
  The MailMerge class is a .NET component that can be used to effortlessly merge template documents with database content in .NET projects, such as ASP.NET web applications, web services or Windows services. .
• Known data is merged client-side using JavaScript.

When merging data server-side, the template is loaded into a ServerTextControl ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ ServerTextControl Class
The ServerTextControl class implements a component that provide high-level text processing features for server-based applications. instance and MailMerge is used to populate form fields from JSON data.

But what if data is being collected somewhere else in the web application and another server callback or web API call is not the intent? Consider an Angular SPA where some of the form data is already available client side.

Access Fields with JavaScript

In this case, the Document Viewer form fields are accessible through JavaScript. The following dictionary is available on the client side and contains known values for some of the form fields in the template.

Form fields in the Document Viewer are available as regular HTML input elements. They can be accessed via JavaScript in the appropriate shadow DOM.

Web Component

Learn more about the shadow DOM and the Web Component standard.

TX Text Control DocumentViewer Becomes a Web Component

In the code above, all form fields with the class name formFieldDiv are iterated. The custom attribute formfieldtype defines the type of the form fields, which are handled in a different way in the switch case statement. Finally, all known values are added to the form fields.

These values will also be exported when you call forms.getValues():

When the document is downloaded using the downloadDocument method, the values of the form fields will be added to the PDF form fields.