Accessing Form Inputs and Filling them with data dynamically

[Adam Zaghouani]

Hello Syncfusion Team,

As a Syncfusion user, I have just noticed that there's the possibility to create fields dynamically within the pdf document. However, I have a need that I'm not sure whether your library provides or not.

The use case:

• Load PDF, add fields
• save the PDF with those fields empty as placeholders
• then later once I open the PDF again, I open it while the data have already been loaded in those fields.
  
  => Basically, insert the data dynamically, in a way access the inputs and fill them with data programmatically.

Is that possible on your part?

[Vasugi Sivajothi]

Hi Adam,

You can add the form fields and save the document using the download option. And you can add the values to a form field using the updateFormFieldsValue() method. Please refer to the below code snippet and sample.

Code Snippet:

 

var formField = viewer.retrieveFormFields();

formField[0].value = "Name";

viewer.updateFormFieldsValue(formField[0]);

Sample: https://stackblitz.com/edit/angular-gmcabk-rucri5?file=app.component.ts

To Update the signatures from code behind: 

Draw:

 

var formField = viewer.retrieveFormFields();

formField[8]. signatureType = “Draw”;

formField[8].value = ""; // Provide the path value.

viewer.updateFormFieldsValue(formField[8]);

 

Type:

 

var formField = viewer.retrieveFormFields();

formField[8].signatureType = “Type”;            

formField[8].value = "name"; // Provide the name

formField[8].fontName = "Symbol";

viewer.updateFormFieldsValue(formField[8]);

 

Image:

 

var formField = viewer.retrieveFormFields();

formField[8].signatureType= “Image”;           

formField[8].value = ""; // Provide the base64 string

viewer.updateFormFieldsValue(formField[8]);

 

 

 

Please refer to the below UG.

https://ej2.syncfusion.com/angular/documentation/pdfviewer/download/

https://ej2.syncfusion.com/angular/documentation/pdfviewer/form-designer/create-fillable-PDF-forms/create-programmatically/#editupdate-form-field-programmatically

Kindly try this and let us know if this helps you.

Regards,

Vasugi.

[Adam Zaghouani]

Yes, thank you, the solution was convenient enough.

However, I was wondering, is there a way to change the "Name" field in "Textbox Properties" while editing it to

a dropdown with limited options?

In other words, I want to control / Prevent the user from typing inputs' name themselves and assign it to said inputs programmatically because they will be a predefined list; (example: input for "Name", "Lastname", "Age" etc... ) 

If you think there's a better way to treat this use case rather than replace the "Name input" itself, then I'd love to hear it. Or Is it possible to add a validator to the "input name"?

[Vasugi Sivajothi]

Hi Adam,

You can disable the form field properties panel using the formFieldDoubleClick event. And you can add the name programmatically to the form field using the updateFormfield method. You can also track the status of the form field changes using the formFieldPropertiesChange event. Please refer to the below code snippet and sample.

Code Snippet:

 

  <ejs-pdfviewer

      id="pdfViewer"

      [serviceUrl]="service"

      [documentPath]="document"

      (formFieldPropertiesChange)="formFieldPropertiesChange($event)"

      (formFieldDoubleClick)="formFieldDoubleClick($event)"

      style="height:640px;display:block"

    ></ejs-pdfviewer>

 

  public formFieldPropertiesChange(e: FormFieldPropertiesChangeArgs): void {

    console.log(e);

  }

  public formFieldDoubleClick(e: FormFieldDoubleClickArgs): void {

    e.cancel = true;

  }

 

Sample: https://stackblitz.com/edit/angular-gmcabk-gnxnbl?file=app.component.ts

Kindly try this and let us know if this suits your requirement. If not, please share more details about your requirement.

Regards,

Vasugi.

[Adam Zaghouani]

Hello Syncfusion Team,

Then that means it's impossible to replace the "name" input with a "dropdown" 

as displayed in the screenshot? 

I really would like to keep everything else but that. 

Isn't there a way to inherit and override the same pop-up on double click,

and replace the "name's input" with a dropdown?

[Vasugi Sivajothi]

Hi Adam,

Sorry for the inconvenience. Currently, there is no support to customize the form field property panel in the PDF Viewer. Please let us know if you need any further assistance.

Regards,

Vasugi.

[Adam Zaghouani]

Then supposedly, I caught an event "On Form Field Creation", and I sat values manually.
How do I update its values with the new ones?

I've used both update methods for files but didn't work.

