How to Create HTML Reports

    This tutorial is intended to illustrate HTML report creation. It is presumed that you are familiar with common NPrinting procedures.

    We are going to embed images of two QlikView objects in an HTML report in this tutorial, and then add a level and the level variable tag as the label to HTML report which will then have an appropriate title and images in a frame for each of three years.

    Open an existing NPrinting document or a new one. We will use a sample QlikView document, SalesDemo.qvw, for this tutorial. Establish a connection to SalesDemo.qvw (see: How to Connect to your QlikView documents).

    Add New HTML Report

                    
                Add-New-HTML-Report.png                
          
    1. Select Office Reports in the lower left-hand pane
    2. Select the HTML reports in the pane immediately above
    3. Select HTML Report in the New group of the tool ribbon
       

    Create New HTML Report

                    
                Create-New-HTML-Report.png                
          
    1. Enter a Name for your report
    2. Enter optionally a Description
    3. Select New in the Template group of the tool ribbon.
      

    Create New HTML Template: Open Select Objects Window for Images

                    
                Create-New-HTML-Template--Open-Select-Objects-Wind.png                
          
    1. Right click on the Images node icon or label in the left pane
    2. Select Add objects
      

    Select Connection and Objects to Add

                    
                Select-Connection-and-Objects-to-Add.png                
          

    Import images of QlikView objects:

    1. If you need QlikView objects from a specific connected QlikView document, select the corresponding connection
    2. Select the objects, Top 25 Products and Top 3 Countries in this case
    3. Click on the OK button
      

    Embed Images in Template

                    
                Embed-Images-in-Template.png                
          
    1. Expand the Images node in the left pane by clicking on the '+' to its left
    2. Drag and drop the CH296 - Top 3 Countries, and CH184 - Top 25 Products tokens onto lines between the <body> and </body> tags. Add lines as necessary and some block element tags such as <p>, <table>, or <div> for layout management and inline style elements if necessary
    3. Click on the Preview icon in the Actions group

    Resulting Report

                    
                Resulting-Report.png                
          

    This resulting HTML report is the result of the code that follows:

    <html>

    <body Style="text-align: center;">

    <h3 Style="text-align: center; font: 21px verdana;">

    Top 3 Countries

    <h3>

    <img src="%%CH296%%" alt="CH296">

    <h3 Style="text-align: center; font: 21px verdana;">

    Top 25 Products

    <h3>

    <img src="%%CH184%%" alt="CH184">

    </body>

    </html>

    Open Select Levels Window

                    
                Open-Select-Levels-Window.png                
          

    Your HTML report can be produced with levels. For example, to produce a level that cycles through each year:

    1. Right click on the Levels node icon or label in the left pane
    2. Select Add levels

    Multi-Level HTML Report: Select Level

                    
                Multi-Level-HTML-Report--Select-Level.png                
          
    1. If you need a QlikView field from a specific connected QlikView document, select the corresponding Connection
    2. Select the Year field from the list in the Select Levels window
    3. Select OK
     

    Add Year_Level to Template

                    
                Add-Year_Level-to-Template-.png                
          
    1. Expand the Levels node in the left pane by clicking on the '+' to its left
    2. Drag and drop the Year_Level node token onto a line between the <body> and </body> tags

    Add lines if necessary. The result is three new lines, %%Year_Level%%, %%/Year_Level%% with a blank line between.

      

    Place Content into Level Cycle

                    
                Place-Content-into-Level-Cycle.png                
          

    Arrange the %%Year_Level%% line before and the %%/Year_Level%% line after the elements that you want to be included in the level cycle.

       

    Add Level Cycle Title

                    
                Add-Level-Cycle-Title.png                
          
    1. Expand the Year_Level node in the left pane by clicking on the '+' to its left
    2. Drag and drop the Year node token onto a line between the %%Year_Level%% and the %%/Year_Level%% lines
    3. Add inline style elements
    4. Click on the Preview icon

    Here is the code for this simple HTML report:

    <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 3 Countries

         </h3>

         <img src="%%CH296%%" alt="CH296">

         <h3 Style="text-align: center; font: 21px verdana;">

             Top 25 Products

         </h3>

         <img src="%%CH184%%" alt="CH184">

      %%/Year_Level%%

      </body>

    </html>

    Preview Resulting HTML Report

                    
                Preview-Resulting-HTML-Report.png                
          

    The code above produces this HTML report having three titled sections, one for each year. Simple results with simple style elements.