Creating HTML reports
HTML reports contain HTML and image files. They are delivered to users as .zip files.
This tutorial shows how to:
- create an HTML
- embed images in an HTML report
- add a level
- add a level variable tag as a label
The end report will have an appropriate title and images in a frame for each of three years. HTML reports support most Qlik Sense objects. See: Working with Qlik objects
Testing
You can use our sample files to create your report. To download these files, see: Sample files.
Creating a new HTML report
Do the following:
- Select Reports in the Qlik NPrinting main menu, and then click Create report.
- Enter a Title for the report.
- Select HTML from the Type drop-down list.
- Select an app from the App drop-down list.
-
Select a Template from the options available:
- Empty template - uses an empty template
-
Default template - use the default template (only available if a default template has been set in Report settings.
- Custom - Choose a file to use as a template.
- Click Create to create the report.
Selecting connections and objects
Do the following:
- Click Edit template to open the Template Editor.
- Right-click the Images node, and select Add objects.
- Select the objects you want to add as images.
- Click OK.
- Drag and drop your image objects onto lines between the <body> and </body> tags.
- Click Preview.
- Check the report, close it, and then edit the template again if necessary.
- Click Save and Close to save the template and close the Template Editor.
Resulting report
<html>
<body Style="text-align: center;">
<h3 Style="text-align: center; font: 21px verdana;">
Top 10 countries
</h3>
<img src="%%CH320%%" alt="CH320">
<h3 Style="text-align: center; font: 21px verdana;">
Top 10 products
</h3>
<img src="%%CH184%%" alt="CH184">
</body>
</html> Opening the select levels window
You can produce an HTML report with levels that cycle through each year.
Do the following:
- Right-click the Levels node, and select Add levels.
- Select Year from the levels list.
- Click OK.
- Expand the Levels node.
-
Drag and drop the Year_Level node token onto a line between the <body> and </body> tags.
Add lines if necessary.
- Arrange the %%Year_Level%% line before the elements that you want to be included in the level cycle, and the %%Year_Level%% line after the elements that you want to be included in the level cycle.
- Expand the Year_Level node.
-
Drag and drop the Year node token onto a line between the %%Year_Level%% and the %%Year_Level%% lines.
- Add inline style elements. See the code examples below.
The result is three new lines, %%Year_Level%%, %%/Year_Level%%, and a blank line between the lines.
Resulting report
The following HTML code, for example, creates a corresponding HTML report. The report will have three titled sections, one for each year.
<html>
<body Style="text-align: center;">
%%Year_Level%%
<h2 Style="font: 24px verdana;font-weight: bold;">%%Year%%</h2>
<h3 Style="text-align: center; font: 21px verdana;">Top 10 countries</h3>
<img src="%%CH320%%" alt="CH320">
<h3 Style="text-align: center; font: 21px verdana;">Top 10 products</h3>
<img src="%%CH184%%" alt="CH184">
%%/Year_Level%%
</body>
</html>