Data binding: Hypercubes

Dimensions and measures defined in your widget object result in an internal data table, a so-called hypercube, that is being exposed to the object, just like for any other standard Qlik Sense object. This data table can be used in your widget. There are two ways of binding your HTML code to the internal data table of your widget:

  • The default way: access the hypercube directly
  • Using shorthand notation: less complex way to work with the data
Note: There is no difference in performance between the two ways.

Accessing the hypercube directly: the default way

There are some basic objects exposed to the current scope of your widget that you can use.

Object Description
layout.qHyperCube Returns the representation of the hypercube, that is, the data table exposed to your widget.
layout.qHyperCube.qDimensionInfo Gets the object array of defined dimensions.
layout.qHyperCube.qMeasureInfo Gets the object array of defined measures.
layout.qHyperCube.qDataPages[0].qMatrix Gets the object array of the data table.
layout.qHyperCube.qDataPages[0].qMatrix[0] Gets the object array of the first row of the data table.
layout.qHyperCube.qDataPages[0].qMatrix[0][0] Gets the object array of the first column in the first row of the data table.

Example: iterating through dimensions and measures

<table border="1">
  <thead>
    <tr>
      <th ng-repeat="dim in layout.qHyperCube.qDimensionInfo">{{dim.qFallbackTitle}}</td>
      <th ng-repeat="mea in layout.qHyperCube.qMeasureInfo">{{mea.qFallbackTitle}}</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in layout.qHyperCube.qDataPages[0].qMatrix">
      <td ng-repeat="col in row">
        {{col.qText}}
      </td>
    </tr>
  </tbody>
</table>

Binding data using shorthand notation

You can use a less complex shorthand notation when working with the hypercube. You access the Table API from within the widget.

Object Description
data.rows

Gets the object array of all rows, including measures and dimensions.

data.headers Gets the object array of all headers, including measures and dimensions.
data.totals Gets the total information for headers.
data.rowCount

Returns the total number of rows of the qHyperCube, including rows not fetched by the server.

data.colCount

Returns the total number of columns of the qHyperCube.

Example: iterating through dimensions and measures using shorthand notation

<table border="1">
    <thead>
        <tr>
            <th ng-repeat="head in data.headers track by $index">{{head.qFallbackTitle}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data.rows track by $index">
            <td ng-repeat="cell in row.cells track by $index">{{cell.qText}}</td>
        </tr>
    </tbody>
</table>

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?