topic Re: JavaScript include in QlikView

JavaScript include

Mon, 26 Jan 2026 16:26:21 GMT

Hello,

i have a problem. I want to include another JavaScript in my Extension. In HTML i do this:

<script src="markerwithlabel.js" type="text/javascript"></script>
<style type="text/css">
   .labels {
     color: black;
     background-color: transparent;
     font-family: "Arial", sans-serif;
     font-size: 15px;
     font-weight:bold;
     text-align: center;
     width: 40px;
     white-space: nowrap;
   }
</style>
<script type="text/javascript">

Now i want to include the markerwithlabel.js into my Extension script.js.

var QVGlobal;
var cssref = document.createElement("link");
cssref.setAttribute("rel", "stylesheet");
cssref.setAttribute("type", "text/css");
cssref.setAttribute("href", qva.Remote + "?public=only&name=Extensions/Finale/styles.css");
document.getElementsByTagName("head")[0].appendChild(cssref);
Qva.LoadScript ("http://maps.google.com/maps/api/js?sensor=false&callback=initialize");
function initialize() {
    Qva.AddExtension('Finale', function() {    
    //Write HTML-Page
        var html=""; 
        html+="<div id='map_canvas' style='width:100%; height:100%;'></div>";  
      this.Element.innerHTML = html;
     QVGlobal=this; 
     mapsLoaded();
  },true);
}
function mapsLoaded(){

Where I must include the other JavaScript. In my Extension Folder (.qar) i habe the following:

- Definition.xml

- script.js (the above code)

- Icon.png

- Icon2.png

- Properties.qvpp

- styles.css

- markerwithlabel.js (this i want to include in my script.js)

Thank for help

JavaScript include

Mon, 19 Sep 2011 14:46:02 GMT

That work:

Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");

Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js");

Re: JavaScript include

Brian_Munz — Mon, 19 Sep 2011 14:53:23 GMT

Hi.

Adding a js file is simple. You can do so with the following syntax in your example, you just need to include it before you use it in your extension like follows:

function initialize(){
     Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js", function() {
          Qva.AddExtension('Finale', function(){
               //Begin extension code.
          });
     });
}

The best practice, though would be to do the JS include at the top of your Script.js and initialize the "initialize" function after the js is included. But this will work too.

BTW, if you had wanted to add multiple JS files, you can nest them like this:

Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js", function() {
     Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/<<some other file>>.js", function() {
          //initialize extension
     });
});

Also, you can more easily add CSS files to your extension with the Qva.LoadCss function:

Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");

Thanks, let me know if this works.

Re: JavaScript include

Brian_Munz — Mon, 19 Sep 2011 14:56:37 GMT

It's best to include the file as I listed below in order to ensure that the JS has fully loaded before the extension runs and potentially tries to use JS that is not fully loaded yet. With the example below it waits until the JS is loaded before proceeding, ensuring all JS will be there despite load speed.

Re: JavaScript include

Mon, 19 Sep 2011 15:04:25 GMT

When i do this:

Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");

Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js");

Qva.LoadScript ("http://maps.google.com/maps/api/js?sensor=false&callback=initialize");

function initialize() {

Then it works. But i only have one problem, i have the following code in my html page on my localhost and it works.

function codeAddress() {

var address = document.getElementById("address").value;

var image = 'Kanne.png';

alert(address);

geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setZoom(15);

map.setCenter(results[0].geometry.location);

var marker1 = new MarkerWithLabel({

position: results[0].geometry.location,

map: map,

draggable: false,

raiseOnDrag: false,

labelContent: "82018",

labelAnchor: new google.maps.Point(3, 30),

labelClass: "labels", // the CSS class for the label

labelInBackground: false,

icon:image

});

}

But when i do this in QlikView the image will not be show. Any ideas?

Re: JavaScript include

Brian_Munz — Mon, 19 Sep 2011 15:12:55 GMT

In QlikView, the image also needs to be loaded similar to JS and CSS files with the full path. So for example, the image path should perhaps be:

var image = '/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/Kanne.png';

Re: JavaScript include

Mon, 19 Sep 2011 15:19:11 GMT

Thank you, it works! I´m so happy

JavaScript include

Tue, 29 May 2012 14:37:55 GMT

Hello, you have to post the QAR qvw and a sample of your extension?

Re: JavaScript include

alec1982 — Fri, 29 Jun 2012 21:09:35 GMT

Hi guys, Anybody can post a smaple of using JS in QVW?

Thxs,