HTML Template – Convert Template to HTML

This article describes how to use Aspose.HTML for Java to create an HTML document based on a template and populate it with data from various sources, such as XML or JSON. Using inline expressions syntax, you can efficiently match data-sources against your HTML template and dynamically generate content.

Aspose.HTML for Java offers a set of convertTemplate() methods that are used to convert an HTML template into an HTML document. The methods take several parameters (for example, paths to the template and data source, an object of TemplateLoadOptions, and a path to the result HTML) and return the populated HTML document.

Understanding Template Markup

An HTML template is a standard HTML file that contains some special inline expressions. These expressions use double curly braces {{ }} to map data from the input data source to specific parts of the HTML document. When processed, these template markers are replaced with corresponding data values following the below-mentioned rules.

Inline Expressions Syntax

Following is the list of supported inline expressions syntax.

{{ … }} – data-binding expression

The data-binding expression is used to set values of control element based on the information that is contained in the data-source.

The following is the basic syntax of the data-binding expression:

{{ data-binding expression }}

The following demo shows how to use the data-binding expression to obtain information from the XML data-source.

XML Data Source

<Data>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
<Address>
    <City>Chicago</City>
    <Street>Oakmound Drive</Street>
    <Number>100</Number>
</Address>
</Data>

The data-binding expression in the HTML page template:

HTML Template

This HTML template demonstrates the use of inline expressions for data binding. It features a table with two columns: “Person” and “Address.” The “Person” column dynamically displays data for {{FirstName}} and {{LastName}} from the data source, while the “Address” column shows {{Address.Street}}, {{Address.Number}}, and {{Address.City}}. Inline expressions are defined using curly-brace syntax.

<table border=1>
    <tr>
        <th>Person</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>{{FirstName}} {{LastName}}</td>
        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
    </tr>
</table>

{{#foreach … }} – foreach directive expression

The foreach directive expression is used to iterate through the list of elements in combination with data-binding expression.

The following demo shows how to get all persons from the data-source and populate a template:

XML Data Source

<Data>
    <Persons>
        <Person>
                <FirstName>John</FirstName>
                <LastName>Doe</LastName>
                <Address>
                        <Number>100</Number>
                        <Street>Oakmound Drive</Street>
                        <City>Chicago</City>
                </Address>
                <Phone1>773-349-7747</Phone1>
                <Phone2>708-252-9790</Phone2>
        </Person>
        <Person>
                <FirstName>Jack</FirstName>
                <LastName>Fox</LastName>
                <Address>
                        <Number>355</Number>
                        <Street>Haul Road</Street>
                        <City>San Francisco</City>
                </Address>
                <Phone1>650-942-7641</Phone1>
            </Person>
            <Person>
                <FirstName>Sherlock</FirstName>
                <LastName>Holmes</LastName>
                <Address>
                        <Number>45</Number>
                        <Street>Baker str.</Street>
                        <City>London</City>
                </Address>
                <Phone1>012-5146-564</Phone1>
        </Person>
    </Persons>
</Data>

The foreach directive expression in the HTML page template:

HTML Template

The data_merge attribute specifies the data source is a list of objects and the table should be repeated for each object in the list. The expressions inside the template, such as {{FirstName}}, {{LastName}}, {{Address.Street}}, and {{Address.Number}}, indicate the fields from the data source that should be inserted in the corresponding cells of the table.

<table border=1 data_merge='{{#foreach Persons.Person}}'>
    <tr>
        <th>Person</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>{{FirstName}} {{LastName}}</td>
        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
    </tr>
</table>

Please note that the current implementation supports foreach directive expression only for the following list of HTML elements: DIV, OL, UL and TABLE.

Data Source

As it was mentioned earlier, the data-source could be represented in XML and JSON formats. The following are the examples of both data-source:

XML Data Source

 <Data>
    <FirstName>John</FirstName>
    <LastName>Doe</LastName>
    <Address>
        <City>Chicago</City>
        <Street>Oakmound Drive</Street>
        <Number>100</Number>
    </Address>
</Data>

JSON Data Source

{
     "FirstName": "John",
     "LastName": "Doe",
     "Address": {
         "City": "Chicago",
         "Street": "Oakmound Drive",
         "Number": "100"
     }
 }

Convert Template to HTML

If your case involves creating a template and specifying data on-the-fly, you have to follow a few steps:

1. Prepare a JSON or XML data source and save it to a file. The TemplateData() constructor takes the path to this data file and creates a data object (data) for the convertTemplate(sourcePath, data, options, outputPath) method.
2. Prepare an HTML template and save it to a file. The convertTemplate() method will take the template file’s path as a parameter (sourcePath).
3. Initialize an instance of the TemplateLoadOptions class to determine whether the template and data item names match, regardless of case or not (options).
4. Invoke the convertTemplate(sourcePath, data, options, outputPath) method and pass sourcePath, data, options, and outputPath for it. outputPath is a path for data-filled template file saving. The convertTemplate() method substitutes the expressions in the template with values from the data source, generating a populated HTML document.

// Prepare a JSON data-source and save it to the file.
String data =
        "        {\n" +
        "        'FirstName': 'John',\n" +
        "        'LastName': 'Smith',\n" +
        "        'Address': {\n" +
        "            'City': 'Dallas',\n" +
        "            'Street': 'Austin rd.',\n" +
        "            'Number': '200'\n" +
        "            }\n" +
        "        }\n";
try (java.io.FileWriter fileWriter = new java.io.FileWriter("data-source.json")) {
    fileWriter.write(data);
}

// Prepare an HTML Template and save it to the file.
String template =
        "<table border=1>\n" +
        "    <tr>\n" +
        "        <th>Person</th>\n" +
        "        <th>Address</th>\n" +
        "    </tr>\n" +
        "    <tr>\n" +
        "        <td>{{FirstName}} {{LastName}}</td>\n" +
        "        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>\n" +
        "    </tr>\n" +
        "</table>\n";
try (java.io.FileWriter fileWriter = new java.io.FileWriter("template.html")) {
    fileWriter.write(template);
}

// Invoke Converter.ConvertTemplate in order to populate 'template.html' with the data-source from 'data-source.json' file
com.aspose.html.converters.Converter.convertTemplate(
        "template.html",
        new com.aspose.html.converters.TemplateData("data-source.json"),
        new com.aspose.html.loading.TemplateLoadOptions(), "document.html"
);

Technical Recommendations

1. Always validate the data source format (XML/JSON) and ensure consistency with template markers to avoid mismatches.

2. Use TemplateLoadOptions.NamesAreCaseSensitive to control case sensitivity during data binding. If the value is true, matching is case sensitive; if it is false, the character case will be ignored. The default value is true. Setting it to false simplifies handling inconsistent naming.