Applying HTML formatting

You can apply CSS inline style elements as you create templates in the HTML template editor.

Testing

You can use our sample files to create your app. To download these files, see: Sample files.

Allow application of CSS inline style elements for a whole chart

After you have added an object as a table:

Do the following:

If Properties are visible, jump to step 3, otherwise right-click the Tables node.
Select Properties.
Deselect the Keep Source Formats check box.

This will cause the content for all cells in all columns of the table to be exported from QlikView without formatting. The application of CSS inline style elements that you set in the HTML template will be applied. Compare the output with and without Keep Source Formats selected.

Allow application of CSS inline style elements for specific columns

Be sure that your table object is a straight table in QlikView. QlikView pivot tables must be converted to straight tables before selecting them to be included under the Qlik NPrinting Tables node or you will not have access to individual fields/columns. If you want to keep source formatting for the majority of columns, leave the Keep Source Formats check box selected for the table as a whole and do the following:

Expand the table node.
Click on the column(s) that you want to apply CSS inline style elements to.
Deselect the Keep Source Formats check box.
When the HTML Encode check box is selected, any non-alphanumeric symbols (such as < and />) that could be interpreted as HTML tag elements will be converted to HTML entities.

When the HTML Encode check box is cleared, any non-alphanumeric symbols that could be interpreted as HTML tag elements will be rendered by the underlying HTML code used in the Qlik NPrinting HTML template editor.

This will cause the content for all cells in the selected column of the table to be exported from QlikView without formatting, but they will contain the application of any CSS inline style elements you have applied within the HTML template. You can do this for as many individual columns as you need.

Apply a format to a column

Do the following:

In HTML Report (Sales), select Gross Profit.
Enter $#.##,00 in the Format field.

Build your table

Do the following:

Construct an HTML table with one row of data cells. The source code should looks like this:
```
<table>
 	<tr>
	<td></td> <td></td> <td></td>
	</tr>
</table>
```
Drag the table column node icons between the table data cell tags.

You can select multiple values by keeping Ctrl or Shift pressed during the columns selection, and then drag and drop them into the template. This will create all tags and insert them into a horizontal series of cells.

The Keep Source Formats check box has been cleared for the Gross Profit column.
Insert another row above the first.
Insert table heading cells in the new row.
Enter the headings that you want.
Reopen the Properties dialog window for each column that you have added to the template, one at a time.
Click in the Value column of the Show Header row. The cell will have the value Show.
Click on the drop-down menu button that appears, and select Hide.

This is the original table with the Keep Source Formats check box cleared for two columns, a heading row added, and the original table headings hidden for every column.

Apply inline style elements

In this case, the sample output is simple but it gives you an idea of the possibilities.

Here is the code in full:

<html>
	<body>
		<table cellspacing=0 style="border-collapse:collapse;">      
			<tr style="width:0*;
			                         font-family:Verdana;
			                         font-size:small;
			                         font-variant:small-caps;">           
				<th style="border:grey dashed 1px;">              
				Product Name
			        </th>           		
				<th style="border:grey dashed 1px;">              
				Total Sales
			         </th>           
				 <th style="border:grey dashed 1px;">              
				  Gross Profit
			         </th>           
				 <th style="border:grey dashed 1px;">              
					GP%
			         </th>           
				 <th style="border:grey dashed 1px;">              
					Quantity
			         </th>        
			 </tr>        
			 <tr>           
				<td style="width:0*;
			                            font-family:Verdana;
			                            font-size:small;
			                            font-weight:bold;
			                            font-variant:small-caps;">              
					%%ProductName%%
			         </td>           
				 <td>             
					%%Total Sales%% 
			         </td>           
				 <td>              
					%%Gross Profit%%
			         </td>           
				 <td>              
					%%GP%_1%%
			         </td>           
				 <td style="width:0*;
			                             color:red;
			                             font-family:Georgia;
			                             font-size-adjust:0.40;
			                             background-color:Yellow;
			                             border:green solid 2px;
			                             text-align:right;">               
					%%Quantity_1%%
			         </td>        
			</tr>
		</table>
	</body>
</html>

Learn more

HTML reports

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here