Example - Creating an email report using an embedded HTML template
In this example, you will create and send a report by embedding an HTML report template directly into an email message.
Email report that you will create in this example.
Requirements
-
SMTP server connected to your Qlik Cloud tenant. See: Configuring email for reports and notifications
-
The Private Analytics Content Creator security role, or sufficient space role for report development in a shared space. See: Permissions
Step 1: Upload example sources
Refer to the example app sources here: Example materials - In-app reporting. Upload the app and data files into a space, and then reload the app. You are ready to complete the example.
Step 2: Develop the template
Create a new template
Do the following:
-
In your app, use the drop down menu in the navigation bar and select Reporting.
-
Switch to the Templates tab.
-
In the top right, click Create new > HTML template.
-
Enter a Name for the template.
The HTML designer opens.
Add tabular data
Next, add tabular data to the template.
Do the following:
-
Click
in the objects panel. -
Click Add table. A list of available sheets appears.
-
Expand the Sales Tables sheet.
-
Click the
icon next to the Yearly Regional Sales chart. -
In the drop down menu, select Individual columns.
-
Under Select columns to add, select All. Click Add.
The chart is added to the template as a table structure.
-
With the new table selected, change the following properties for the table in the objects panel:
-
Under Table settings, turn off Keep source formats.
-
Switch Display headers to Hide.
-
-
In the table, add a new row above the existing row definition. Add a new line below the line that contains <tbody><tr>. Paste the following:
<th>Order year</th> <th>Region</th> <th>Sales</th> </tr> <tr>
Style the table
Next, style the table elements by adding style definitions in the HTML head and inline styling in the table structure itself.
Do the following:
-
Add a new line below the title definition for the template.
-
Paste the following:
<style>html { font-family: sans-serif } table { border: 2px solid #000000 } tr, th, td { border: 1px solid #000000 } th { font-size: large } td { font-size: medium }</style> -
Locate the line in the table structure that defines the data. It should look like this:
<td>%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td> -
Add style="text-align: center" to the opening tag of the first td element. The entire line should now look like this:
<td style="text-align: center">%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td>This aligns the text in the first column to be centered.
Adding a dynamic title
Next, create an expression to store the calculation of the year range for your sales. Then, incorporate this expression into the report title so it is embedded as the email subject.
Do the following:
-
Click
in the objects panel. -
Click Add expression.
-
In the Name field, type YearRange.
-
In the Expression field, paste the following expression:
= min(OrderYear)& ' - ' & max(OrderYear) -
Click Create.
-
On the design surface, find the title element. Replace the entire line with the following:
<title>Sales Report: </title> -
On the line you just pasted, place your cursor after Sales Report:
-
In the objects panel, click Add expression tag.
-
The line should now be:
<title>Sales Report: %YearRange%%</title>
Add opening and closing statements
Next, add a salutation and opening statement, and finalize the report with a closing compliment.
Do the following:
-
Add a new line below the opening body tag.
-
Paste the following:
<p>Hello,</p> <p>The table below outlines regional sales details for the requested years.</p> -
Add a new line below the line containing the closing tag for the table.
-
Paste the following:
<p>Regards,</p> <p>- Management</p>
Saving and finalizing your work
Click Save template to save your work. The completed template code should look like the following.
<html><head>
<title>Sales Report: %%YearRange%%</title>
<style>html { font-family: sans-serif }
table { border: 2px solid #000000 }
tr, th, td { border: 1px solid #000000 }
th { font-size: large }
td { font-size: medium }</style>
</head>
<body>
<p>Hello,</p>
<p>The table below outlines regional sales details for the requested years.</p>
<table cellspacing="0" style="border-collapse: collapse">
<tbody><tr>
<th>Order year</th>
<th>Region</th>
<th>Sales</th>
</tr>
<tr>
<td style="text-align: center">%%OrderYear%%</td><td>%%Region%%</td><td>%%Sales%%</td></tr>
</tbody></table>
<p>Regards,</p>
<p>- Management</p>
</body></html>Step 3: Add a distribution list
Add a distribution list file under the Recipients or Groups tab in the app's Reporting section. Make sure you are added by email as a recipient and that the distribution list does not contain any filters or groups.
For information about distribution lists, see Creating a distribution list for your report.
Step 4: Create a report task
Do the following:
-
Open the Report tasks tab in the Reporting section of the app.
-
Click Create report task. The report task dialog opens.
-
Enter a Title for your report task.
-
Optionally, add a Description.
In the Template dialog tab, click Add existing template. Select the template that you developed above.
-
Click Next. The dialog moves to the Output tab.
-
In the Output dialog tab, type a File name for the report output.
-
Click Next to proceed to the Distribute dialog tab.
-
Add yourself as a recipient to the report output.
-
Under Email, select HTML report. This will embed the report into the email message rather than attaching it as a file.
-
Click Next to proceed to the Schedule dialog tab.
-
Select the default scheduling settings and click Save.
Step 5: Send the report
Do the following:
-
Stay in the Report tasks tab in the Reporting section of the app.
-
Click
next to the new report task. -
Click
Send now.
When the email arrives, open it to see the result.
Resulting email report