The tooltip isn't showing after closing the "FormFieldToolbar" and the name/placeholder isn't showing instead of "textbox 3"

What am I doing wrong? With "e" is "FormFieldsAddArgs" as

1. I wanted to update each field after it was added by drag and drop with values programmatically
2. I want to be able to reposition a field IF I created it programmatically

Also, why when I create an input programmatically, I'm not allowed to reposition it with the mouse?

this.pdfViewer.updateFormFields(e.field);

this.pdfViewer.updateFormFieldsValue(e.field);

[Vasugi Sivajothi]

Hi Adam,

You can add the properties and values after adding the form field using the form field Collections. And you can reposition the form field by enabling form designer mode. Please refer to the below code snippet and sample.

Code Snippet:

 

  public formFieldAdd(e: FormFieldAddArgs): void {

    var pdfviewer = (<any>document.getElementById('pdfViewer'))

      .ej2_instances[0];

    console.log(e);

    pdfviewer.formDesignerModule.updateFormField(

      pdfviewer.formFieldCollections[0],

      { name: 'FieldName', tooltip: 'Text', value: 'value' }

    );

  }

Sample: https://stackblitz.com/edit/angular-ecqrlo?file=app.component.ts

We have shared the video for your reference, which can be downloaded from the below link.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-739543450

Documentation: https://ej2.syncfusion.com/angular/documentation/pdfviewer/form-designer/create-fillable-PDF-forms/create-programmatically/#add-a-form-field-to-pdf-document-programmatically

Kindly try this and let us know if this helps you.

Regards,

Vasugi.

[Adam Zaghouani]

Hello Vasugi,

Yeah, that was very helpful thank you!
Probably the last couple of questions though;

Q1:

Is it possible to disable/hide certain
"FormFields" inputs from the toolbar after a condition,
or even better remove some and leave only "SignatureField" in the FormFieldToolbar? And this is applied after dragging a certain number of inputs for example or any other condition which will make the element get disabled or hidden?

Q2: To remove one element from the main toolbar like "comment" for example,

do I have to create the toolbar settings items including all other items except "comment"?

Q3: Why is that it when I try to print a document modified by the PDF viewer after signing on the SignFormField, the sign don't appear in the overview of the Print popup?

[GodlinLijo SobiDhas]

Hi Adam,

Thank you for letting us know that the solution provided helped you.

Q1: Is it possible to disable/hide certain "FormFields" inputs from the toolbar after a condition, or even better remove some and leave only "SignatureField" in the FormFieldToolbar? And this is applied after dragging a certain number of inputs for example or any other condition which will make the element get disabled or hidden?	Yes, it is possible to customize the toolbar items. The below code and example shows how to achieve this. The output of the code and the sample is also attached for your reference.
Q2: To remove one element from the main toolbar like "comment" for example, do I have to create the toolbar settings items including all other items except "comment"?	Yes, you have to exclude ‘Comment’ from the toolbarSettings and include all other items. The below code and example shows how to achieve this. The output of the code and the sample is also attached for your reference.
Q3: Why is that it when I try to print a document modified by the PDF viewer after signing on the SignFormField, the sign don't appear in the overview of the Print popup?	This issue is already resolved in the latest version 20.2.0.36. We recommend to upgrade your version to the latest one.

Code Snippet:

App.component.ts

<ejs-pdfviewer id="pdfViewer" [toolbarSettings]="toolbarSettings" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>

 

export class AppComponent implements OnInit {

    public service = 'https://localhost:44347/pdfviewer';

    public document = 'PDF_Succinctly.pdf';

    public toolbarSettings = {

      showTooltip: true,

      toolbarItems: [

        'OpenOption',

        'PageNavigationTool',

        'MagnificationTool',

        'PanTool',

        'SelectionTool',

        'SearchOption',

        'PrintOption',

        'DownloadOption',

        'UndoRedoTool',

        'AnnotationEditTool',

        'FormDesignerEditTool',

        'SubmitForm',

      ],

      formDesignerToolbarItems: [

        'DrawSignatureTool',

      ],

    };

    ngOnInit(): void {

    }

}

 

Kindly try this and let us know if you have any concerns.

Regards,

Godlin Lijo S

Attachment: AngularSample_72d10bb9.zip

[Adam Zaghouani]

Hello,

Thank you for your help profoundly!

[ArunKumar Chandrakesan]

Hi Adam,

We are glad that your queries are clarified.

Regards,

Arun kumar