Links

useList

The hook for loading a list of data items from the Qlik engine. To use it, pass an object with at least a dimension array.

Basic Example

The below example returns list data to the console from a dimension called country.
import { useList } from "@motor-js/engine"
const Filter = () => {
const dimension = ['country'];
const {
listData,
select,
beginSelections,
endSelections,
selections,
clearSelections,
} = useList({
dimension,
});
console.log(listData);
return (
<div></div>
);
};

List Options

The following options can be passed into the hook
  • dimension: Array
    • Required
    • The dimension in your Qlik application from which you are extracting data for
    • Needs to be an array containing a single item
  • qPage: Object
    • Optional
    • Must be an object in the following structure: { qTop: num, qLeft: num, qWidth: num, qHeight: num }
    • Size of the extracted data from the engine
    • Lists will always have a qWidth of 1
  • autoSortByState: Boolean
    • Optional (default set to true)
    • Auto sorts items by state

List Properties

The following properties are returned from the hook
  • listData: Array<Data>
    • An array of data objects. See Data Properties for more information
  • select: Function([qElemNumber])
    • A function to apply selections against the Qlik engine
    • Needs to be an array of the element numbers you wish to select
    • Element numbers are equivalent to the key field returned from mData
  • beginSelections: Function
    • A function to begin the selections mode, equivalent to this Qlik method
  • endSelections: Function
    • A function to end the selections mode, equivalent to this Qlik method
  • selections: Array<Object>
    • Array of objects containing the selected items. This data structure is the same as listData.
  • selectionsId: Array
    • An array of selected element numbers
  • clearSelections: Function
    • Clears all selections for the particular dimension

Data Properties

The following object properties are returned in each instance of the listData array
  • key: number
    • The Element number of the returned list item. This is a unique key associated to every returned data item
    • Use this to apply selections
  • text: string
    • The text value of the list item returned from the engine
  • number: number
    • The number value of the list item returned from the engine
  • state: string
    • Selection state
Last modified 2yr ago