Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
rafaelbarbosa
Contributor II
Contributor II

Engine Qlik Sense 2024

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

Labels (5)
4 Replies
alex_colombo
Employee
Employee

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
Contributor II
Contributor II
Author

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
Employee
Employee

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
Contributor II
Contributor II
Author

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