Creating HTML reports

HTML reports can contain many 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:

  1. Select Reports in the Qlik NPrinting main menu, and then click Create report.
  2. Enter a Title for the report.
  3. Select HTML from the Type drop-down list.
  4. Select an app from the App drop-down list.
  5. Select a Template from the options available:

  6. Click Create to create the report.

Selecting connections and objects

Do the following:

  1. Click Edit template to open the Template Editor.
  2. Right-click the Images node, and then select Add objects.
  3. Select the objects you want to add as images.
  4. Click OK.
  5. Drag and drop your image objects onto lines between the <body> and </body> tags.
  6. Click Preview.
  7. Check the report, close it, and then edit the template again if necessary.
  8. 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:

  1. Right-click the Levels node, and then select Add levels.
  2. Select Year from the levels list.
  3. Click OK.
  4. Expand the Levels node.
  5. Drag and drop the Year_Level node token onto a line between the <body> and </body> tags.

    Add lines if necessary.

  6. The result is three new lines, %%Year_Level%%, %%/Year_Level%%, and a blank line between the lines.

  7. 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.
  8. Expand the Year_Level node.
  9. Drag and drop the Year node token onto a line between the %%Year_Level%% and the %%Year_Level%% lines.

  10. Add inline style elements. See the code examples below.

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>

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?