# FormFillerSettings

## Content

# Type Alias: FormFillerSettings

```ts
type FormFillerSettings = object;
```

Form filler dialog settings.

## Properties

### applyAfterFailedValidation?

```ts
optional applyAfterFailedValidation: "confirm" | "reject" | "apply" | Function;
```

The type of action to execute if form validation fails after clicking Apply button.

#### Default

```ts
confirm
```

#### Examples

Reject apply changes when validation fails:
```javascript
     options.formFiller = {
           applyAfterFailedValidation: 'reject'
     }
```
 *

Execute custom function and reject changes
```javascript
     options.formFiller = {
           applyAfterFailedValidation: function() {
              alert('Validation failed, changes rejected.');
              return false;
           }
     }
```

Execute custom function and accept changes
```javascript
     options.formFiller = {
           applyAfterFailedValidation: function() {
              alert('Validation failed, but changes will be accepted.');
              return true;
           }
     }
```

***

### beforeApplyChanges()?

```ts
optional beforeApplyChanges: (formFiller) => boolean;
```

The beforeApplyChanges event handler will be called when the Apply button is clicked after success fields validation.
Return false if you want to cancel apply changes.

#### Parameters

##### formFiller

`any`

#### Returns

`boolean`

#### Example

```javascript
// Split address value into two address fields before applying changes:
var viewer = new DsPdfViewer("#root");
viewer.options.formFiller = {
   beforeApplyChanges: function(formFiller) {
       var addr1 = formFiller.getFieldByName('Addr1');
       var addr2 = formFiller.getFieldByName('Addr2');
       if(addr1 && addr2) {
           var s = addr1.fieldValue;
           var nlInd = s.indexOf('\n');
           if(nlInd !== -1) {
               var firstPart = s.substring(0, nlInd).replace(/\n+/g, ' ');
               var secondPart = s.substr(nlInd).replace(/\n+/g, ' ');
               addr1.fieldValue = firstPart;
               addr2.fieldValue = secondPart;
           } else {
               addr2.fieldValue = '';
           }
           formFiller.onFieldChanged(addr1);
           formFiller.onFieldChanged(addr2);
       }
       return true;
   },
};
```

***

### beforeFieldChange()?

```ts
optional beforeFieldChange: (field, formFiller) => boolean;
```

The beforeFieldChange event handler will be called right before the field value changed.
Return false if you want to cancel the field value change.

#### Parameters

##### field

[`WidgetAnnotation`](../classes/WidgetAnnotation)

##### formFiller

`any`

#### Returns

`boolean`

***

### layout?

```ts
optional layout: "Auto" | "OneColumn" | "TwoColumns";
```

Form Filler dialog layout type.

#### Default

```ts
The default is 'Auto' - layout will switch to 'OneColumn' for a small device screen.
```

#### Example

```javascript
     options.formFiller = {
           layout: 'OneColumn'
     }
```

***

### mappings

```ts
mappings: object;
```

Form fields mappings,
key - field name,
value - [FormFieldMapping](FormFieldMapping).

#### Index Signature

```ts
[fieldName: string]: FormFieldMapping
```

***

### onInitialize()?

```ts
optional onInitialize: (formFiller) => void;
```

The onInitialize event handler is called after the list of fields is loaded and initialized but not yet rendered.

#### Parameters

##### formFiller

`any`

#### Returns

`void`

#### Example

```javascript
options.formFiller = {
   // Combine two address fields into one after loading fields
   onInitialize: function(formFiller) {
       var addr1 = formFiller.getFieldByName('Addr1');
       var addr2 = formFiller.getFieldByName('Addr2');
       if(addr1 && addr2) {
           if(addr2.fieldValue) {
               addr1.fieldValue = addr1.fieldValue + '\n' + addr2.fieldValue;
               addr2.fieldValue = '';
               formFiller.onFieldChanged(addr1);
               formFiller.onFieldChanged(addr2);
           }
       }
   }
}
```

***

### title?

```ts
optional title: string;
```

Dialog title.

#### Default

```ts
'Form Filler'
```

#### Example

```javascript
      options.formFiller = {
            title: 'Please fill the form'
      };
```

***

### validator()?

```ts
optional validator: (fieldValue, field, args) => boolean | string;
```

The validator function which will be called for each field before saving changes
or on user input when field's mapping settings contains validateOnInput flag.
You can return a string value with message about validation error, this message will be shown in UI.
Return true or null for success result.

#### Parameters

##### fieldValue

`string` | `string`[]

##### field

[`WidgetAnnotation`](../classes/WidgetAnnotation)

##### args

###### caller

`ValidationCallerType`

#### Returns

`boolean` \| `string`