Motor
The component for connecting to your Qlik Sense site.
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 methodimport 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();
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")
);
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
};
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 1yr ago