Widget Annotation

A widget annotation represents the visual appearance of a form field in an interactive PDF form. It is used to handle user interaction.

Use the WidgetAnnotation class to control the visual and interactive properties of form fields.

Note: The examples on this page use helper functions from the Snippet Helpers module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

const doc = new PdfDocument();
const page = doc.newPage();

const ctx = page.context;
const tf = new Format({
    font: Font.getPdfFont(StandardPdfFont.Helvetica),
    fontSize: 11
});
const ip = { x: 72, y: 72 };
const fldOffset = 72 * 2;
const fldHeight = tf.fontSize * 1.2;

// Text field:
ctx.drawText("Text field:", tf, ip.x, ip.y);
const fldText = new TextField();
fldText.Value = "Initial TextField value";

// Get the WidgetAnnotation to specify view properties of the text field.
const widgetAnnotation = fldText.widget;
widgetAnnotation.page = page;
widgetAnnotation.rect = { x: ip.x + fldOffset, y: ip.y, width: 72 * 3, height: fldHeight };
widgetAnnotation.border.color = "Silver";
widgetAnnotation.backColor = "LightSkyBlue";
doc.acroForm.fields.add(fldText);

const docData = doc.savePdf();
Util.saveFile("WidgetAnnotation.pdf", docData);