Tutorial - Custom Template

You can now use Custom Template to print your reports in your own layout.

Note Before reading this tutorial, please read Custom Templates and understand the concept of Custom Template first.

In this tutorial we will show you how to create a Custom Template for exporting an order from a report. We will use the demo project for demonstration.

The Custom Template support simple or Detail and Summary reports only. We'll create an custom template for a report similar to the Detail and Summary report created in Tutorial - Detail and Summary Report. Refer to the tutorial to create another view, the only difference is that we'll show some customer information in the export version, so we add some more fields from the customers table in the view:

Then we create the same Detail and Summary Report as in above tutorial, we name it as, say, "Sales By Customers 2". Note that there are 2 grouping fields:

When you select the fields, you do not need to select above additional fields (ContactName, ContactTitle, Address, City, Region, PostalCode, Country, and Phone) that you don't normally show in the report. Alternatively, you can unselect them in the Show column of Field Setup page after you have created the report.

We also enable Extended Filter for the OrderID so we can select an order from the report before we export it:

 

Steps to Create the Custom Template

1. Loading ASP.NET Report Maker

Open ASP.NET Report Maker and then open the demo project.

2. Adding the Custom Template

Select the "Sales By Customers 2" report, then click the [Code (Server Events, Client Scripts and Templates)] tab and expand on the [Custom Templates] node. You will see that there are many different sections for the custom template, as shown in the diagram below.

Each template refers to a different part of the report, you can enter your own HTML for them. (See Custom Template Tags for the meanings of the tags with triple curly brackets.)

Note Template should be in Razor syntax, use @, @: or @Html.Raw() when necessary.

Template Name Sample codes for this tutorial
CustomTemplateHeader

<p>@DateTime.Today.ToString("d MMM yyyy")</p>

<p>
{{:CompanyName}}<br>
{{:Address}}<br>
{{:City}}<br>
{{:Country}}<br>
Attn: {{:ContactName}}
</p>

Note Since the fields CompanyName, Address, City, Country, ContactName are not shown in the report, we cannot use Custom Template Tags to show them. (Remember that Custom Template is re-arrangement of existing HTML fragments.) However, the first row of the report is passed to the template as additional data, we can make use of it by JsRender tags as above.
CustomTemplateGroupHeader2

<p><b>Order Number:</b> {{{OrderID}}} </p>
@:<table class="ewTable exportable" border="0.5">
<tr>
<td><b>{{{caption ProductName}}}</b></td>
<td><b>{{{caption UnitPrice}}}</b></td>
<td><b>{{{caption Quantity}}}</b></td>
<td><b>{{{caption Discount}}}</b></td>
<td><b>{{{caption Extended_Price}}}</b></td>
</tr>

Notes

  1. We use CustomTemplateGroupHeader2 instead of CustomTemplateGroupHeader here because we want to show the sum of Extended Price in the order. And OrderID is the second grouping field of the report.
  2. The attribute border="0.5" is for exporting to PDF since iTextSharp (see Third-party Tools) cannot parse CSS classes like browsers.
CustomTemplateBody

<tr>
<td>{{{ProductName}}}</td>
<td>{{{UnitPrice}}}</td>
<td>{{{Quantity}}}</td>
<td>{{{Discount}}}</td>
<td>{{{Extended_Price}}}</td>
</tr>

CustomTemplateGroupFooter2

<tr>
<td colspan="4"><div style="text-align: right;"><b>Total</b></div></td>
<td><b>{{{sum Extended_Price}}}</b></td>
</tr>
@:</table>

Note We use CustomTemplateGroupFooter2 instead of CustomTemplateGroupFooter here because we want to show the sum of Extended Price in the order. And OrderID is the second grouping field of the report.
CustomTemplateFooter

<br>
<p>Some additional information here.</p>

After entering the sample codes in the corresponding templates above, click [OK] to finish.

3. ASP.NET Script Generation

Go to the [Generate] tab, click the [Generate] button and ASP.NET Report Maker will generate the ASP.NET scripts automatically.

4. Running the ASP.NET Application

Browse the generated site, go to "Sales by Customer 2" report, select an order in the Extended Filter panel, we'll see:

Now click Export -> Printer Friendly or Export to PDF to see the result:

 

 ©2007-2017 e.World Technology Ltd. All rights reserved.