Photo by Jonathan Borba on Unsplash

React Qlik Sense Mashups with motor js: Part 1

In this set of tutorials, we’re going to build a React Qlik Mashup with motor-js.

This first article will cover on the following:

• Create React App
• Install @motor-js/core and connect to a Qlik engine
• Mashup Layout
• Selections & Theming

Motor js is a React Framework for Qlik Sense mashups. It is a React library consisting of components, charts and utilities to speed up your mashup development.

Motor js is completely free for non-commerical use, you can find out more about the project below:

The React Framework for Qlik Sense Mashups | The React Framework for Qlik Sense Mashups

Step 1: Create a new React App (ensure you have npm version 5.2+ installed)

To check you have node and npm installed type the following in the terminal

node -v
npm -v

Getting started with React is easy, we’ll be using create-react-app in this example. Create React App creates a front end build pipeline including a dev server, that saves you from time consuming set-up tasks. Under the hood, it uses Babel and Webpack.

We will start by creating an application called my-mashup

npx create-react-app my-mashup

Once created, we can cd into the project and get started.

cd my-mashup
npm start

Step 2: Install @motor-js/core and connect to a Qlik engine

Firstly, let’s delete the App.css file and clear out the App.js file, which should leave us with the following code…

Next, return to the terminal and install the motor-js library and styled-components

npm i @motor-js/core styled-components

Motor js uses styled-components under to hood for it’s styling and theming framework, as such, it makes sense to use this for library in our application as well.

Now that the library is installed we are going to wrap our document with the Motor component. This handles two things:

1. Connection to a Qlik engine
2. Theming

Ok, let’s start with connecting to a Qlik engine. We’re going to connect to the Consumer Sales app on sense-demo Qlik site.

Firstly, navigate to the index.js file, import the Motor component from motor-js and complete the config to connect to Qlik.

We also need to add some code to index.css to ensure the grid takes up the max height of the page. Apply the height css as demonstrated below.

Step 3: Mashup Layout

Motor js comes with a number of layout components, which don’t require any connection to a Qlik engine. Their purpose is to make it easier and faster for you to build your dashboards.

We’ll start with the Grid component, based on css grid. It is a two-dimensional layout system and you can check out the full docs here. We are going to build a simple layout of four rows and one column and four components which will contain the content for each of those sections.

Let’s create a new folder in the root of our folder called components and four new files; FilterContent.jsx, FooterContent.jsx, HeaderContent.jsx & MainContent.jsx, which for now will just be empty functional react components. See below for an example of your HeaderContent.jsx file:

Your App.js file should now be looking like the below. We’re importing the Grid component from motor-js and our newly created React components.

Our React App is still looking rather empty, but if you open the Chrome developer tools and inspect the page, you’ll be able to see our Grid in action.

Next, let’s use the Grid areas that we’ve defined. Import the Box component into HeaderContent.jsx and set the area prop to ‘header’. We’ll also change the backgroundColor prop to ‘brand’, and align our items in the middle.

Setting a color prop to ‘brand’ in the motor-js library will pick up the brand color from the base theme. Later in this article, I’ll demonstrate how to we can edit this. You can find more on motor-js theming here.

We can quickly load the name of our app into our mashup with the SmartHeading component. Change the type prop to appName and add some further props that you can see below.Your HeaderContent component and React app should now be looking like this:

Step 4: Selections and Theming

So far so good? Next up we’re going to add some Filters to our FilterContent component.

This is very straightforward, the Motor component passes an Engine Context to all of the components in the library, so all you need to do is import and use the component. The Filter component needs label and dimension props as below…

We can also add a CurrentSelections box to our MainContent.jsx to track our context when making selections.

Great! Now we have some objects and can make selections in our mashups!

On to Theming. Motor js has a base theme which you can merge with, to change colors and styles. We can do all of this in our Motor component, so back to our index.js file…

We are going to add a Theme prop and make changes to our base object, these changes will be automatically merged, so you only need to pass what you want to change. Let’s change the brand color to blue and make some other style and color changes.

In the code below, we have edited the theme object and changed the following:

• The brand color to ‘#0E86D4’
• The selections object item background color to white
• The filter title and dropdown borders to white

Our dashboard is now looking like this:

Documentation for our entire theme object can be found on the Theme, Component and Visualisation pages in our docs. You can also import the base theme from the library and log it to the console to inspect.

import { base } from '@motor-js/core'
...
console.log(base)

That’s all for Part 1!

In the next post, we’ll be finishing our dashboard with Charts, more Layout objects and some styling with styled-components.