Introduction

An Introduction to Motor's hooks

This section covers the React hooks in the package which you can use to interact with the Qlik engine. You can use these hooks to perform a range of functions including extracting data or performing actions against the engine, such as making selections.

The data returned from these hooks has been simplified for easy implementation with generic UX and charting libraries, so you don't need detailed knowledge of the Qlik API and topics such as HyperCubes.

Simple Example

Let's start with an example. Say you wanted to create a filter, well import the hook, pass in a dimension and let's explore the data that's returned.

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

const Filter = () => {
	
	const dimension = ['Country'];

	const {
	  listData,
	} = useList({
	  dimension,
	});
	
	console.log(listData);

	return (
	<div></div>
	);

};

Above, we have passed into the hook a dimension called Country (which is a field in our Qlik application) and are returning an listData array.

This array contains objects with the Country data returned from the engine, in the format below.

[
    {
        key: 1,
        text: 'France',
        number: NaN
    },
    {
        key: 2,
        text: 'Germany',
        number: NaN
    },
    {
        key: 3,
        text: 'Spain',
        number: NaN
    }
]

We have an array of objects containing a key, text value and number value, all returned from the Qlik engine.

We can now map over this data for presentation on your UI and make selections on the key field. You can find a complete filter example below:

Last updated