10 Replies Latest reply: Dec 12, 2017 9:50 AM by Liam Hanninen 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