1WebViewer(...)
2.then(instance => {
3 const { annotationManager, Annotations } = instance.Core;
4 const { WidgetFlags } = Annotations;
5
6 // myBtn is your own custom button
7 document.getElementById('myBtn').addEventListener('click', () => {
8
9 // set flags for radio and no toggle to off
10 const widgetFlags = new WidgetFlags();
11 widgetFlags.set(WidgetFlags.RADIO, true);
12
13 // optional to keep at least one state active
14 widgetFlags.set(WidgetFlags.NO_TOGGLE_TO_OFF, true);
15
16 // set font type
17 const font = new Annotations.Font({ name: 'Helvetica' });
18
19 // create a form field
20 const field = new Annotations.Forms.Field("some radio field group name", {
21 type: 'Btn',
22 value: 'Off',
23 flags: flags,
24 font: font,
25 });
26
27 // create a widget annotation for the first button
28 const widgetAnnot1 = new Annotations.RadioButtonWidgetAnnotation(field, {
29 appearance: 'Off',
30 appearances: {
31 Off: {},
32 First: {},
33 },
34 });
35
36 // create a widget annotation for the second button
37 const widgetAnnot2 = new Annotations.RadioButtonWidgetAnnotation(field, {
38 appearance: 'Off',
39 appearances: {
40 Off: {},
41 Second: {},
42 },
43 });
44
45 // set position and size
46 widgetAnnot1.PageNumber = 1;
47 widgetAnnot1.X = 100;
48 widgetAnnot1.Y = 100;
49 widgetAnnot1.Width = 50;
50 widgetAnnot1.Height = 20;
51
52 // set position and size
53 widgetAnnot2.PageNumber = 1;
54 widgetAnnot2.X = 150;
55 widgetAnnot2.Y = 150;
56 widgetAnnot2.Width = 50;
57 widgetAnnot2.Height = 20;
58
59 //add the form field and widget annotation
60 annotationManager.getFieldManager().addField(field);
61 annotationManager.addAnnotation(widgetAnnot1);
62 annotationManager.addAnnotation(widgetAnnot2);
63 annotationManager.drawAnnotationsFromList([widgetAnnot1, widgetAnnot2]);
64 });
65});