How to Apply HTML Formatting to Qlik NPrinting HTML Report

When creating templates for generating reports, you will sometimes want to present information with formatting as it appears in QlikView. Keeping Qlikview source formats is the default setting in Qlik NPrinting. In other cases, you may want to apply CSS inline style elements as you create templates in the HTML Template Editor.

(Note: these instructions are valid for both Qlik NPrinting 16 and Qlik NPrinting 17. While the focus of this report is on QVWs, the same ideas can be applied to Sense applications.)

In order to do this, you need to perform the following steps: 
Follow this community document to see screen prints:  https://community.qlik.com/docs/DOC-13499
 

 

Allow Application of CSS Inline Style Elements for Whole Chart

Right click on the table nodeAfter you have added a QlikView object as a table:

1. Select Properties
2. Deselect the Keep Source Formats box
3. Click on OK at the bottom of the Properties dialog window

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 (See section further below: "Allow Application of CSS Inline Style Elements for Specific Columns").

 

Comparison of Output: With and with out "Keep Source Formats" checked

1.  Output sample with Keep Source Formats checked
2. Output sample with Keep Source Formats unchecked

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 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" box checked for the table as a whole and proceed as follows:

1. Expand the table node by clicking on the '+' to its left
2. Right click on the node for the column(s) you want to apply CSS inline Style elements to
3. Select Properties
4. Deselect the Keep Source Formats box and click on at the bottom of the Properties dialog window
5. When the HTML Encode box is checked, any non alphanumeric symbols (such as < and />) that could be interpreted as HTML tag elements will be converted to HTML entities. (If the HTML Encode box is unchecked, any non alphanumeric symbols that could be interpreted as HTML tag elements will be rendered by the underlying HTML code used in the 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 will contain 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 Format to a Column

1. Refer to "Which Formats Can I Use in Columns?".Select Gross Profit
2. Enter $#.##,00 in the Format field

 

 

Build Your Table

1.  Construct an HTML table with one row, <tr></tr> of table data cells, <td></td>
2. 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 then "drag and drop" them into the template. This will create all tags and insert them into a horizontal series of cells.

Resulting Table

The Keep Source Formats box has been cleared Gross Profit column.
 

 

Create Column Headings You Can Format Uniformly

1.  Insert another row above the first
2. Insert table heading cells in the new row
3. Enter the headings you want

Hide QlikView Table Column Headings

1.  Reopen the Properties dialog window for each and every column you have added to the template, one at a time
2. Click in the Value column of the Show Header row, the cell will have the value Show
3. A drop-down menu button will appear at the right
4. Click on the drop-down menu button
5. Select Hide

Current Result

This is the original table with Keep Source Formats cleared for the first and last columns, a heading row added, and the original table headings hidden for each and every column.
 

 

Apply Inline Style Elements

Here is the code in full:

1. <html>  
2. <body>  
3. <table cellspacing=0 style="border-collapse:collapse;">  
4.       <tr style="width:0*;  
5.                           font-family:Verdana;  
6.                           font-size:small;  
7.                           font-variant:small-caps;">  
8.            <th style="border:grey dashed 1px;">  
9.               Product Name  
10.            </th>  
11.            <th style="border:grey dashed 1px;">  
12.               Total Sales  
13.            </th>  
14.            <th style="border:grey dashed 1px;">  
15.               Gross Profit  
16.            </th>  
17.            <th style="border:grey dashed 1px;">  
18.               GP%  
19.            </th>  
20.            <th style="border:grey dashed 1px;">  
21.               Quantity  
22.            </th>  
23.         </tr>  
24.         <tr>  
25.            <td style="width:0*;  
26.                              font-family:Verdana;  
27.                              font-size:small;  
28.                              font-weight:bold;  
29.                              font-variant:small-caps;">  
30.               %%ProductName%%  
31.            </td>  
32.            <td>  
33.              %%Total Sales%%   
34.            </td>  
35.            <td>  
36.               %%Gross Profit%%  
37.            </td>  
38.            <td>  
39.               %%GP%_1%%  
40.            </td>  
41.            <td style="width:0*;  
42.                               color:red;  
43.                               font-family:Georgia;  
44.                               font-size-adjust:0.40;  
45.                               background-color:Yellow;  
46.                               border:green solid 2px;  
47.                               text-align:right;">  
48.                %%Quantity_1%%  
49.            </td>  
50.         </tr>  
51. </table>  
52. </body>  
53. </html>  

 

 

 

Final Result

This sample output is simple but it gives you an idea of the possibilities.