topic Re: How to get Variable value when building the mashup in Integration, Extension & APIs

How to get Variable value when building the mashup

zzyjordan — Sat, 16 Nov 2024 05:47:51 GMT

Hi, community

I recently have a question regarding how to obtain the variable value via the api in mashup.

I created an simply app, with one variable input to toggle different charts, and a half year filter, and then a show/hide container as below screenshot show.

And then created the mashup with these 3 objects

My requirement is when "Viz 1" is selected, the"Half Year" filter should be displayed, while "Viz 2" is selected, it should be hide, I mean the <div> should be hide so that the chart for "Viz 2" should move up, just under the variable input. (I have tried the show/hide container, the problem is when I bring it to mashup, it holds the place even when the filter is hided)

I tried the qlik.app.variable.getContent() method, but it seems not returning the value properly when click the different buttons, so that the Viz 2 chart isn't moving up when the variable is set it to "Viz 2". Is there anyone help with this? Thx

I attached the .qvf and below are the Html and js code.

Below is the HTML code for above mashup

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<link rel="stylesheet" href="case1.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<script src="case1.js"></script>
</head>
<body style="overflow: auto">
<div class="flex-container">

<div id="popup">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closePopup"><span aria-hidden="true">×</span></button>
<p id="popupText"></p>
</div>

</body>
</html>

Below is the javascript code

var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
var config = {
host: window.location.hostname,
prefix: prefix,
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
} );

require( ["js/qlik"], function ( qlik ) {
qlik.setOnError( function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
$( '#popup' ).fadeIn( 1000 );
} );
$( "#closePopup" ).click( function () {
$( '#popup' ).hide();
} );

//callbacks -- inserted here --
//open apps -- inserted here --
var app = qlik.openApp('case1.qvf', config);// open the app
app.getObject('CurrentSelections','CurrentSelections');
//get objects -- inserted here --
app.getObject('QV01','tBypm');
app.getObject('QV02','eYZhEJT');
app.getObject('QV03','fPjMCJe');

$(document).on('click','#QV01',function() {
app.variable.getContent('vVizSelection',function (reply){
console.log(reply.qContent.qString);
if (reply.qContent.qString == 'Viz 2'){
$("#QV02").hide()
}else{
$("#QV02").show()
};
});
}
);

//create cubes and lists -- inserted here --

} );

Thanks in advance.

Re: How to get Variable value when building the mashup

ajaykakkar93 — Mon, 20 May 2019 10:56:40 GMT

Hi,

I think you wanted to make tab layout/Button in mashup.

So i have attached a mashup use in desktop version hope your requirement is met.

Re: How to get Variable value when building the mashup

zzyjordan — Mon, 20 May 2019 12:06:11 GMT

Hi, Ajay

Thanks for your reply and your solution. It works in some cases, but not in my case, as I have to use the variable input as my real case is moe complicated and other charts also have the logic depending on the variable value. And that's why I have to retrieve the variable value from the variable input extension in mashup.

Re: How to get Variable value when building the mashup

ajaykakkar93 — Mon, 20 May 2019 14:25:31 GMT

Ok I'll try to make the case once I am done I'll get back

Re: How to get Variable value when building the mashup

zzyjordan — Tue, 21 May 2019 00:13:48 GMT

Thanks, you can use the qvf I attached and copy paste the html/js to your mashup to reproduce it.

Re: How to get Variable value when building the mashup

ajaykakkar93 — Tue, 21 May 2019 00:21:33 GMT

Ya no problem...

Re: How to get Variable value when building the mashup

zzyjordan — Wed, 22 May 2019 00:00:37 GMT

Hi,

Is there any luck so far?

Re: How to get Variable value when building the mashup

ToniKautto — Tue, 04 Jun 2019 00:45:08 GMT

@zzyjordan I moved this thread to the "Qlik Sense Integration, Extensions, & APIs" section of the community, to attract more attention from the topical experts.

Re: How to get Variable value when building the mashup

zzyjordan — Tue, 04 Jun 2019 03:06:26 GMT

Thanks, Toni. Appreciated 😀

Re: How to get Variable value when building the mashup

zzyjordan — Sun, 30 Jun 2019 13:26:42 GMT

Does anybody have any update so far?

Re: How to get Variable value when building the mashup

Prashant_Naik — Sun, 30 Jun 2019 21:16:02 GMT

Hello,

I have not used the Qlik Variable data as it will not get change until and unless we don't change the value of Variable from Api.

Note : Variable will always shows the definition value(while getting the variable data using Capability API) which we given while creating the variable.

So i make a workaround to get the data from the attribute of the button and passed the same in your logic and it worked 🙂

So here the Code :

HTML:

<!doctype html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<link rel="stylesheet" href="demo.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<script src="demo.js"></script>
</head>

<div class="flex-container"></div>

JS Code:(i have only put the logic here)

$(document).on('click','#QV02',function(e) {
if ($(e.target).data('value') == 'Viz 2'){
$("#QV04").hide();
console.log($(this).data('value'));
}else{
$("#QV04").show();
};
});

Regards,

Prashant

Re: How to get Variable value when building the mashup

VGP — Thu, 20 Feb 2020 08:05:17 GMT

Hi ZZ,

Please try below code to get value from qlik variable using createGenericObject method instead of variable.getContent method:

selectedObj = {'value': {"qStringExpression" : "=(vVizSelection)"}}

app.createGenericObject(selectedObj, function (reply) {
vizSelected = reply.value;
});

Thanks,

Guru