Skip to main content
Announcements
Get Ready. A New Qlik Learning Experience is Coming February 17! LEARN MORE
cancel
Showing results for 
Search instead for 
Did you mean: 
Anurag2
Contributor II
Contributor II

Mashup: Issue with getting all selection options

Hi, 
i am working on Qlik React Mashup. And I am using @qlik/api and @qlik/embed-react npm package.
i want to get all selection options. i am using below code to get below field options but it is giving me error "getData is not a function". 

const field = await app.getField('Year');
const fieldData = await field.getData()

i am getting below object from app.getField
Anurag2_0-1733391350372.png

Can anyone please help me here, how can i get selections options

Labels (4)
2 Solutions

Accepted Solutions
alex_colombo
Employee
Employee

Ok that is clear now. Below code is an example of getting all values from a field. And for doing this we need to create a listbox starting from your field name. If you are able to get current selections fields, then you should create a listbox on top of all of them for getting values.
This tecquinique is needed because you cannot get more than 6 values from current selections object, and this what happened in the product behind the scenes.

When you can get values from listbox, using the right sort criteria you will find selected values at the top, and looking at qState prop you can understand if a values is selected (S), optional (O), excluded (X) and so on.

import qlikApi from '@qlik/api';
const config = {
	authType: "oauth2",
	host: "_tenant_.eu.qlikcloud.com",
	clientId: "_OAuth_clientId",
	redirectUri: "https://localhost:8080/oauth_callback.html",
	accessTokenStorage: "session"
};

qlikApi.auth.setDefaultHostConfig(config);

// open new app session
const appSession = qlikApi.qix.openAppSession("_appId_");
// get the "qix document (qlik app)"
const app = await appSession.getDoc();
const sessionListboxDef = {
	"qInfo": {
		"qType": "ListObject"
	},
	"qListObjectDef": {
		"qStateName": "$",
		"qLibraryId": "",
		"qDef": {
			"qFieldDefs": [
				"_youtFieldName_"
			],
			"qSortCriterias": [
				{
					"qSortByState": 1
				}
			]
		}
	}
}
const sessionListbox = await app.createSessionObject(sessionListboxDef);
const sessionListboxLayout = await sessionListbox.getLayout();
//Read listbox height
const sessionListboxHeight = sessionListboxLayout.qListObject.qSize.qcy
//We need height for understanding how many values we have. Use this for pagination when need to get all data
const sessionListboxDataDef = {
	"qPath": "/qListObjectDef",
	"qPages": [
		{
			"qLeft": 0,
			"qTop": 0,
			"qWidth": 1,
			"qHeight": 20
		}
	]
}
//Method for reading data from field
const sessionListboxData = await sessionListbox.getListObjectData(sessionListboxDataDef);
//Showing values.
//Here you will find, for each value, the current selection state. For selected value you will find qState: "S".
//Use these selected values for creating your url with selections.
console.log(sessionListboxData[0].qMatrix)
//When you have finished with listbox data, destroy it!!!
await app.destroySessionObject(sessionListbox.id);

 

View solution in original post

alex_colombo
Employee
Employee

Pretty generic question 😊, but qlik.dev site is the place to go where you can find some examples.

View solution in original post

5 Replies
alex_colombo
Employee
Employee

Hey @Anurag2 getData method is provided by Capability APIs. Using @qlik/api you have to use Engine API methods.

Not clear your goal. Do you want to perform a select All values in the filed, or get selected values from the field?

Anurag2
Contributor II
Contributor II
Author

Hi @alex_colombo ,
Thanks a lot for replying, 
I am using @qlik/embed-react and @qlik/api for react qlik mashup.
My goal is to get all the selection options in a sheet , (like in year selection if we have 4 options 2020, 2021, 2022, 2023 then i want to get these options).
For me getData() is undefined, sharing my code below:

        const field = await app.getField('Year');
        const fieldData = await field.getData();

and i am getting app using  below code :

import type { HostConfig } from "@qlik/api/auth";
import qix, { type Doc } from "@qlik/api/qix";
import { useEffect, useState } from "react";

export const useApp = (appId: string, hostConfig?: HostConfig) => {
  const [app, setApp] = useState<Doc | null>(null);

  useEffect(() => {
    const getApp = async () => {
      const session = qix.openAppSession({ appId, hostConfig });
      const doc = await session.getDoc();
      setApp(doc);
    };
    if (hostConfig) {
      getApp().catch(console.error); // eslint-disable-line no-console
    }
  }, [appId, hostConfig]);

  return app;
};

Also i am able to get selected option from below code in 
qSelectedFieldSelectionInfo key:
          const currSel = await app.getCurrentSelectionObject();
          const currSelLayout = await currSel.getLayout();
In currSelLayout, i also get qNotSelectedFieldSelectionInfo key but it is coming as blank array.


Please help me here.
Regards 

alex_colombo
Employee
Employee

Ok that is clear now. Below code is an example of getting all values from a field. And for doing this we need to create a listbox starting from your field name. If you are able to get current selections fields, then you should create a listbox on top of all of them for getting values.
This tecquinique is needed because you cannot get more than 6 values from current selections object, and this what happened in the product behind the scenes.

When you can get values from listbox, using the right sort criteria you will find selected values at the top, and looking at qState prop you can understand if a values is selected (S), optional (O), excluded (X) and so on.

import qlikApi from '@qlik/api';
const config = {
	authType: "oauth2",
	host: "_tenant_.eu.qlikcloud.com",
	clientId: "_OAuth_clientId",
	redirectUri: "https://localhost:8080/oauth_callback.html",
	accessTokenStorage: "session"
};

qlikApi.auth.setDefaultHostConfig(config);

// open new app session
const appSession = qlikApi.qix.openAppSession("_appId_");
// get the "qix document (qlik app)"
const app = await appSession.getDoc();
const sessionListboxDef = {
	"qInfo": {
		"qType": "ListObject"
	},
	"qListObjectDef": {
		"qStateName": "$",
		"qLibraryId": "",
		"qDef": {
			"qFieldDefs": [
				"_youtFieldName_"
			],
			"qSortCriterias": [
				{
					"qSortByState": 1
				}
			]
		}
	}
}
const sessionListbox = await app.createSessionObject(sessionListboxDef);
const sessionListboxLayout = await sessionListbox.getLayout();
//Read listbox height
const sessionListboxHeight = sessionListboxLayout.qListObject.qSize.qcy
//We need height for understanding how many values we have. Use this for pagination when need to get all data
const sessionListboxDataDef = {
	"qPath": "/qListObjectDef",
	"qPages": [
		{
			"qLeft": 0,
			"qTop": 0,
			"qWidth": 1,
			"qHeight": 20
		}
	]
}
//Method for reading data from field
const sessionListboxData = await sessionListbox.getListObjectData(sessionListboxDataDef);
//Showing values.
//Here you will find, for each value, the current selection state. For selected value you will find qState: "S".
//Use these selected values for creating your url with selections.
console.log(sessionListboxData[0].qMatrix)
//When you have finished with listbox data, destroy it!!!
await app.destroySessionObject(sessionListbox.id);

 

Anurag2
Contributor II
Contributor II
Author

It is working. Thanks a lot @alex_colombo,
As i am new to Qlik, And i am working on Qlik React mashup, If possible can you please guide me by sharing some important links which could help me further.

Regards and Thanks again.

alex_colombo
Employee
Employee

Pretty generic question 😊, but qlik.dev site is the place to go where you can find some examples.