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