Qlik Sense Mashup qlik_visual web component issue

[s29124141]

Hi All,

Please help me in identifying issue with qlik_visual web component.

I am facing issue while trying qlik_visual web component. Tried implementing as mentioned in the help link (https://help.qlik.com/en-US/sense-developer/3.1/Subsystems/Mashups/Content/QlikVisual/mashups-create...)

Error shown in the UI.

Below socket connection is made to the wrong host & port number while using qlik_visual web component. My website(runs on port 8080) and Qlik sense runs on the same server (443 and 80). Below is the socket connection established by qlik_visual web component

ws://webserver:8080/Mashup/app/aa5882ea-8959-490f-9239-7bb7cd7e949d?reloadUri=http%3A%2F%2Fuscku1metu00018.metnet.net%3A8080%2FMashup%2FHome%2FContact

instead of establishing connection to qlik sense server.

wss://{qlikserver}/app/{appid}?reloadUri=http%3A%2F%2Fuscku1metu00018.metnet.net%3A8080%2FMashup%2FHome

Its working fine without any issue while embedding qlik sense objects in a webpage.

• I am able to connect to Qlik sense without any issues.
• Qlik Sense Server 3.2 version.
• No virtual proxy is being used.
• Host is already present in Host white list in the virtual proxy.
• allow http is true
• App is present with the app id mentioned in the qlik_visual component
• No issues with config. Below is my configuration.
• It seems to be issue with qlik.js file which is making socket connection to wrong host/port.

var config = {

            host: 'uscku1metu00018.metnet.net',

            prefix: '/',

            port: 443,

            isSecure: true

        };

        require.config( {

            baseUrl: ( config.isSecure? "https://" : "http://" ) + config.host + (config.port? ":" + config.port: "") + config.prefix + "resources"

        });

        var qlikApps = [];

        require(["js/qlik"], function ( qlik ){

            qlik.setOnError(function(error) {

                alert(error.message);

            });

            function attach(elem){

                var appid = elem.dataset.qlikAppid;

                var objid = elem.dataset.qlikObjid;

                var app = qlikApps[appid];

                if (!app){

                    app = qlik.openApp(appid, config);

                    qlikApps[appid] = app;

                }

                app.getObject(elem, objid);

            }

            var elems = document.getElementsByClassName('qlik-embed');

            var ix = 0;

            for (; ix < elems.length; ++ix){

                attach(elems[ix]);

            }

        });

[ErikWetterberg · Accepted solution]

Hi,

not sure if this is your problem, but you might need to include a config attribut to point to the Qlik Sense server, something like this:

<qlik-visual 
appid="Helpdesk Management.qvf" 
config='{host:"myhost.com", port:443, prefix="/"}'

type="barchart" 
cols='["Case Owner Group","=Avg([Case Duration Time])"]' 
options='{"title" : "On the fly barchart"}' > 
</qlik-visual>

Note that the config parameter is a JSON object in string format.

Documented here:

https://help.qlik.com/en-US/sense-developer/3.1/Subsystems/APIs/Content/QlikVisual/qlik-visual.htm‌

Hope this helps

Erik

[s29124141]

Thanks a lot erik.wetterberg‌ for pointing out the config attribute that needed.

I have followed your suggestion with minor changes. Instead of adding config attribute to each and every qlik_visual component, I am setting the config attribute in document ready event. As I have already created the config json object.

$(document).ready(function () {
        $("qlik-visual").attr('config', JSON.stringify(config));
});

Now I see the websocket connections are going fine without any issue. However I am not able to see the web component rendered in the web page. Only the title provided in the barchart appears. There are no errors/warnings in the browser console, I see the content when I inspect element in chrome, page comes up blank though.

I see below events in Windows event viewer.

Could anyone help me out here?

[ErikWetterberg]

Hi,

Neat trick setting the attribute with jQuery. It should work adding config attribute just to the first web component, without having to repeat it.

On your new problem: has the html element a height set? You need to set that.

Hope this helps

Erik

[s29124141]

Thank you very much Erik. It solved my problem. Previously I tried giving height value to the qlik-visual component and it was not working for some reason. Now I have added height property to the wrapping div element.