7 Replies Latest reply: Sep 12, 2017 12:02 PM by Mathias Schindler RSS

    Reference hypercube or chart values in JavaScript

    Liam Hanninen

      Hi all,

       

      We hope to do something very cool with Qlik Sense Mash-ups. We want to allow users to enter text into an empty text field that's within a table. And then hope to  reference some of that other data on that same row in the table where they entered that text in the JavaScript/html input/form to be sent as a POST request to an API.

       

      This would allow them to post to our API via Qlik! So I think I have two questions:

      1) How to make a text input box within a qlik sense table OR if this is not possible I think I'll just have to use hypercube to build an html table that would have an input box.

       

      2) How to use the Qlik API to pull contents from that specific row in the Qlik table into a POST json. Again if this is not possible I'll have to go from the ground-up to build a html table.

        • Re: Reference hypercube or chart values in JavaScript
          Mathias Schindler

          Hello Liam,

           

          I thought this was an interesting use case so I built a little POC for you:

          var app = qlik.openApp('456942a2-d3e2-40a5-bad6-985e80294f05', config);
          
          app.getObject('QV01', 'BSNjEu').then(model => {
          console.log('loaded:', model);
          
          var table = qlik.table(model);
          
          // set timeout for now, some invalidated event would probably be a better fit
          setTimeout(() => {
          console.log('table:', table);
          
          $('#QV01 [tid] .qv-st-data table tbody tr').each((i, tr) => {
          var input = $('<input type="text" class="lui-input"/>');
          var data = {};
          
          $(tr).find('td').each((i, td) => {
          td = $(td);
          
          // get cell object from angular scope
          var cell = angular.element(td).scope().cell;
          
          if(cell.type == undefined || cell.dataColIx < 0)
          return;
          
          var header = table.headers[cell.dataColIx];
          var column = header.field ? header.field.fldname : header.qFallbackTitle;
          
          // create property for this cell
          // using either field name or table header
          // and append value to row data object
          data[column] = cell.text;
          
          // append input field after
          var isLast = table.colCount == td.index() + 1;
          
          if(isLast) {
          td.after(input);
          
          input.wrap($('<td class="qv-st-data-cell"><div class="qv-st-value"></div></td>'));
          }
          });
          
          // save data for later use
          input.data(data);
          
          // and assign change event handler
          input.change(function(){
          var value = $(this).val();
          var data = $(this).data();
          
          data.inputValue = value;
          
          console.log('sending data: ', data);
          });
          });
          }, 1000);
          

           

          This should work for straight tables but the're probably some issues as this is just a small example. I also don't know how this will perform on very big tables.

           

          example.jpg

          Hope this helps you,

           

          Mathias

            • Re: Reference hypercube or chart values in JavaScript
              Liam Hanninen

              Mathias,

               

              Very cool! Thanks for taking a stab at it. I will try this later today. Two quick questions that are probably obvious to you but:

              1) When I try to replicate this can I just switch out the app id and object id for the table? Or do I need to change anything else?

              2) It looks like var data is what would be the content from the text box. Is that correct?

                • Re: Reference hypercube or chart values in JavaScript
                  Mathias Schindler

                  Hello Liam,

                   

                  Yes you can just switch the app and object id.

                   

                  No, the data variable contains the row-data for the current input field (should've probably named the variable on line 14 rowData in the first place ).

                   

                  You can see the content of the data variable in the screenshot just below the code snippet. Thats the output of the "console.log" statement on line 53.

                   

                  Line 12 to 31 are responsible for looping over the table rows and their columns creating a javascript object for every row in the following form:

                  {

                  "FIELD NAME1 OR COLUMN HEADER1": "VALUE OF COLUMN1",

                  "FIELD NAME2 OR COLUMN HEADER2": "VALUE OF COLUMN2",

                  }

                   

                  Line 34 to 41 are appending a <td> element containing the input field after the last data column and line 44 uses the jQuery .data method to append custom data to an html element (think of data-blabla attributes).

                   

                  Line 47-54 assigns an event handler for the changed event (will be triggered after you tab out of the textbox), extracts the object that was set in line 44 and creates a property "inputValue" with the <input>-elements current value.

                   

                  So the data variable contains probably everything you want to send to your REST API.

                   

                  Mathias