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