|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Customize form fields in the TypeScript PDF Viewer | Syncfusion |
| 4 | +description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Customize the appearance of PDF Form Fields in TypeScript PDF Viewer |
| 11 | + |
| 12 | +**Styling** customizes appearance only (font, color, alignment, border, background, indicator text). |
| 13 | + |
| 14 | +## Customize Appearance of Form Fields Using the UI |
| 15 | +Use the **Properties** panel to adjust: |
| 16 | +- Font family/size, text color, alignment |
| 17 | +- Border color/thickness |
| 18 | +- Background color |
| 19 | + |
| 20 | + |
| 21 | +## Customize appearance Form Fields Programmatically |
| 22 | +Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles: |
| 23 | +```html |
| 24 | +<button id="CustomizeTextboxStyle">Update Textbox Style</button> |
| 25 | +``` |
| 26 | +```ts |
| 27 | +// Update textbox styling on button click |
| 28 | +(document.getElementById('CustomizeTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => { |
| 29 | + // Retrieve form fields collection |
| 30 | + const fields = pdfviewer.retrieveFormFields(); |
| 31 | + // Find the textbox field by name |
| 32 | + const tb = fields.find((f: any) => f.name === 'First Name') || fields[0]; |
| 33 | + if (tb) { |
| 34 | + // Update textbox field styling |
| 35 | + pdfviewer.formDesignerModule.updateFormField(tb, { |
| 36 | + value: 'John', |
| 37 | + fontFamily: 'Courier', |
| 38 | + fontSize: 12, |
| 39 | + fontStyle: FontStyle.None, |
| 40 | + color: 'black', |
| 41 | + borderColor: 'black', |
| 42 | + backgroundColor: 'white', |
| 43 | + alignment: 'Left', |
| 44 | + thickness: 2 |
| 45 | + } as TextFieldSettings); |
| 46 | + } |
| 47 | +}); |
| 48 | +``` |
| 49 | + |
| 50 | +## Set Default Styles for New Form Fields |
| 51 | +Define defaults so fields added from the toolbar inherit styles. |
| 52 | +```ts |
| 53 | +// Apply as defaults for Textbox added from toolbar |
| 54 | +pdfviewer.textFieldSettings = { |
| 55 | + name: 'Textbox', |
| 56 | + isReadOnly: false, |
| 57 | + visibility: 'visible', |
| 58 | + isRequired: false, |
| 59 | + isPrint: true, |
| 60 | + tooltip: 'Textbox', |
| 61 | + thickness: 4, |
| 62 | + value: 'Textbox', |
| 63 | + fontFamily: 'Courier', |
| 64 | + fontSize: 10, |
| 65 | + fontStyle: 'None', |
| 66 | + color: 'black', |
| 67 | + borderColor: 'black', |
| 68 | + backgroundColor: 'White', |
| 69 | + alignment: 'Left', |
| 70 | + maxLength: 0, |
| 71 | + isMultiline: false |
| 72 | +}; |
| 73 | +``` |
| 74 | + |
| 75 | +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) |
| 76 | + |
| 77 | +## See also |
| 78 | + |
| 79 | +- [Form Designer overview](../overview) |
| 80 | +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) |
| 81 | +- [Create form fields](./create-formfields) |
| 82 | +- [Modify form fields](./modify-formfields) |
| 83 | +- [Remove form fields](./remove-formfields) |
| 84 | +- [Group form fields](../group-formfields) |
| 85 | +- [Form validation](../form-validation) |
| 86 | +- [Add custom data to form fields](../custom-data) |
| 87 | +- [Form fields API](../formfields-api) |
0 commit comments