Pass a list of merge fields to document editor

I am wanting to start work on developing a communication module for my application using docx letters.

The mail merge functionality looks really good and simple to use. However I also need users to be able to create templates using the DocumentEditor. These templates will contain lots of fields, what I want to do is pass a list of available merge fields to the document editor and allow the user to select from these fields. Something like an insert merge field button in the banner that lets the user select from predefined merge fields.

Is there anyway to do what i outlined above? 


Many thanks!


1 Reply

BS Balamurugan Shanmugam Syncfusion Team November 28, 2023 09:24 AM UTC

Hi Tim,

Please refer to the mail merge demo sample below.

https://ej2.syncfusion.com/aspnetcore/DocumentEditor/MailMerge#/material3

In this sample,

  • we have inserted the template data as a field using insertField API.
    container.documentEditor.editor.insertField('MERGEFIELD ' + fieldName + ' \\* MERGEFORMAT');


  • Then, in the merge document button click, we send the document as a SFDT to the server, and on the server side, we have merged the document with the corresponding field value and converted the merged document to a SFDT format.

 

        [AcceptVerbs("Post")]

        [HttpPost]

        [EnableCors("AllowAllOrigins")]

        [Route("MailMerge")]

        public string MailMerge([FromBody] ExportData exportData)

        {

            Byte[] data = Convert.FromBase64String(exportData.documentData.Split(',')[1]);

            MemoryStream stream = new MemoryStream();

            stream.Write(data, 0, data.Length);

            stream.Position = 0;

            try

            {

                Syncfusion.DocIO.DLS.WordDocument document = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx);

                document.MailMerge.RemoveEmptyGroup = true;

                document.MailMerge.RemoveEmptyParagraphs = true;

                document.MailMerge.ClearFields = true;

                document.MailMerge.Execute(CustomerDataModel.GetAllRecords());

                document.Save(stream, Syncfusion.DocIO.FormatType.Docx);

            }

            catch (Exception ex)

            { }

            string sfdtText = "";

            Syncfusion.EJ2.DocumentEditor.WordDocument document1 = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, Syncfusion.EJ2.DocumentEditor.FormatType.Docx);

            sfdtText = Newtonsoft.Json.JsonConvert.SerializeObject(document1);

            document1.Dispose();

            return sfdtText;

        }

  • Use that SFDT in the client to reopen the merged document.

 

                };

                httpRequest.send(JSON.stringify((<any>responseData)));

 

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.  

Regards,

Balamurugan S


Loader.
Up arrow icon