topic Re: HTML Select in Extensions in QlikView

HTML Select in Extensions

Nicole-Smith — Mon, 26 Jan 2026 16:26:21 GMT

When trying to implement an HTML select in an extension object, I am getting some weird behavior.

1. When I make a selection in the dropdown list, then hit F5 to refresh my object, the selection that I made goes away.

2. When I try to alert out what is selected in the dropdown list, the alert returns nothing.

I have attached an example extension where this can be seen (the Definition.xml is actually from this post by Erik Wetterberg).

Has anyone else seen this odd behavior? If not, is there anyone that has gotten the HTML select to work in an extension?

Any comments/thoughts are greatly appreciated!

Thanks!

Re: HTML Select in Extensions

ErikWetterberg — Wed, 16 May 2012 11:44:45 GMT

Hi,

The select is used in the StreamChart extension, which as far as I can tell works fine. I include a copy.

You should not need to press F5 to refresh your object, when you change a property, the rendering function should be called automatically.

What sometimes causes problems is that properties are created when you add a object to the document. If you at a leter time add more properties to Definition.xml, they will not affect already created objects. You'll need to remove and recreate them for the changes to take palce.

Erik

Re: HTML Select in Extensions

Nicole-Smith — Wed, 16 May 2012 19:42:49 GMT

In case anyone else is looking for an answer to this...

What I didn't realize is that in order to use the HTML select, you need to include extra code in your script.js file:

if (Qva.Mgr.mySelect == undefined) {
    Qva.Mgr.mySelect = function (owner, elem, name, prefix) {
        if (!Qva.MgrSplit(this, name, prefix)) return;
        owner.AddManager(this);
        this.Element = elem;
        this.ByValue = true;
        elem.binderid = owner.binderid;
        elem.Name = this.Name;
        elem.onchange = Qva.Mgr.mySelect.OnChange;
        elem.onclick = Qva.CancelBubble;
    }
    Qva.Mgr.mySelect.OnChange = function () {
        var binder = Qva.GetBinder(this.binderid);
        if (!binder.Enabled) return;
        if (this.selectedIndex < 0) return;
        var opt = this.options[this.selectedIndex];
        binder.Set(this.Name, 'text', opt.value, true);
    }
    Qva.Mgr.mySelect.prototype.Paint = function (mode, node) {
        this.Touched = true;
        var element = this.Element;
        var currentValue = node.getAttribute("value");
        if (currentValue == null) currentValue = "";
        var optlen = element.options.length;
        element.disabled = mode != 'e';
        //element.value = currentValue;
        for (var ix = 0; ix < optlen; ++ix) {
            if (element.options[ix].value === currentValue) {
                element.selectedIndex = ix;
            }
        }
        element.style.display = Qva.MgrGetDisplayFromMode(this, mode);
    }
}

Once this code is included, you can call your text variables like you normally would (i.e. this.Layout.Text0, this.Layout.Text1, etc.).

Re: HTML Select in Extensions

andrewpettit — Fri, 07 Feb 2014 19:27:22 GMT

Nicole,

Are you putting this in your _done or _init?

Re: Re: HTML Select in Extensions

Nicole-Smith — Fri, 07 Feb 2014 21:04:04 GMT

I put it outside of everything, like this:

Qva.LoadScript("http://www.google.com/jsapi?callback=loadGoogleCoreChart", function () {

});

function loadGoogleCoreChart() {

    google.load('visualization', '1', {

        packages: ['corechart'],

        callback: googleCoreChartLoaded

    });

}

function googleCoreChartLoaded() {

    Qva.AddExtension('GooglePieChart', function () {

        //Declaring a two dimensional array (an array of arrays)

        var row = new Array(this.Data.Rows.length + 1);

        for (var i = 0; i <= this.Data.Rows.length; i++) {

            row = new Array(2);

        }

        //Getting the data from QlikView

        for (var j = 1; j <= this.Data.Rows.length; j++) {

            row[0] = this.Data.Rows[j - 1][0].text;

            var temp = this.Data.Rows[j - 1][1].text;

            row[1] = Number(temp);

        }

        //Changing the array to a data table

        var data = google.visualization.arrayToDataTable(row);

        //Instantiating and drawing the chart

        new google.visualization.PieChart(this.Element).draw(data, { chartArea: { left: 20, top: 20, width: "100%", height: "100%"} });

    });

}

//This is needed for the dropdown boxes (HMTL selects) to work

if (Qva.Mgr.mySelect == undefined) {

    Qva.Mgr.mySelect = function (owner, elem, name, prefix) {

        if (!Qva.MgrSplit(this, name, prefix)) return;

        owner.AddManager(this);

        this.Element = elem;

        this.ByValue = true;

        elem.binderid = owner.binderid;

        elem.Name = this.Name;

        elem.onchange = Qva.Mgr.mySelect.OnChange;

        elem.onclick = Qva.CancelBubble;

    }

    Qva.Mgr.mySelect.OnChange = function () {

        var binder = Qva.GetBinder(this.binderid);

        if (!binder.Enabled) return;

        if (this.selectedIndex < 0) return;

        var opt = this.options[this.selectedIndex];

        binder.Set(this.Name, 'text', opt.value, true);

    }

    Qva.Mgr.mySelect.prototype.Paint = function (mode, node) {

        this.Touched = true;

        var element = this.Element;

        var currentValue = node.getAttribute("value");

        if (currentValue == null) currentValue = "";

        var optlen = element.options.length;

        element.disabled = mode != 'e';

        //element.value = currentValue;

        for (var ix = 0; ix < optlen; ++ix) {

            if (element.options[ix].value === currentValue) {

                element.selectedIndex = ix;

            }

        }

        element.style.display = Qva.MgrGetDisplayFromMode(this, mode);

    }

}

Re: HTML Select in Extensions

Wed, 12 Nov 2014 14:53:00 GMT

Hi Nicole,

Thank you for sharing your solution!

But it only seems to work for a small part.. I was wondering if anyone/you has the same problem.

After placing your code, loading my extension, selecting a value from a dropdown I get the selected value in my "alert(dropdownSelection)", so thats ok!

But after hitting F5 to reload my webview and selecting a value from a dropdown I dont even get the box with my alert, I first have the hit a checkbox before my alert prompts with the value, and this is the value from before hitting F5. Whatever I do, it wont change the value anymore after hitting F5.

Did you had/have this problem too?

Thanks in advance!

Cheers, Kenneth

Re: HTML Select in Extensions

Fri, 06 Feb 2015 09:22:14 GMT

Why? What is this code doing?