Showcase

Getting Started#

How Motor Authenticates#

Out of the box, Motor leverages Qlik's default windows authentication mechanism on the Central virtual proxy. If you are using any other authentication mechanism, please see the Custom Authentication section below.

Motor handles authentication to your on-premise site via re-direct. Once the user hits your mashup URL, they will be directed to a file, which you will upload in the QMC's Content Library. Before loading this resource, the user will be prompted to log in. Once logged in, the user will hit the file and be redirected back to the mashup with the session cookie. As a result, the user will be authenticated to view all the content in the mashup.

Uploading Your Redirect File#

Now that you understand how Motor authenticates, we can start by uploading a redirect file.

Start by creating a html file with the below contents.

html
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Document</title>
6
</head>
7
<body>
8
    <!-- The below URL should be where your mashup is hosted -->
9
    <script>location.href="http://localhost:3000"</script>
10
</body>
11
</html>

Next, navigate to the QMC of your Qlik Sense site and select Content libraries. Upload the html file to the Default section.

Review Settings on your Central Virtual Proxy#

On your Central Virtual Proxy (Virtual Proxy -> central proxy (Default) in QMC) you will need to add your mashup URL to the whitelist.

You will also need to add the following to the Additional Response Headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

Install via npm#

Once your Qlik Sense site is configured, you can start by installing Motor via npm into your React project.

js
1
npm i @motor-js/engine

Usage#

Then, at the root of your project wrap your application with the Motor component. This handles connection to the Qlik engine and is needed for any of the hooks or components to work.

jsx
1
// 1. Import the Motor component
2
import { Motor } from @motor-js/engine
3


4
function App() {    
5
  return (      
6
    // 2. Use at the root of your project       
7
    <Motor 
8
      config={{
9
          host: "<Your Qlik Site URL>",
10
          secure: true,
11
          port: 19077,
12
          prefix: "",
13
          appId: "<Your applic>",
14
          redirectFileName: "auth.html",
15
          qsServerType: "onPrem",
16
      }}
17
    >           
18
      <App />
19
    </Motor>    
20
  )
21
}

Next, import the hooks or components into your project and you are good to go. In the below example we are extracting data from the useList hook. 

jsx
1
import { useList } from "@motor-js/engine"
2


3
const Filter = () => {
4
    
5
    const dimension = ['Country'];
6


7
    const {
8
      listData,
9
    } = useList({
10
      dimension,
11
    });
12
    
13
    console.log(listData);
14


15
    return (
16
    <div></div>
17
    );
18


19
};

Custom Authentication#

If you are using any custom authentication module with Qlik Sense Enterprise, you will need to handle authentication yourself and then pass the engine object to the Motor component, once connected.

You can find an example React project below. Once you've connected to your engine instance, you can pass the returned object to your Motor component.

Getting Started
How Motor Authenticates
Uploading Your Redirect File
Review Settings on your Central Virtual Proxy
Install via npm
Usage
Custom Authentication