2 Replies Latest reply: Aug 21, 2018 1:02 PM by vemuru mohan kumar RSS

    Export !!!!

    vemuru mohan kumar

      Hi ,

       

       

      I am using Object container from qlik branch.

       

      But now there are no object  export option in this container.

       

      please suggest how to add customized export functionality.

        • Re: Export !!!!
          vemuru mohan kumar

          /*globals define*/

          define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {

          'use strict';

          $( "<style>" ).html( cssContent ).appendTo( "head" );

           

           

          function getAppBaseURL () {

            var config = {

          host: window.location.hostname,

          prefix: window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf("/extensions") + 1),

          port: window.location.port,

          isSecure: window.location.protocol === "https:"

            };

            // Open a connection to QRS

            var global = qlik.getGlobal(config);

           

           

            var isDesktop = (config.port == "4848");

            var appPathEncoded = "";

           

           

            // Get the app path for Qlik Sense Desktop

            if (isDesktop) {

          var app = qlik.currApp(this);

          var applicationId = app.id;

          if(applicationId!=null){           

            applicationId = applicationId.slice(0, applicationId.lastIndexOf("\\")+1);

            appPathEncoded = encodeURIComponent(applicationId);

          };

            }

           

           

            return (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + "/sense/app/" + appPathEncoded;

          };

           

           

           

           

          function createRows ( rows, dimensionInfo ) {

          var html = "";

          var ImgURL="/extensions/QSTable/images/";

           

          var AppBaseURL = getAppBaseURL();

           

          rows.forEach( function ( row ) {

          html += '<tr>';

          row.forEach( function ( cell, key ) {

          if ( cell.qIsOtherCell ) {

          cell.qText = dimensionInfo[key].othersLabel;

          }

          html += "<td class='";

          if ( !isNaN( cell.qNum ) ) {

          html += "numeric ";

          }

          if (cell.qText === undefined) {

          html += "'> </td>";

          }

          else

          {

            if(~cell.qText.toLowerCase().indexOf('<img>')){

          html += "image'"+'> <img src="'+ ImgURL + cell.qText.slice(5, cell.qText.length) + '" height=' + '15' + '></td>';

            }

            else if(~cell.qText.toLowerCase().indexOf('<url>')){

          var urlmark = cell.qText.toLowerCase().indexOf('<url>');

          html += "'"+'> <a href="' + cell.qText.slice(urlmark+5, cell.qText.length) + '" target="_blank">' + cell.qText.slice(0,urlmark) + '</a></td>';

            }

            else if(~cell.qText.toLowerCase().indexOf('<app>')){

          var urlmark = cell.qText.toLowerCase().indexOf('<app>');

          html += "'"+'> <a href="' + AppBaseURL + cell.qText.slice(urlmark+5, cell.qText.length) + '" target="_blank">' + cell.qText.slice(0,urlmark) + '</a></td>';

            }

            else {

          html += "'>" + cell.qText + '</td>';

            };

          };

          } );

          html += '</tr>';

          } );

          return html;

          }

           

          /**

          * Set column to be first in sort order

          * @param self The extension

          * @param col Column number, starting with 0

          */

          function setSortOrder ( self, col ) {

          //set this column first

          var sortorder = [col];

          //append the other columns in the same order

          self.backendApi.model.layout.qHyperCube.qEffectiveInterColumnSortOrder.forEach( function ( val ) {

          if ( val !== sortorder[0] ) {

          sortorder.push( val );

          }

          } );

          self.backendApi.applyPatches( [{

          'qPath': '/qHyperCubeDef/qInterColumnSortOrder',

          'qOp': 'replace',

          'qValue': '[' + sortorder.join( ',' ) + ']'

          }], true );

          }

           

           

          /**

          * Reverse sort order for column

          * @param self The extension

          * @param col The column number, starting with 0

          */

          function reverseOrder ( self, col ) {

          var hypercube = self.backendApi.model.layout.qHyperCube;

          var dimcnt = hypercube.qDimensionInfo.length;

          var reversesort = col < dimcnt ? hypercube.qDimensionInfo[col].qReverseSort :

          hypercube.qMeasureInfo[col - dimcnt].qReverseSort;

          self.backendApi.applyPatches( [{

          'qPath': '/qHyperCubeDef/' +

          ( col < dimcnt ? 'qDimensions/' + col : 'qMeasures/' + ( col - dimcnt ) ) +

          '/qDef/qReverseSort',

          'qOp': 'replace',

          'qValue': ( !reversesort ).toString()

          }], true );

          }

           

           

          function formatHeader ( col, value, sortorder ) {

          var html =

          '<th data-col="' + col + '">' + value.qFallbackTitle ;

          //sort Ascending or Descending ?? add arrow

          if(value.qSortIndicator === 'A' || value.qSortIndicator === 'D') {

          html += (value.qSortIndicator === 'A' ? "<i class='icon-triangle-top" : "<i class='icon-triangle-bottom");

          if ( sortorder && sortorder[0] !== col ) {

          html += " secondary";

          }

          html += "'></i>";

          }

          html += "</th>";

          return html;

          }

           

           

          return {

          initialProperties: {

          qHyperCubeDef: {

          qDimensions: [],

          qMeasures: [],

          qInitialDataFetch: [{

          qWidth: 10,

          qHeight: 50

          }]

          }

          },

          definition: {

          type: "items",

          component: "accordion",

          items: {

          dimensions: {

          uses: "dimensions",

          min: 1

          },

          measures: {

          uses: "measures",

          min: 0

          },

          sorting: {

          uses: "sorting"

          },

          settings: {

          uses: "settings"

          }

          }

          },

          snapshot: {

          canTakeSnapshot: true

          },

          paint: function ( $element, layout ) {

          var html = "<table><thead><tr>", self = this,

          morebutton = false,

          hypercube = layout.qHyperCube,

          rowcount = hypercube.qDataPages[0].qMatrix.length,

          dimcount = hypercube.qDimensionInfo.length,

          colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length,

          sortorder = hypercube.qEffectiveInterColumnSortOrder;

           

           

          //render titles

          // hypercube.qDimensionInfo.forEach( function ( cell ) {

          //html += '<th>' + cell.qFallbackTitle + '</th>';

          // } );

                      hypercube.qDimensionInfo.forEach(function(value, col) {

                          html += formatHeader(col, value, sortorder);

                      });

           

           

          // hypercube.qMeasureInfo.forEach( function ( cell ) {

          //html += '<th>' + cell.qFallbackTitle + '</th>';

                      hypercube.qMeasureInfo.forEach(function(value, col) {

                          html += formatHeader(col + dimcount, value, sortorder);

          } );

          html += "</tr></thead><tbody>";

          //render data

          html += createRows( hypercube.qDataPages[0].qMatrix, hypercube.qDimensionInfo);

          html += "</tbody></table>";

          //add 'more...' button

          if ( hypercube.qSize.qcy > rowcount ) {

          html += "<button class='more'>More...</button>";

          morebutton = true;

          }

          $element.html( html );

          if ( morebutton ) {

          $element.find( ".more" ).on( "qv-activate", function () {

          var requestPage = [{

          qTop: rowcount,

          qLeft: 0,

          qWidth: colcount,

          qHeight: Math.min( 50, hypercube.qSize.qcy - rowcount )

          }];

          self.backendApi.getData( requestPage ).then( function ( dataPages ) {

          rowcount += dataPages[0].qMatrix.length;

          if ( rowcount >= hypercube.qSize.qcy ) {

          $element.find( ".more" ).hide();

          }

          var html = createRows( dataPages[0].qMatrix, hypercube.qDimensionInfo );

          $element.find( "tbody" ).append( html );

          } );

          } );

          }

          $element.find('.selectable').on('qv-activate', function() {

                              if (this.hasAttribute("data-value")) {

                                  var value = parseInt(this.getAttribute("data-value"), 10),

                                      dim = parseInt(this.getAttribute("data-dimension"), 10);

                                  self.selectValues(dim, [value], true);

                                  $element.find("[data-dimension='" + dim + "'][data-value='" + value + "']").toggleClass("selected");

                              }

                          });

                          $element.find('th').on('qv-activate', function() {

                              if (this.hasAttribute("data-col")) {

                                  var col = parseInt(this.getAttribute("data-col"), 10);

                                  setSortOrder(self, col);

                              }

                          });

                          $element.find('th i').on('qv-activate', function() {

                              var parent = this.parentNode;

                              if (parent.hasAttribute("data-col")) {

                                  var col = parseInt(parent.getAttribute("data-col"), 10);

                                  reverseOrder(self, col);

                              }

                          });

          return qlik.Promise.resolve();

          }

          };

          } );

           

           

           

          ======================

           

          this is the code.....how to enhance

          • Re: Export !!!!
            Quy Nguyen

            If you dont have to present multi chart per container tab, try this great extension from ClimerAB :https://github.com/ClimberAB/ClimberContainer