topic Re: Qlik Sense Mashup qlik_visual web component issue in Integration, Extension & APIs

Qlik Sense Mashup qlik_visual web component issue

s29124141 — Fri, 17 Mar 2017 12:12:54 GMT

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-visualizations-on-t…)

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

}

});

Re: Qlik Sense Mashup qlik_visual web component issue

ErikWetterberg — Sun, 19 Mar 2017 08:38:58 GMT

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

Re: Qlik Sense Mashup qlik_visual web component issue

s29124141 — Mon, 20 Mar 2017 12:05:22 GMT

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?

Re: Qlik Sense Mashup qlik_visual web component issue

ErikWetterberg — Mon, 20 Mar 2017 12:14:23 GMT

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

Re: Qlik Sense Mashup qlik_visual web component issue

s29124141 — Tue, 21 Mar 2017 04:49:10 GMT

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.