FormFillerSettings: { applyAfterFailedValidation?: "confirm" | "reject" | "apply" | Function; beforeApplyChanges?: ((formFiller: any) => boolean); beforeFieldChange?: ((field: WidgetAnnotation, formFiller: any) => boolean); layout?: "Auto" | "OneColumn" | "TwoColumns"; mappings: { [fieldName: string]: FormFieldMapping }; onInitialize?: ((formFiller: any) => void); title?: string; validator?: ((fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | string) }

Form filler dialog settings.

Type declaration

  • Optional applyAfterFailedValidation?: "confirm" | "reject" | "apply" | Function

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

    Default

    confirm

    Example

    Reject apply changes when validation fails:

         options.formFiller = {
    applyAfterFailedValidation: 'reject'
    }

    Example

    Execute custom function and reject changes

         options.formFiller = {
    applyAfterFailedValidation: function() {
    alert('Validation failed, changes rejected.');
    return false;
    }
    }

    Example

    Execute custom function and accept changes

         options.formFiller = {
    applyAfterFailedValidation: function() {
    alert('Validation failed, but changes will be accepted.');
    return true;
    }
    }
  • Optional beforeApplyChanges?: ((formFiller: any) => boolean)
      • (formFiller: any): 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.

        Example

        // 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;
        },
        };

        Parameters

        • formFiller: any

        Returns boolean

  • Optional beforeFieldChange?: ((field: WidgetAnnotation, formFiller: any) => boolean)
      • (field: WidgetAnnotation, formFiller: any): 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

        Returns boolean

  • Optional layout?: "Auto" | "OneColumn" | "TwoColumns"

    Form Filler dialog layout type.

    Default

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

    Example

         options.formFiller = {
    layout: 'OneColumn'
    }
  • mappings: { [fieldName: string]: FormFieldMapping }

    Form fields mappings, key - field name, value - FormFieldMapping.

  • Optional onInitialize?: ((formFiller: any) => void)
      • (formFiller: any): void
      • The onInitialize event handler is called after the list of fields is loaded and initialized but not yet rendered.

        Example

        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);
        }
        }
        }
        }

        Parameters

        • formFiller: any

        Returns void

  • Optional title?: string

    Dialog title.

    Default

    'Form Filler'

    Example

          options.formFiller = {
    title: 'Please fill the form'
    };
  • Optional validator?: ((fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | string)
      • (fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }): 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
        • args: { caller: ValidationCallerType }
          • caller: ValidationCallerType

        Returns boolean | string