[{"id":"a20f26ac-cd31-4e4d-9454-1e035b0f1587","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3604b8ce-1da0-413f-8274-7df0f7173573","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7fce7040-1bb1-4a61-9fb7-2e19d569de50","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"0eb72dd3-8f8f-4039-93a8-500bbde2301e","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"ac046cee-82b9-4edf-a642-ae6d7cb21ebf","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"75b66fd4-b740-443d-bc6e-1782048b60a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"dde44832-bb5c-45f3-8ebf-3badbc613cd9","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"43de3664-261b-4cf9-9945-fb519251f4c7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2f064d57-b088-4bc5-a628-4e0d7e1a0c65","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f290406b-ced1-4c52-abad-979160a79f6b","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1864834b-08ce-43f1-891b-c3cca6e04e95","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f96cfec1-420c-4ca7-ab0a-cab482731073","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3f2ea860-c764-43d8-ae3f-6e3b0314ce67","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"81eb70e8-f770-4384-9167-bc7c755ad052","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d0dff477-9f56-483a-a9fc-cab648905b41","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"793a62d7-460d-4699-9304-edb2941268ac","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2d6ebfad-f7d1-4cc5-8ba1-fdace3472056","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c8c7b5d5-f5bd-4b68-a12f-3aae9804a844","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"577a09da-dea1-42db-812f-4eeaa9274ece","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8ddd80d5-886f-41b8-8e3f-f73aa8146c8d","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e0909540-8bde-4587-bb4d-02445746db2a","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"464b8e03-462d-4aed-8818-05d32ec3bf00","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f235557b-9781-471f-bf03-38bae6e3e953","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd5d021d-0210-4d74-ba42-1a39ef14a385","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"548568fe-dbd1-4da5-a489-d9b3edf75329","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a0c823ed-e22b-493b-aded-4d201c0fa480","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d19bc9cd-ff53-4b0d-ab7e-a68c1497c4c6","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"94759fce-692f-4779-b5f3-fce5c58f242c","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"27658163-a479-432f-a192-dbed286beb3e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]
A mail merge is a way to generate multiple documents at once by applying data records to a pre-defined template. In ActiveReportsJS, you can build such a report using a variety of ways. If a document template can be expressed as an HTML fragment, then you can use a RichText report item together with a List data region. Examples of mail merge reports are letters, coupons, and others.
This tutorial builds the Promotion Coupon list from the ground up, providing experience with the typical report designing process. By the end, you will be able to do the following:
Create a new report
Bind the report to the OData API
Use the OData $select query option to reduce the volume of retrieved data
Use field tags to define the data type of a field
Create a List data region, bind it to the data, and set the filter for the data to be displayed
Configure Grouping of a List Data Region
Use a RichText report item to display a dynamic HTML content
Upon completing all tutorial steps, the final report will look like this: live demo.
The following content assumes that you have the Standalone Report Designer running. Visit the tutorial for detailed information. A stable internet connection is also required to access the Demo Data Hub.
In the standalone report designer, click the File menu and select the Continuous Page Layout template for a newly created report. Click anywhere on the gray area around the report layout to load the report properties in the properties panel. In the Margins
section, set the Style
property to Narrow
to change the report page margins size.
Expand to watch creating a new report in action
Data Binding establishes a connection between a report and the data it displays. For this demo, we use the MESCIUS Demo OData API that contains the sales data for a fictitious company called Contoso that is a manufacturing, sales, and support organization with more than 100,000 products.
You can think of the Contoso OData API as the "database" that you can connect to using its root URL https://demodata.mescius.io/contoso/odata/v1
, and that has multiple "tables" which presented with endpoints such as /DimCustomers, /DimStores, and /DimProducts. Using the following steps, you can create a Report DataSource that establishes the connection to such a "database."
Open the Data panel of the property inspector and click the Add
button.
In the Data Source editor dialog, type Contoso
in the NAME field and https://demodata.mescius.io/contoso/odata/v1
in the ENDPOINT field.
Click the Save Changes
button
Data Sets represent one or more endpoints of the Data Source. For the Promotion Coupon list, we need access to the data from the DimPromotions endpoint of the Contoso Data Source that we added in the previous section.
Use the following steps to add the Promotions
data set:
Click the +
icon near Contoso
in the Data panel.
In the Data Set Editor dialog, type Promotions
in the NAME field, /DimPromotions
in the Uri/Path field, and $.value.*
in the Json Path
field.
By default, each Promotion
record includes 14 fields, but we don't need them all. Therefore we limit the retrieved fields by applying the OData $select query option via a query parameter.
Click the +
icon on the right side of the Parameters
section.
Type $select
in the Parameter
field of the newly added Parameter
item.
Type PromotionKey, PromotionName, DiscountPercent, StartDate, EndDate
in the Value
field of the same Parameter
item.
Click the Validate
button.
Ensure that the DataBase Fields
section displays [5 items]
text.
Expand the DataBase Fields
section and set the DataField
property of the StartDate
and the EndDate
fields to StartDate[Date]
and EndDate[Date]
, respectively.
Click the Save Changes
button.
Expand to watch adding the Promotions data set in action
To display promotion coupons, we will use List data region:
Expand the toolbox using the Hamburger
menu located on the left side of the toolbar.
Drag and drop the List
item from the toolbox to the report page area's top-left corner.
Switch to the Properties panel in the Property inspector.
Select the Promotions
item in the Data Set Name
drop-down
Set the Width
property to 7.5in
so that the list occupies the available printable area defined by the report page size and margins.
Set the Height
property to 5in
.
Click the +Add...
link in the Filters Editor.
Click the +Add...
button and select DiscountPercent
in the popup menu.
Select the Greater Than
for the filter operator.
Click the text area on the right side of the >
sign and type 0
.
Expand to watch adding the List in action
To display each promotion coupon on a separate page, we will configure the List Grouping:
Exit the Filters Editor by clicking the Back
button.
Click the +
icon on the right side of the Group Expressions
property in the Group
section in the Property inspector.
Click the gray box on the right side of the newly added item and select the PromotionKey
field.
Set the Page Break
property to Between
.
We will use the Rich Text report item to display the promotion coupon details:
Expand the toolbox using the Hamburger
menu located on the toolbar's left side.
Drag and drop the RichText item from the toolbox to the top-left corner of the List report that we added previously.
Set the following properties for the newly added richtext in the properties panel.
Property | Value |
---|---|
Top | 0in |
Left | 0in |
Width | 7.5in |
Height | 5in |
Border Width | 5pt |
Border Style | Dotted |
Border Color | #bbb |
Padding | 16pt 2pt 16pt 2pt |
Click the gray box on the right side of the Value
property editor and select the Expression...
item. Then, in the Expression dialog, set the following value and click the Save
button.
<h2 style="text-align:center;">{PromotionName}</h2>
<p style="text-align:center;">
<img src="https://demodata.mescius.io/images/NorthWind_large.png" style="width:2.25in;height:2.25in" />
</p>
<h1 style="color:red;text-align:center;">{Format(DiscountPercent, "P0")} OFF YOUR PURCHASE<sup>*</sup></h1>
<p style="text-align:justify;"><sup>*</sup>Valid from <b>{Format(StartDate, "d")}</b> to <b>{Format(EndDate, "d")}</b> in all of our stores. Cannot be combined with any other offers. No cash value. Northwind Traders can cancel promotion at any time.</p>
Check the RichText documentation for the full list of supported HTML tags and CSS styles.
You can now preview the report output and navigate the list of promotion coupons. You can print the output or export it to a PDF document. Note that each coupon is displayed on a separate page because we set the Page Break option to Between
for the List Grouping.
The final version of the report is available at the demo website.