One of the most useful features of Qlik Sense for me when developing a front-end is how easy it is to paginate data. Any front-end developer knows that updating thousands of dom elements is not exactly ideal, because dom updates are slow. But Qlik Sense makes it so easy to avoid ever having to do that.


For instance, take a look at the location dropdown for the Solar Eclipse demo at https://webapps.qlik.com/solar-eclipse/index.html. There’s over 29,000 rows there! But, here’s the trick – there’s only ever 10 rows in the dom at any time, and when a user scrolls what’s actually happening is the dropdown is receiving new data from Qlik Sense.


To paginate data with Qlik Sense is pretty simple. With enigma.js you’ll just create your object, either a hypercube or a list object, like usual, but you don’t need to pass it any qInitialDataFetch attribute. Then anytime you need some data, you just call a method to get data. Which method you call depends on your object. For a straight hypercube, you’d just call getHyperCubeData method like below -

 

doc.createSessionObject({
  qInfo: {
    qType: "visualization"
  },
  qHyperCubeDef: {       
    qDimensions: [
      // qDimensions
    ],
    qMeasures: [
      // qMeasures
    ]
}).then((object) => {
  object.getHyperCubeData('/qHyperCubeDef', [
   // this will fetch 1 page of data, but you could request multiple pages by adding more qPages here
    {
      qTop: 0,
      qLeft: 1,
      qHeight: 2,
      qWidth: 10
    }
  ]).then((data) => {
    // do stuff with data
  });
});

 

If your hypercube is in pivot, stack, or tree mode, or if your object is a list object, you’ll have to use the corresponding method in place of getHyperCubeData, which you can find here https://help.qlik.com/en-US/sense-developer/September2017/Subsystems/EngineAPI/Content/Classes/GenericObjectClass/GenericObject-class.htm.

 

If you’re using the Capability APIs, while not technically supported, the same methods work with the object that is returned from the promise (not the layout returned in the callback).