topic Re: Mashup: Issue with getting all selection options in Integration, Extension & APIs

Mashup: Issue with getting all selection options

Anurag2 — Thu, 05 Dec 2024 09:37:09 GMT

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

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

Re: Mashup: Issue with getting all selection options

alex_colombo — Fri, 06 Dec 2024 15:52:51 GMT

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?

Re: Mashup: Issue with getting all selection options

Anurag2 — Mon, 09 Dec 2024 10:18:11 GMT

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

Re: Mashup: Issue with getting all selection options

alex_colombo — Tue, 10 Dec 2024 13:27:48 GMT

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);

Re: Mashup: Issue with getting all selection options

Anurag2 — Thu, 12 Dec 2024 08:55:47 GMT

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.

Re: Mashup: Issue with getting all selection options

alex_colombo — Thu, 12 Dec 2024 13:49:03 GMT

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