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 updated