Initial Settings & Connecting to your Qlik Site

Settings
All Motor Mashups include a settings/index.js file in the src folder. Here, you can edit some initial settings of your mashup, including connection to your Qlik app and some theming. You can find an example of this below.
Settings file Example
1
// Settings/index.js
2
​
3
export const footer = {
4
  footerText: "Copyright Motor © 2021",
5
};
6
​
7
export const qlikConfig = {
8
  //Enter your Qlik config here..
9
  host: "juno-ui.eu.qlikcloud.com", // Qlik Sense Host
10
  secure: true, // Whether your host is secure of not (HTTPS / HTTP)
11
  port: null, // Qlik Sense site port
12
  prefix: "", // Prefix
13
  appId: "0294cf88-eb02-484a-b315-cf06b45ac347", // Application Id
14
  webIntId: "4Tx-ydWxSQEM_q1ajlYBVzGgVUVJUo-i", // Web Integration Id, for connection to Qlik cloud
15
  qcs: true, // whether you are connecting to a Qlik Cloud site or not
16
};
17
​
18
export const appSettings = {
19
  theme: "light", // light or dark
20
  showThemeSwitch: true, // Show the toggle to change theme
21
  
22
  /* Note that the login component is only available when connecting to Qlik cloud */
23
  
24
  logo: "/static/media/motor-red.99524ab9.png", // Path to logo used for the Login box
25
  logoHeight: "40px", // Login logo height
26
  logoWidth: "120px", // Login logo width
27
  buttonColor: '#FF7171', // Button color
28
  buttonFontColor: 'white', // Button font color
29
  body: "Please login to get started 🎉'", // Login text
30
  loginfontFamily: '"NoirPro", sans-serif', //Login & Not Connected modal font
31
  NotConnectedheader: "Connection lost", // Not Connected header text
32
  NotConnectedBody: "Please refresh to continue", // Not Connected body text 
33
};
34
​
Copied!
In this example, we have 3 objects that we are using in our application:
footer: To edit the footer text
qlikConfig: Used in the Motor component to connect to your Qlik Sense site
appSettings: Settings used both in the Motor component (to theme the Login & Not Connected components) and to change some theme settings of our mashup
Connecting to your Qlik Site
You can connect to your Qlik site by updating the qlikConfig object with the details of your Qlik Sense instance.
The Motor Component
The Motor component will use the qlikConfig and appSettings objects to connect to your Qlik Sense site and apply some customisations.
This is imported into the root of your React project, so you can find it in src/index.js. This will be looking something like the below. Note we are passing the config into our Motor component along with specific customisations to theme the Login & Not Connected components.
The Motor component will pass the connection to your Qlik app as context to all of the hooks in the @motor-js/engine package.
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
import { qlikConfig, appSettings } from "settings";
8
import Store from "store";
9
​
10
ReactDOM.render(
11
  <Motor 
12
    config={qlikConfig}
13
    logo={appSettings.logo}
14
    logoHeight={appSettings.logoHeight}
15
    logoWidth={appSettings.logoWidth}
16
    buttonColor={appSettings.buttonColor}
17
    buttonFontColor={appSettings.buttonFontColor}
18
    body={appSettings.body}
19
    loginfontFamily={appSettings.loginfontFamily}
20
    NotConnectedheader={appSettings.NotConnectedheader}
21
    NotConnectedBody={appSettings.NotConnectedBody}
22
  >
23
    <Store>
24
      <App />
25
    </Store>
26
  </Motor>,
27
  document.getElementById("root")
28
);
29
// If you want to start measuring performance in your app, pass a function
30
// to log results (for example: reportWebVitals(console.log))
31
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
32
reportWebVitals();
33
​
Copied!
Connecting to Qlik Sense Cloud
Please find an example below connecting to a Qlik Sense Cloud instance. You need to set the qcs property to true and add a webIntId generated from you QSC server.
1
​
2
import { Motor } from '@motor-js/core'
3
​
4
<Motor
5
  config={{
6
    host: 'qlikhost.eu.qlikcloud.com',
7
    secure: true,
8
    port: null,
9
    prefix: '',
10
    appId: '39e218c1-42ee-4f38-9451-1b8f850505d5',
11
    webIntId: '...',
12
    qcs: true,
13
  }}>
14
>
15
// ...
16
</Motor>
Copied!
Hosting Externally, pointing to Qlik Sense Enterprise
Motor currently doesn't handle authentication to Qlik Sense Enterprise. You will need to configure this yourself depending on your choice of authentication method. You can see an example of this below:
GitHub - motor-js/qs-custom-auth-motor: Example custom authentication using motor
GitHub
For more details of how to connect to your Qlik Site, see Motor.
Having trouble connecting? Send our support team a note at [email protected]!

Mashup Templates - Previous

Getting Started

Next - Mashup Templates

Templates

Last modified 2mo ago

Copy link

Contents

Settings

Settings file Example

Connecting to your Qlik Site

The Motor Component

Connecting to Qlik Sense Cloud

Hosting Externally, pointing to Qlik Sense Enterprise