6 Replies Latest reply: Feb 6, 2015 4:22 AM by Bob Slattery RSS

    HTML Select in Extensions

    Nicole Smith

      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
          Erik Wetterberg

          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

              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
                  Andrew Pettit

                  Nicole,

                   

                  Are you putting this in your _done or _init?

                    • Re: Re: HTML Select in Extensions
                      Nicole Smith

                      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[i] = new Array(2);

                              }

                       

                              //Getting the data from QlikView

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

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

                       

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

                                  row[j][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
                          kenneth van beek

                          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

                    Why? What is this code doing?