Skip to content

Commit 46f8eb7

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1001842: Updated Forms PDF Viewer Angular 1
1 parent 169ebac commit 46f8eb7

16 files changed

Lines changed: 4783 additions & 0 deletions

‎Document-Processing/PDF/PDF-Viewer/angular/forms/custom-data.md‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
---
2+
layout: post
3+
title: Add custom data to form fields in Angular Pdf Viewer | Syncfusion
4+
description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion Angular PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Add Custom Data to PDF Form Fields in Angular PDF Viewer
11+
12+
The **Syncfusion Angular PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
13+
14+
The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
15+
16+
This page explains how to:
17+
- [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
18+
- [Define default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
19+
- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
20+
- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
21+
- [Apply best practices when using custom data](#best-practices)
22+
23+
**Key Points**
24+
- customData is a **free form object**; you control its structure.
25+
- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
26+
- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
27+
28+
## Add Custom Data While Creating PDF Form Fields
29+
30+
You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
31+
32+
{% tabs %}
33+
{% highlight ts tabtitle="Standalone" %}
34+
import { Component, AfterViewInit, ViewChild } from '@angular/core';
35+
import {
36+
ToolbarService,
37+
MagnificationService,
38+
NavigationService,
39+
AnnotationService,
40+
TextSelectionService,
41+
TextSearchService,
42+
FormFieldsService,
43+
FormDesignerService,
44+
PdfViewerModule,
45+
} from '@syncfusion/ej2-angular-pdfviewer';
46+
47+
@Component({
48+
selector: 'app-root',
49+
standalone: true,
50+
imports: [PdfViewerModule],
51+
template: `
52+
<div class="content-wrapper">
53+
<ejs-pdfviewer
54+
#pdfViewer
55+
[resourceUrl]="resourceUrl"
56+
[documentPath]="document"
57+
style="height: 640px; display: block;">
58+
</ejs-pdfviewer>
59+
</div>
60+
`,
61+
providers: [
62+
ToolbarService,
63+
MagnificationService,
64+
NavigationService,
65+
AnnotationService,
66+
TextSelectionService,
67+
TextSearchService,
68+
FormFieldsService,
69+
FormDesignerService,
70+
],
71+
})
72+
export class AppComponent implements AfterViewInit {
73+
@ViewChild('pdfViewer') public pdfviewer: any;
74+
public document: string =
75+
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
76+
public resourceUrl: string =
77+
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
78+
79+
ngAfterViewInit(): void {
80+
this.pdfviewer.documentLoad = () => {
81+
const meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' };
82+
this.pdfviewer.formDesignerModule.addFormField('Textbox', {
83+
name: 'Email',
84+
bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
85+
customData: meta
86+
} as any);
87+
};
88+
}
89+
}
90+
{% endhighlight %}
91+
{% endtabs %}
92+
93+
## Set Default Custom Data for PDF Form Fields Added Using UI
94+
95+
When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default customData so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
96+
97+
- [textFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textfieldsettings)
98+
- [passwordFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#passwordfieldsettings)
99+
- [checkBoxFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#checkboxfieldsettings)
100+
- [radioButtonFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings)
101+
- [listBoxFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#listboxfieldsettings)
102+
- [dropDownFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#dropdownfieldsettings)
103+
- [signatureFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#signaturefieldsettings)
104+
- [initialFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#initialfieldsettings)
105+
106+
{% tabs %}
107+
{% highlight ts tabtitle="Standalone" %}
108+
import { Component, AfterViewInit, ViewChild } from '@angular/core';
109+
import {
110+
ToolbarService,
111+
MagnificationService,
112+
NavigationService,
113+
AnnotationService,
114+
TextSelectionService,
115+
TextSearchService,
116+
FormFieldsService,
117+
FormDesignerService,
118+
PdfViewerModule,
119+
} from '@syncfusion/ej2-angular-pdfviewer';
120+
121+
@Component({
122+
selector: 'app-root',
123+
standalone: true,
124+
imports: [PdfViewerModule],
125+
template: `
126+
<div class="content-wrapper">
127+
<ejs-pdfviewer
128+
#pdfViewer
129+
[resourceUrl]="resourceUrl"
130+
[documentPath]="document"
131+
style="height: 640px; display: block;">
132+
</ejs-pdfviewer>
133+
</div>
134+
`,
135+
providers: [
136+
ToolbarService,
137+
MagnificationService,
138+
NavigationService,
139+
AnnotationService,
140+
TextSelectionService,
141+
TextSearchService,
142+
FormFieldsService,
143+
FormDesignerService,
144+
],
145+
})
146+
export class AppComponent implements AfterViewInit {
147+
@ViewChild('pdfViewer') public pdfviewer: any;
148+
public document: string =
149+
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
150+
public resourceUrl: string =
151+
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
152+
153+
ngAfterViewInit(): void {
154+
// ...viewer initialization as above...
155+
// Example for texbox defaults
156+
this.pdfviewer.textFieldSettings = {
157+
name: 'Textbox',
158+
customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
159+
} as any;
160+
161+
// Example for checkbox defaults
162+
this.pdfviewer.checkBoxFieldSettings = {
163+
name: 'Checkbox',
164+
customData: { consentType: 'marketing', defaultChecked: false }
165+
} as any;
166+
}
167+
}
168+
{% endhighlight %}
169+
{% endtabs %}
170+
171+
## Update or Replace PDF Form Field Custom Data
172+
173+
You can modify the customData of an existing form field by using the [updateFormField()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID.
174+
175+
{% tabs %}
176+
{% highlight ts tabtitle="Standalone" %}
177+
import { Component, AfterViewInit, ViewChild } from '@angular/core';
178+
import {
179+
ToolbarService,
180+
MagnificationService,
181+
NavigationService,
182+
AnnotationService,
183+
TextSelectionService,
184+
TextSearchService,
185+
FormFieldsService,
186+
FormDesignerService,
187+
PdfViewerModule,
188+
} from '@syncfusion/ej2-angular-pdfviewer';
189+
190+
@Component({
191+
selector: 'app-root',
192+
standalone: true,
193+
imports: [PdfViewerModule],
194+
template: `
195+
<div class="content-wrapper">
196+
<ejs-pdfviewer
197+
#pdfViewer
198+
[resourceUrl]="resourceUrl"
199+
[documentPath]="document"
200+
style="height: 640px; display: block;">
201+
</ejs-pdfviewer>
202+
</div>
203+
`,
204+
providers: [
205+
ToolbarService,
206+
MagnificationService,
207+
NavigationService,
208+
AnnotationService,
209+
TextSelectionService,
210+
TextSearchService,
211+
FormFieldsService,
212+
FormDesignerService,
213+
],
214+
})
215+
export class AppComponent implements AfterViewInit {
216+
@ViewChild('pdfViewer') public pdfviewer: any;
217+
public document: string =
218+
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
219+
public resourceUrl: string =
220+
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
221+
222+
ngAfterViewInit(): void {
223+
// Retrieve existing fields
224+
const fields = this.pdfviewer.retrieveFormFields();
225+
const target = fields.find((f: any) => f.name === 'Email');
226+
227+
if (target) {
228+
// Merge with existing customData to avoid overwriting
229+
const merged = Object.assign({}, target.customData || {}, { updatedAt: Date.now(), verified: true });
230+
this.pdfviewer.formDesignerModule.updateFormField(target, { customData: merged } as any);
231+
}
232+
}
233+
}
234+
{% endhighlight %}
235+
{% endtabs %}
236+
237+
**Tip:**
238+
Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
239+
240+
## Read Custom Data from PDF Form Fields
241+
242+
You can access the customData property from any form field at any point in your application flow, such as:
243+
- After the document is loaded
244+
- During save or submit operations
245+
- While performing validation or conditional routing
246+
247+
{% tabs %}
248+
{% highlight ts tabtitle="Standalone" %}
249+
import { Component, AfterViewInit, ViewChild } from '@angular/core';
250+
import {
251+
ToolbarService,
252+
MagnificationService,
253+
NavigationService,
254+
AnnotationService,
255+
TextSelectionService,
256+
TextSearchService,
257+
FormFieldsService,
258+
FormDesignerService,
259+
PdfViewerModule,
260+
} from '@syncfusion/ej2-angular-pdfviewer';
261+
262+
@Component({
263+
selector: 'app-root',
264+
standalone: true,
265+
imports: [PdfViewerModule],
266+
template: `
267+
<div class="content-wrapper">
268+
<ejs-pdfviewer
269+
#pdfViewer
270+
[resourceUrl]="resourceUrl"
271+
[documentPath]="document"
272+
style="height: 640px; display: block;">
273+
</ejs-pdfviewer>
274+
</div>
275+
`,
276+
providers: [
277+
ToolbarService,
278+
MagnificationService,
279+
NavigationService,
280+
AnnotationService,
281+
TextSelectionService,
282+
TextSearchService,
283+
FormFieldsService,
284+
FormDesignerService,
285+
],
286+
})
287+
export class AppComponent implements AfterViewInit {
288+
@ViewChild('pdfViewer') public pdfviewer: any;
289+
public document: string =
290+
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
291+
public resourceUrl: string =
292+
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
293+
294+
ngAfterViewInit(): void {
295+
this.pdfviewer.documentLoad = () => {
296+
const fields = this.pdfviewer.retrieveFormFields();
297+
fields.forEach((f: any) => {
298+
console.log('Field:', f.name, 'customData:', f.customData);
299+
// Example: route based on customData
300+
if (f.customData && f.customData.requiredRole === 'admin') {
301+
// mark field for special handling
302+
}
303+
});
304+
};
305+
}
306+
}
307+
{% endhighlight %}
308+
{% endtabs %}
309+
310+
## Best Practices
311+
312+
- Treat customData as application metadata, not display data.
313+
- Use it to drive business rules, validation logic, and workflow decisions.
314+
- Keep the data minimal and structured for easy processing.
315+
- When cloning or copying form fields, ensure customData is copied or updated as required.
316+
317+
[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
318+
319+
## See Also
320+
321+
- [Form Designer overview](./overview)
322+
- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
323+
- [Create form fields](./overview-create-forms)
324+
- [Group form fields](../group-form-fields)
325+
- [Form flags](./form-constrain)
326+
- [Form validation](./form-validation)
327+
- [Form fields API](./form-fields-api)

0 commit comments

Comments
 (0)