Skip to main content Skip to complementary content

Div integration

Div integration allows you to integrate QlikView objects into an existing website using the QlikView JavaScript API.

Enabling Div integration

You need to perform four steps to enable Div integration:

  1. Include a reference to the QlikView JavaScript API inside the head of your HTML file.

    <script language="javascript" type="text/javascript" src="http://SERVER_URL/QVAJAXZfc/htc/QvAjax.js"></script> 
  2. Initialize the reference to the QlikView document. To enhance responsive web design, the qvresize event is triggered to resize the qvobject in the container whenever the browser window is resized.

    <script language="javascript" type="text/javascript">
       Qv.InitWorkBench({
          View: 'movies database',
          BodyOnLoadFunctionNames: [function() {
              $(window).on('resize', function() {
              $("[qvobject]").trigger('qvresize');
              });
          }]
          Host: null
       });
    </script>
    
    Information note Set the Host property to null or omit it if you want to use the default QlikView server connection for the web server, defined by DefaultQvs in the web server configuration file (C:\ProgramData\QlikTech\WebServer\config.xml). The Host property must be defined if several QlikView server connections exist for the web server.
  3. Add an internal style sheet inside the head of your HTML file to organize the presentation of the QlikView objects.
    <style>
    .qvcontainer {
        display: flex;
        flex-direction: column;
        height:100vh;
        margin:0px;
    }
    .qvitem {
        flex-grow: 1;
        margin:20px;
    }
    </style>
  4. Define where the QlikView objects should be displayed in your HTML structure.

    <!-- Listbox with the Id LB04 from the document "movies database" -->					
    <body class="qvcontainer">                
        <div class="qvitem" qvobject="LB04"></div>
    </body>

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!

Join the Analytics Modernization Program

Remove banner from view

Modernize without compromising your valuable QlikView apps with the Analytics Modernization Program. Click here for more information or reach out: ampquestions@qlik.com