Read-only forms

You can restrict editing to form fields by making them read-only. This is useful for protecting prefilled data, enforcing workflow permissions, or displaying information that users shouldn’t modify.

There are two approaches depending on your license:

  • Programmatic approach — Set the readOnly property on form fields (requires the Form Creator license).
  • Client-side approach — Use isEditableAnnotation to prevent editing without modifying form fields.

Programmatic approach

To make form fields read-only programmatically, set the readOnly property to true. This approach requires the Form Creator license:

// Retrieve all form fields from the document.
const formFields = await instance.getFormFields();


if (formFields.size === 0) {
  console.warn("No form fields found in document");
  return;
}


// Set the `readOnly` flag on each form field.
const updatedFormFields = formFields.map((it) => it.set("readOnly", true));


// Update the form fields.
await instance.update(updatedFormFields);
console.log(`Made ${updatedFormFields.length} field(s) read-only`);

To make only specific fields read-only instead of all fields, filter the form fields array by name or other properties before updating.

Client-side approach

If you don’t have the Form Creator license, you can’t change the behavior of actual form fields. In that case, you can apply client-side restrictions to make the form fields read-only using isEditableAnnotation:

NutrientViewer.load({
  // ... Other options.
  isEditableAnnotation: function (ann) {
    return !(ann instanceof NutrientViewer.Annotations.WidgetAnnotation);
  },
});

To apply this restriction after loading the document, use instance.setIsEditableAnnotation.