Mashup Overview

An overview of your Mashup

Congratulations on generating your first Mashup with Motor 💪. Before diving into the details of your code, this page will cover some of the basics.

There are some common themes and implementation details across all our mashups regardless of the template or charting library you have chosen.

The code is built in React.

You probably know this by now, but just in case you didn't.

The code uses @motor-js/engine.

Your code uses the @motor-js/engine package for all communication with the Qlik engine. Our package handles all interactions via the Motor component and our hooks. You will see plenty of examples of this in your downloaded code.

It's worth getting familiar with this package, you can read an introduction here and how to use the hooks here.

You connect to your site via our Motor component

Our Motor component handles engine connection and passes this as context to all of the hooks in our package. So set this up at the root of your project, import the hooks and you are good to go. You can read more about this here.

The code uses React's Context API for global state management

We handle global state across our mashups using React's Context API; typically this will include layout and theming objects. As Qlik handles managing selection state, we don't need to worry about this in our mashups.