Products Technologies Demo Docs Blog Support Company

Creating Dynamic HTML Forms Using ReportingCloud

ReportingCloud GetTemplateInfo retrieves merge field names from MS Word templates, enabling dynamic HTML form generation in MVC views. Each field maps to an input element. Submitted data is passed as a Dictionary to MergeDocument, which returns a PDF with populated merge field values.

Creating Dynamic HTML Forms Using ReportingCloud

Our Web API product ReportingCloud provides the reporting functionality of TX Text Control in an easy-to-use, platform independent REST web service. This sample shows how to use ReportingCloud to create dynamic HTML forms from MS Word compatible templates.

The following template consists of flat merge fields that should be merged with data entered in a web form.

Creating dynamic HTML forms using ReportingCloud

This sample uses the .NET wrapper for ReportingCloud that encapsulates all HTTP requests and provides compatible .NET classes to manage templates and to merge documents.

In the controller code, a new ReportingCloud object is created and the template is uploaded to the ReportingCloud template storage. Using the GetTemplateInfo method, merge field and merge block information of a template can be retrieved. This TemplateInfo object is returned to the view:

public ActionResult Index()
  {
      // create a new ReportingCloud object
      ReportingCloud rc = new ReportingCloud("username", "password");

      // read template into byte array and upload template to RC
      byte[] bDocument = 
        System.IO.File.ReadAllBytes(Server.MapPath("/App_Data/letter.tx"));
      rc.UploadTemplate("letter.tx", bDocument);

      // retrieve template information
      TXTextControl.ReportingCloud.TemplateInfo templateInfo = 
        rc.GetTemplateInfo("letter.tx");

      // return template information to view
      return View(templateInfo);
  }

In the view code, an HTML form element is created for each merge field in the template. The text of the field is used as the label text for each input element:

@model TXTextControl.ReportingCloud.TemplateInfo

@{
    ViewBag.Title = "Index";
}

<h2>@Model.TemplateName</h2>

@using (Html.BeginForm("Merge", "Home", FormMethod.Post))
{
    foreach (TXTextControl.ReportingCloud.MergeField field in 
             Helpers.RemoveDuplicates(Model.MergeFields))
    {
        <p>
            @Html.Label(field.Text)<br />
            @Html.TextBox(field.Name, "",
                          new { @class = "form-control", 
                          required = "true", 
                          placeholder = field.Name,
                          title = "Type in the " + field.Text })
        </p>
    }

    <input type="submit" value="Merge document" />
}

The following screenshot shows the HTML form with the dynamically created input form elements for each merge field.

Creating dynamic HTML forms using ReportingCloud

In the controller Merge method, a Dictionary with the form data key pair values is created. This data is passed to the MergeDocument method as part of the MergeBody object. The MergeDocument method returns the created PDF document which is then returned to the browser:

public void Merge()
{
    // create a Dictionary with all form values
    Dictionary<string,string> formValues = 
      new Dictionary<string,string>();

    foreach (string key in Request.Form)
    {
        formValues.Add(key, Request[key]);
    }

    // create a new ReportingCloud object
    ReportingCloud rc = new ReportingCloud("username", "password");

    // create a MergeBody object with the form values
    MergeBody mb = new MergeBody()
    {
        MergeData = formValues
    };

    // call the MergeDocument method
    List<byte[]> documents = rc.MergeDocument(mb, "letter.tx");

    // return the PDF to the browser
    Response.ContentType = "application/pdf";
    Response.BinaryWrite(documents[0]);
    Response.Flush();
    Response.End();
}

The returned PDF document shows the resulting document with the populated merge fields:

Creating dynamic HTML forms using ReportingCloud

With ReportingCloud, you can implement mail merge and reporting functionality into any application without installing any libraries on your servers or clients. Test this on your own and create a free trial account today.

Download the sample from GitHub and test it on your own.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Download ZIP

Open on GitHub

Open in Visual Studio

Requirements for this sample

  • Visual Studio 2015 or better
  • ReportingCloud account (trial sufficient)
  • ReportingCloud .NET wrapper

Cloud

Are we moving to the cloud? This question is changing from "if" to "when" and "how". Text Control ReportingCloud brings complete reporting functionality to the cloud so all developers can use it, irrespective of the platform or language they're using. Its highly RESTful API can be used to merge Microsoft Word compatible templates with JSON data from all clients including .NET, Javascript, PHP, Node.JS, jQuery, Ruby, Python, Android, Java and iOS.

See Cloud products

Related Posts

CloudReportingMail Merge

ReportingCloud: Uploading Templates Vs. Sending Templates Inside MergeBody

ReportingCloud offers two template delivery methods: uploading to persistent storage via the /templates/upload endpoint, or embedding Base64-encoded template data in the MergeBody POST request.…


CloudReportingMail Merge

MailMerge: Table Headers and Repeating Blocks

Repeating table headers appear at the top of each page when tables span multiple pages during a MailMerge process. When combining table headers with nested merge blocks, the complete table must be…


CloudReportingMail Merge

ReportingCloud: Conditional Text Blocks Based on Merge Blocks

Conditional text rendering in ReportingCloud uses merge blocks combined with the RemoveEmptyBlocks setting. When the data source provides an empty object for a named block and RemoveEmptyBlocks is…


CloudReportingMail Merge

Web API Test Sandbox Released on ReportingCloud Portal

The ReportingCloud portal includes a Web API Test Sandbox for running endpoint calls against your own account data and template storage without affecting document quota. Each endpoint in the Web…


CloudReportingMail Merge

ReportingCloud: New Test Parameter for Document Quota Related Endpoints

ReportingCloud merge, convert, and findandreplace endpoints now accept an optional test parameter. Test calls bypass the document quota and produce watermarked output with a TEST MODE label,…

Share on this blog post on: