Qlik Community

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

cancel
Showing results for 
Search instead for 
Did you mean: 
s29124141
Partner
Partner

Qlik Sense Mashup qlik_visual web component issue

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.

Capture.PNG

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

Capture.PNG

Capture.PNG

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

Capture.PNG

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

            }

        });

1 Solution

Accepted Solutions
ErikWetterberg

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

View solution in original post

4 Replies
ErikWetterberg

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
Partner
Partner
Author

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.

Capture.PNG

I see below events in Windows event viewer.

Capture.PNG

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
Partner
Partner
Author

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.