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. Import the Motor component
import { Motor } from @motor-js/engine
function App() {
return (
// 2. Use at the root of your project
<Motor
config={{
host: "localhost",
secure: false,
port: 19077,
prefix: "",
appId: 'myAwesomeApp',
}}>
<App />
</Motor>
)
}
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

import React from "react";
import ReactDOM from "react-dom";
import { Motor } from "@motor-js/engine";
import reportWebVitals from "./reportWebVitals";
import App from "./containers/App";
// In this example, qlikConfig contains our config object
import { qlikConfig } from "settings";
ReactDOM.render(
// Wrap App inside Motor
<Motor config={qlikConfig}>
<App />
</Motor>,
document.getElementById("root")
);
reportWebVitals();

Example customised login, with data from an appSettings file

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Motor } from "@motor-js/engine";
import reportWebVitals from "./reportWebVitals";
import NextApp from "./NextApp";
import { qlikConfig, appSettings } from "settings";
import Store from "store";
ReactDOM.render(
<Motor
config={qlikConfig}
logo={appSettings.logo}
logoHeight={appSettings.logoHeight}
logoWidth={appSettings.logoWidth}
buttonColor={appSettings.buttonColor}
buttonFontColor={appSettings.buttonFontColor}
body={appSettings.body}
bodySub={appSettings.bodySub}
loginfontFamily={appSettings.loginfontFamily}
NotConnectedheader={appSettings.NotConnectedheader}
NotConnectedBody={appSettings.NotConnectedBody}
>
<Store>
<NextApp />
</Store>
</Motor>,
document.getElementById("root")
);

settings.js

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

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
Copy link
Outline
Usage
Example set up in Create React App
Example customised login, with data from an appSettings file
Props