Engine Qlik Sense 2024

[rafaelbarbosa]

I have a react app that, with the old versions of Qlik sense Desktop, loads the graphics all correctly, but I updated the version to February 2024 and now it doesn't load anymore, I don't know if it's something new in the engine, or nacapabilties qlik sense API, I need help on this point

[alex_colombo]

Hey @rafaelbarbosa  could you please post the errors you are facing and the code where you are creating the connection to Qlik and where you get Qlik objects?

[rafaelbarbosa]

This is the engine I'm using

const engine = {

    connectQCS: (config) => new Promise((resolve) => {

        const tenantUri = `https://${config.host}`;

        engine.request(

            config,

            tenantUri,

            '/api/v1/users/me'

        ).then((user) => {

            console.log(`Logged in, ${user.name}`);

            engine.loadCapSAAS(config).then(() => {

                window.requirejs.config({

                    webIntegrationId: config.webIntegrationId,

                    baseUrl: `${tenantUri}${config.prefix}resources`

                });

                window.requirejs(['js/qlik'], (qlik) => {

                    resolve(qlik);

                });

            });

        }, () => {

            console.log('Redirecting to Qlik Cloud...');

            const returnTo = encodeURIComponent(window.location.href);

            window.location.href = `${tenantUri}/login?returnto=${returnTo}&qlik-web-integration-id=${config.webIntegrationId}`;

        });

    }),

    loadCapSAAS: async (config) => {

        try {

            const tenantUrl = config.host;

            const { webIntegrationId } = config;

            const link = document.createElement('link');

            link.rel = 'stylesheet';

            link.href = `https://${tenantUrl}/resources/autogenerated/qlik-styles.css`;

            document.head.appendChild(link);

            link.loaded = new Promise((resolve) => {

                link.onload = () => {

                    resolve();

                };

            });

            const script = document.createElement('script');

            script.src = `https://${tenantUrl}/resources/assets/external/requirejs/require.js`;

            script.onload = async () => {

                window.require.config({

                    baseUrl: `https://${tenantUrl}/resources`,

                    webIntegrationId

                });

            };

            document.body.appendChild(script);

            script.loaded = new Promise((resolve) => {

                script.onload = () => {

                    resolve();

                };

            });

            await Promise.all([link.loaded, script.loaded]);

        } catch (error) {

            throw new Error(error);

        }

    },

    connectQSE: (config) => new Promise((resolve) => {

        engine.loadCapabilityApis(config).then(() => {

            const protocol = config.isSecure ? 'https://' : 'http://';

            const port = config.port ? `:${config.port}` : '';

            window.requirejs.config({

                baseUrl: `${protocol}${config.host}${port}${config.prefix}resources`

            });

            window.requirejs(['js/qlik'], (qlik) => resolve(qlik));

        });

    }),

    loadCapabilityApis: async (config) => {

        try {

            const capabilityApisJS = document.createElement('script');

            const { prefix } = config;

            const protocol = config.isSecure ? 'https://' : 'http://';

            const port = config.port ? `:${config.port}` : '';

            const baseUrl = `${protocol}${config.host}${port}${prefix}`;

            capabilityApisJS.src = `${baseUrl}resources/assets/external/requirejs/require.js`;

            console.log('capabilityApisJS.src',capabilityApisJS.src)

            document.head.appendChild(capabilityApisJS);

            capabilityApisJS.loaded = new Promise((resolve) => {

                capabilityApisJS.onload = () => {

                    resolve();

                };

            });

            const capabilityApisCSS = document.createElement('link');

            capabilityApisCSS.href = `${baseUrl}resources/autogenerated/qlik-styles.css`;

            capabilityApisCSS.type = 'text/css';

            capabilityApisCSS.rel = 'stylesheet';

            document.head.appendChild(capabilityApisCSS);

            capabilityApisCSS.loaded = new Promise((resolve) => {

                capabilityApisCSS.onload = () => {

                    resolve();

                };

            });

            await Promise.all([

                capabilityApisJS.loaded,

                capabilityApisCSS.loaded

            ]);

        } catch (error) {

            throw new Error(error);

        }

    },

    request: (config, tenantUri, path, returnJson = true) => new Promise((resolve, reject) => {

        fetch(`${tenantUri}${path}`, {

            mode: 'cors',

            credentials: 'include',

            redirect: 'follow',

            headers: {

                'qlik-web-integration-id': config.webIntegrationId

            }

        }).then((res) => {

            if (res.status < 200 || res.status >= 400) reject(res);

            return returnJson ? resolve(res.json()) : resolve(res);

        }, (err) => { reject(err); });

    })

};

export default engine;

It doesn't bring any specific error because as I said it was working in previous versions, from the August 2023 version onwards, the graphics simply no longer load

[alex_colombo]

Could you please check if the websocket connection is created against the engine and if you have messages within it?
Can you please try to inspect the HTML for understanding if Capability APIs have attached qlik visualizations to the HTML (I guess you have a kind of container where you are putting Qlik objects, such as a div).

Please send screenshots for both.

[rafaelbarbosa]

I managed to solve it, for some reason in this update CORS is blocking everything, I had to disable CORS in the browser for it to work, but this is only in development in production, everything is fine, but thanks for the help