nebula.js/docs/sn-using-data.md

---
id: sn-using-data
title: Consuming data
---

## Access layout

You can access the _layout_ of the Generic Object through a set of predefined hooks.

### useLayout

`useLayout` returns the evalutated layout of the Generic Object's properties:

```js
import { useLayout } from '@nebula.js/supernova';

export default function () {
  return {
    qae: {
      properties: {
        qHyperCubeDef: {},
        simpleMath: {
          qValueExpression: {
            qExpr: '1+1',
          },
        },
      },
    },
    component() {
      const layout = useLayout();
      console.log(layout); // { qHyperCube: {/* HyperCube Layout */}, simpleMath: 2 }
    },
  };
}
```

You should `useEffect` when observing changes on the `layout`:

```js
const layout = useLayout();

useEffect(() => {
  // do some heavy update
}, [layout]);
```

### useAppLayout

`useAppLayout` returns the [NxAppLayout](https://core.qlik.com/services/qix-engine/apis/qix/definitions/#nxapplayout) you are currently connected to:

```js
import { useAppLayout } from '@nebula.js/supernova';

export default function () {
  return {
    component() {
      const appLayout = useAppLayout();
      console.log(appLayout); // { qTitle: 'App title', qLocaleInfo: {/* */ } }
    },
  };
}
```

The most common use case for the app layout is to access `qLocaleInfo` which contains locale details selected by the app owner and should be used to format numbers.

## Models

In addition to the layouts of the app and generic object, you have full access to the APIs generated by `enigma.js`. These APIs are generated from a JSON-RPC schema and unlocks the full power of Qlik's Associate Engine.

### useModel

`useModel` returns the generated API of the [Generic Object](https://core.qlik.com/services/qix-engine/apis/qix/genericobject/) of your supernova:

```js
import { useModel } from '@nebula.js/supernova';

export default function () {
  return {
    component() {
      const model = useModel();
      model.getInfo().then((info) => {
        console.log(info);
      });
    },
  };
}
```

Common operations in this API is to:

- make selections with `beginSelections`, `selectHyperCubeValues` and `endSelections`
- get more data with `getHyperCubeData`

### useApp

`useApp` returns the generated API of the [Doc](https://core.qlik.com/services/qix-engine/apis/qix/doc/) your supernova belongs to:

```js
import { useApp } from '@nebula.js/supernova';

export default function () {
  return {
    component() {
      const app = useApp();
      app.clearAll();
    },
  };
}
```

Common operations in this API is to:

- modify the selection stack with `clearAll`, `back`, `forward`
- create and apply bookmarks with `createBookmark` and `applyBookmark`

### useGlobal

`useGlobal` returns the generated API of the [Global](https://core.qlik.com/services/qix-engine/apis/qix/global/) your supernova belongs to:

```js
import { useGlobal } from '@nebula.js/supernova';

export default function () {
  return {
    component() {
      const g = useGlobal();
      g.engineVersion().then((v) => {
        console.log(v);
      });
    },
  };
}
```

Common operations in this API is to:

- get a list of apps with `getDocList`