1. Home
  2. Forum
  3. Angular - EJ 2
  4. Filling Formfields in DocumentEditor

Filling Formfields in DocumentEditor

Hi, 

I am just fiddling around with the trial version of your components. I managed to implement the DocumentEditor in our existing Angular application.

Customizing the toolbar was pretty straight forward and works pretty well.

What I am struggling with is the form fields and the underlying concept.

I like to have the formfields implemented in a way, that I am able to use them as a kind of template for the document. (they grey fields in the attached screenshot). To be precise, I like to have a letter-template where the address fields are at a predefined position in the document and the user has to fill in name, street, zip and city in dedicated formfields, so that we are able to access them later by name.

I am able to place the formfields, but I cannot find a way to fill them with text - If I write in the field I either delete the formfield, or I have to double click, to fill in the text in the poroperties-popup.

Isn't there a way to fill the formfields directly, inline in the document without opening a popup or overlay ?

Or is ther maybe another way to have a prepositionned area to fill in the address ?

I hope I could describe to some extent what this is about and would be happy to receive an answer.


3 Replies
SM Suriya Murugan Syncfusion Team January 28, 2022 07:37 AM UTC

Hi Thomas, 

Syncfusion Greetings! 

Document editor have importFormData method that allows you to prefill the document. 

Please check below documentation for reference: 


For your convenient, we have prepared sample in react. You can use the same in Angular platform also. 

On DocumentChange(Line number:15) event, we will "Update Form Data" based on provided data.  
   
  
1.      In above sample, we have changed the text form field data after importing document. Please check onImportFormData method.  
2.      Similary, you can modify your subject form field using importFormData method after importing document based on provided data.  
  
Can you please check the sample and let us know it statisfies your requirment?  

Regards, 
Suriya M. 
  



TH Thomas Haaf January 28, 2022 07:47 AM UTC

Thanks for your quick reply.

Unfortunately that is not what I meant. I saw that example earlier. The problem I have is, that I want to use form fields in non-protected mode. I dont want to protect the document - the user should be able to edit the rest of the document as well. In the above example I have the same problem: The moment I stop the document protection I am no longer able to fill in the formfields - and thats what I wanted.

I like to preposition some areas in the document (like address) and give the user the possibility to fill it in. The idea was to position some formfields at the address position and let the user fill in name, street and so on. Butthat seems only to work in protected mode then ?

Regards

Thomas


SM Suriya Murugan Syncfusion Team January 31, 2022 08:26 AM UTC

Hi Thomas,


As you said, form filling will work in protected mode only. Can you please check whether mail merge functionality will satisfies your requirement? Gather information and process in backend with the Syncfusion DocIO.



You can perform Mail-merge in server side by using Syncfusion.DocIO library.

 


You can insert field in document editor using insertField method in editor module.    
    
container.documentEditor.editor.insertField('MERGEFIELD '+text+' \\* MERGEFORMAT', '{{'+text+'}}');   


First parameter refer: fieldcode and second parameter is display text.      
       
You can find more detail about mail merge functionality from below KB link.   
    

Regards,
Suriya M.

Loader.
Up arrow icon