useListObject

useListObject hook. A hook allowing you to retrive data from a ListObject

Usage

Hooks are a new addition in React. They let you use state and other React features without writing a class. To learn more abou hook in react please read : https://reactjs.org/docs/hooks-intro.html

The motivation for introducing hooks in React are:

  • It’s hard to reuse stateful logic between components
  • Complex components become hard to understand
  • Classes confuse both people and machines
  • Complex components become hard to understand

To solve these problems, Hooks let you use more of React’s features without classes.

We have tried to expose hooks used in the libary so that you can create your own visualisations if you wish.

import { useListObject } from @motor-js/core
//...
const {
qData,
qLayout,
select,
selections,
searchListObjectFor,
acceptListObjectSearch,
beginSelections,
endSelections,
changePage,
} = useListObject({
qPage,
engine,
dimension,
label,
});

Once data has been retrived from the hypercube the user can then pass it on to an object to render its contents.

Props

info

You do not need to set the Config prop if the component is a child of the Motor component

PropDescriptionOptions / Example
qPagePage structure of data to retrieve.{ qTop: number, qLeft: number, qWidth: number, qHeight: number }
engineConfiguration object to connect to the Qlik Engine, only set this if used outside of the Motor component.object
const {(engine, engineError)} = useEngine(config);
dimensionDimension data to retrieve.array
labellabel for the data.string

Sample Syntax

useListObject configuration

import React from "react";
import { useEngine, useListObject } from "@motor-js/core";
const label="Claim Status";
const dimension=["Claim Status"];
function ListObject({ engine }) {
const {
qData,
qLayout,
select,
selections,
searchListObjectFor,
acceptListObjectSearch,
beginSelections,
endSelections,
changePage,
} = useListObject({
qPage,
engine,
dimension,
label,
});
console.log("layout: ", qLayout);
return <div></div>;
}
export default ListObject;
......
/>

Example

The example is based off the Consumer Sales Qlik Sense application.

Retrieve data from the model

Retrieve data sorted by dimension.

import React from "react";
import { useEngine, useListObject } from "@motor-js/core";
function HyperCubeDemo() {
return (
<Motor config={config}>
const qPage = {
qTop: 0,
qLeft: 0,
qWidth: 1,
qHeight: 10000,
};
const config={{
host: "xxxxxxxxx",
secure: false,
port: xxxxx,
prefix: "",
appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
}}
const diemnsion = [Product Sub Group Desc];
const label = "Product Sub Group"
const { engine, engineError } = useEngine(config);
const {
qData,
qLayout,
select,
selections,
searchListObjectFor,
acceptListObjectSearch,
beginSelections,
endSelections,
changePage,
} = useListObject({
qPage,
engine,
dimension,
label,
});
console.log("layout: ", qLayout);
console.log("data: ", qData);
</Motor>
);
}