How to Apply HTML Formatting to NPrinting HTML Reports

    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 NPrinting.

    In other cases, you may want to apply CSS inline style elements as you create templates in the HTML Template Editor. In order to do this, you need to perform the following steps:

    Allow Application of CSS Inline Style Elements for Whole Chart

    Allow-Application-of-CSS-Inline-Style-Elements-for.png

    After you have added a QlikView object as a table:

    1. Right click on the table node
    2. Select Properties
    3. Deselect the Keep Source Formats box
    4. 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

    Comparison-of-Output--With-and-with-out--Keep-Sour.png
    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

    Allow-Application-of-CSS-Inline-Style-Elements-for-1.png

    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

    Apply-Format-to-a-Column.png
    1. Select Gross Profit
    2. Enter $#.##,00 in the Format field

    Refer to "Which Formats Can I Use in Columns?".

    Build Your Table

    Build-Your-Table.png
    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

    Resulting-Table.png

    The Keep Source Formats box has been cleared Gross Profit column

    Create Column Headings You Can Format Uniformly

    Create-Column-Headings-You-Can-Format-Uniformly.png
    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

    Hide-QlikView-Table-Column-Headings.png
    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

    Current-Result.png

    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

    Apply-Inline-Style-Elements.png

    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>

     

     

    Final Result

    Final-Result.png

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