Section:

Create checkbox field and checkbox widget annotation using JavaScript

To create a new checkbox field with required edit flags and a checkbox widget annotation.

1WebViewer(...)
2.then(instance => {
3 const { annotationManager, Annotations } = instance.Core;
4
5 // myBtn is your own custom button
6 document.getElementById('myBtn').addEventListener('click', () => {
7
8 // set flags for required and edit
9 const flags = new Annotations.WidgetFlags();
10 flags.set('Required', true);
11 flags.set('Edit', true);
12
13 // set font type
14 const font = new Annotations.Font({ name: 'Helvetica' });
15
16 // create a form field
17 const field = new Annotations.Forms.Field("some checkbox field name", {
18 type: 'Btn',
19 value: 'Off',
20 flags,
21 font: font,
22 });
23
24 // create a widget annotation
25 // caption options are:
26 // "4" = Tick
27 // "l" = Circle
28 // "8" = Cross
29 // "u" = Diamond
30 // "n" = Square
31 // "H" = Star
32 // "" = Check
33 const widgetAnnot = new Annotations.CheckButtonWidgetAnnotation(field, {
34 appearance: 'Off',
35 appearances: {
36 Off: {},
37 Yes: {},
38 },
39 captions: {
40 Normal: "" // Check
41 }
42 });
43
44 // set position and size
45 widgetAnnot.PageNumber = 1;
46 widgetAnnot.X = 100;
47 widgetAnnot.Y = 100;
48 widgetAnnot.Width = 50;
49 widgetAnnot.Height = 20;
50
51 //add the form field and widget annotation
52 annotationManager.getFieldManager().addField(field);
53 annotationManager.addAnnotation(widgetAnnot);
54 annotationManager.drawAnnotationsFromList([widgetAnnot]);
55 });
56});

Create fillable PDF forms
Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Available widget flags are:

  • ReadOnly
  • Required
  • NoExport
  • Multiline
  • Password
  • NoToggleToOff
  • Radio
  • PushButton
  • Combo
  • Edit
  • DoNotScroll
  • RadiosInUnison

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales