Showcase

Getting Started#

Install via npm#

The fastest way to get started is to install via npm.

js
1
npm i @motor-js/engine

Usage#

Start by wrapping your application with the Motor component, at the root of your project. This handles connection to the Qlik engine and is needed for any of the hooks to work.

You can either set the configuration to your Qlik site directly in this component, or pass the engine object (useful if you are handling custom authentication and connection).

jsx
1
// 1. Import the Motor component
2
3
import { Motor } from @motor-js/engine
4
5
function App() {
6
return (
7
// 2. Use at the root of your project
8
<Motor config={
9
host: "myqliksite.qlik.com",
10
secure: true,
11
port: 433,
12
prefix: "",
13
appId: "myAwesomeApp"
14
}
15
>
16
<App />
17
</Motor>
18
)
19
}

Next, import the hooks or components into your project and you are good to go. In the below example we are extracting data from the useList hook.

jsx
1
import { useList } from "@motor-js/engine"
2
3
const Filter = () => {
4
5
const dimension = ['Country'];
6
7
const {
8
listData,
9
} = useList({
10
dimension,
11
});
12
13
console.log(listData);
14
15
return (
16
<div></div>
17
);
18
19
};

Usage with Qlik Sense Cloud#

If you are connecting to a Qlik cloud SAAS instance, your configuration will look slightly different.

We need to set the qcs entry to true and also add the web integration id, generated in your Qlik site.

jsx
1
import { Motor }from '@motor-js/engine'
2
3
<Motor
4
config={{
5
host: 'motor.eu.qlikcloud.com',
6
secure: true,
7
port: null,
8
prefix: '',
9
appId: '39e218c1-42ee-4f38-9451-1b8f850505d5',
10
webIntId: '...',
11
qcs: true,
12
}}>
13
>
14
// ...
15
</Motor>

For more information on how to generate your first web integration id in Qlik SAAS, head to the Qlik docs.

Usage with Qlik Sense Enterprise (On Prem)#

If you are using Qlik Sense Enterprise, you will need to handle authentication to the Engine yourself.

You can find an example React project below. Once you've connected to your engine instance, you can pass the returned object to your Motor component.

Getting Started