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

Accessing the hypercube directly: the default way

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

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.

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>