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: [e-mail] & 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