Motor
The component for connecting to your Qlik Sense site.

Usage

The Motor component handles connection to the Qlik engine. For the hooks in this package to work, you need to set this up at the root of your application.
Go to the root of your application and do the following:
1
// 1. Import the Motor component
2
import { Motor } from @motor-js/engine
3
4
function App() {
5
6
return (
7
// 2. Use at the root of your project
8
<Motor
9
config={{
10
host: "localhost",
11
secure: false,
12
port: 19077,
13
prefix: "",
14
appId: 'myAwesomeApp',
15
}}>
16
<App />
17
</Motor>
18
)
19
}
20
Copied!
In the above example, we are connecting to a Qlik site, hosted on localhost port 19077, to an app called myAwesomeapp.
If you are using Create React App, you are advised to set this up in index.js or index.tsx, in the ReactDom.render method

Example set up in Create React App

1
import React from "react";
2
import ReactDOM from "react-dom";
3
import { Motor } from "@motor-js/engine";
4
5
import reportWebVitals from "./reportWebVitals";
6
import App from "./containers/App";
7
8
// In this example, qlikConfig contains our config object
9
import { qlikConfig } from "settings";
10
11
ReactDOM.render(
12
// Wrap App inside Motor
13
<Motor config={qlikConfig}>
14
<App />
15
</Motor>,
16
document.getElementById("root")
17
);
18
19
reportWebVitals();
Copied!

Example customised login, with data from an appSettings file

index.js

1
import React from "react";
2
import ReactDOM from "react-dom";
3
import { Motor } from "@motor-js/engine";
4
5
import reportWebVitals from "./reportWebVitals";
6
import NextApp from "./NextApp";
7
import { qlikConfig, appSettings } from "settings";
8
import Store from "store";
9
10
ReactDOM.render(
11
12
<Motor
13
config={qlikConfig}
14
logo={appSettings.logo}
15
logoHeight={appSettings.logoHeight}
16
logoWidth={appSettings.logoWidth}
17
buttonColor={appSettings.buttonColor}
18
buttonFontColor={appSettings.buttonFontColor}
19
body={appSettings.body}
20
bodySub={appSettings.bodySub}
21
loginfontFamily={appSettings.loginfontFamily}
22
NotConnectedheader={appSettings.NotConnectedheader}
23
NotConnectedBody={appSettings.NotConnectedBody}
24
>
25
<Store>
26
<NextApp />
27
</Store>
28
</Motor>,
29
document.getElementById("root")
30
);
Copied!

settings.js

1
export const appSettings = {
2
/* For the settings below, note that the login component is only available when connecting to Qlik cloud */
3
logo: "/static/media/motor-red.99524ab9.png", // Path to logo used for the Login box
4
logoHeight: "40px", // Login logo height
5
logoWidth: "120px", // Login logo width
6
buttonColor: "#FF7171", // Button color
7
buttonFontColor: "white", // Button font color
8
body: "Please login to get started 🎉 ", // Login text
9
bodySub: "Try user: [email protected] & password: MotorDemo!",
10
loginfontFamily: '"NoirPro", sans-serif', //Login & Not Connected modal font
11
NotConnectedheader: "Connection lost", // Not Connected header text
12
NotConnectedBody: "Please refresh to continue", // Not Connected body text
13
};
14
Copied!

Props

Prop
Description
Options/Example
config
Configuration object to connect to your Qlik site
{ host: string, secure: boolean, port: number, prefix: string, appId: string, qsc: boolean, webIntId: string }
engine
Qlik engine object, output of the useEngine hook. If you are not setting the config prop, you can pass the Qlik engine object directly via this prop. This is particularly useful if you are connecting to your Qlik site server side (using JWT or certificates).
object
licenseKey
License key to remove Motor watermark
string
logo
Path to logo to appear in the login component
string
logoHeight
Logo height
string
logoWidth
Logo width
string
buttonColor
Color of the buttons on both the Login and Not Connected components
string
buttonFontColor
Font color of the buttons on both the Login and Not Connected components
string
header
Login header test
string
body
Login body text
string
bodySub
Login body text which appears under the body text
string
loginfontFamily
Login & Not Connected modal font
string
NotConnectedheader
Header text in the Not Connected modal
string
NotConnectedBody
Body text in the Not Connected modal
string
Last modified 3mo ago