Applying single filter for the whole page in Mashup

[garvit96]

Hi All,

I am trying to make my mashup with 3 applications get filtered by a single Filter from the primary application. I am pasting my JS code over here. It would be great if someone can help and let me know how i can solve it out. 

/*
* Bootstrap-based responsive mashup
* @owner Enter you name here (xxx)
*/
/*
* Fill in host and port for Qlik engine
*/
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:"
};
//to avoid errors in workbench: you can remove this when you have added an app
var app;
require.config( {
baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources"
} );

//fixed navbar
/*window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}*/
//fixed navbar end

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

var control = false;
qlik.setOnError( function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
if ( !control ) {
control = true;
$( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 );
}
} );
$( "#closePopup" ).click( function () {
$( '#popup' ).hide();
} );
if ( $( 'ul#qbmlist li' ).length === 0 ) {
$( '#qbmlist' ).append( "<li><a href='#'>No bookmarks available</a></li>" );
}
//
//$( "body" ).css( "overflow: hidden;" );
//$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) { qlik.resize();})

var appSel = qlik.openApp('6f0ef960-1010-452a-88ed-4c039f303d32');
appSel.field('Unit').selectValues([{qText: "SKM"}], false, false);
var app1Sel = qlik.openApp('283737f2-0ab6-40a0-92f7-9b9debd48c64');
app1Sel.field('Unit_KPI').selectValues([{qText: "SKM"}], false, false);
var app2Sel = qlik.openApp('25c61faa-f3d5-4b2e-849a-a78259d79489');
app2Sel.field('COP Unit').selectValues([{qText: "SKM"}], false, false);

function AppUi ( app ) {
var me = this;
this.app = app;
app.global.isPersonalMode( function ( reply ) {
me.isPersonalMode = reply.qReturn;
} );
app.getAppLayout( function ( layout ) {
$( "#title" ).html( layout.qTitle );
$( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) );
//TODO: bootstrap tooltip ??
} );


app.getList( 'SelectionObject', function ( reply ) {
$( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 );
$( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 );
} );


app.getList( "BookmarkList", function ( reply ) {
var str = "";
reply.qBookmarkList.qItems.forEach( function ( value ) {
if ( value.qData.title ) {
str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>';
}
} );
str += '<li><a data-cmd="create">Create</a></li>';
$( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () {
var id = $( this ).data( 'id' );
if ( id ) {
app.bookmark.apply( id );
} else {
var cmd = $( this ).data( 'cmd' );
if ( cmd === "create" ) {
$( '#createBmModal' ).modal();
}
}
} );
} );

$( "[data-qcmd]" ).on( 'click', function () {
var $element = $( this );
switch ( $element.data( 'qcmd' ) ) {
//app level commands
case 'clearAll':
app.clearAll();
break;
case 'back':
app.back();
break;
case 'forward':
app.forward();
break;
case 'lockAll':
app.lockAll();
break;
case 'unlockAll':
app.unlockAll();
break;
case 'createBm':
var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val();
app.bookmark.create( title, desc );
$( '#createBmModal' ).modal( 'hide' );
break;
}
} );
}

//callbacks -- inserted here --

//open apps -- inserted here --

var app = qlik.openApp('283737f2-0ab6-40a0-92f7-9b9debd48c64', config);
var app1 = qlik.openApp('6f0ef960-1010-452a-88ed-4c039f303d32', config);
var app2 = qlik.openApp('25c61faa-f3d5-4b2e-849a-a78259d79489', config);

//get objects -- inserted here --


app.getObject('CurrentSelections','CurrentSelections');
//app1.getObject('CurrentSelections1','CurrentSelections1');

//container1 objects
app.getObject('QV100','kwDxNL');
app.getObject('QV101','trEmHrQ');
app.getObject('QV102','Faptk');
app.getObject('QV103','LUXLNYS');
app.getObject('QV104','EHmECjz');
app.getObject('QV105','PVSCDGh');
//container1 obj ends

//container2 objects
app.getObject('QV106','qAPEHd');
app.getObject('QV107','Jtfwkr');
app.getObject('QV108','WsXGY');
//container2 obj ends

//KPI objects
app.getObject('QV3','PUPXjLa');
app.getObject('QV4','uFHbv');
app.getObject('QV5','pEjTFd');
app.getObject('QV6','PexW');
app.getObject('QV7','mFRVM');
app.getObject('QV8','HWVPrYA');
app.getObject('QV9','faxmbRx');
app.getObject('QV010','UANpad');
//app.getObject('QV011','UqFpjcC');
//Kpi Objects ends

//Operation Details
app.getObject('QV15','tDJpTX');
app.getObject('QV09','zPuJu');

//Operation trends
app.getObject('QV04','wcWBJkP');//filter
app.getObject('QV03','hPeT');//filter
app.getObject('QV08','BXrkr');//locationwise
app.getObject('QV05','kezcjm');//monthwise

//COP
app1.getObject('QV16','rKGMKp');
app1.getObject('QV17','LpPwWdB');
app1.getObject('QV18','CpLjbGY');
app1.getObject('QV19','pjbJuFa');
app1.getObject('QV24','8b99246c-4d76-46ff-973c-5d6ca2860942');
app1.getObject('QV25','28497fd1-e642-4ae0-8af1-3a870ffae3c8');

//COP Trends
app1.getObject('QV20','mbZhmD');
app1.getObject('QV21','TaGKQt');
app1.getObject('QV22','mjqvh');
app1.getObject('QV23','UdAXjLj');
app1.getObject('QV26','utCJSA');


//Spendbase
app.getObject('QV14','ryqbdd');
app.getObject('QV13','FfAgHd');
app.getObject('QV12','NNLanRB');
app.getObject('QV11','heXwgG');
app.getObject('QV10','kfkam');

//filter
app.getObject('QV02','xbmKYc');//month
app.getObject('QV01','nEpP');//year


//Commodity
app2.getObject('QV27','1c56796c-0516-4aae-9bea-1e84a228596f');
app2.getObject('QV28','39c35d1f-d9d2-47ba-9074-a0da619112c7');






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

if ( app ) {
new AppUi( app );
}

var app1SelectionviaAPI=false;
var app2SelectionviaAPI=false;
var selState = app.selectionState( );
var listener = function() {


var selFields = selState.selections;
var cacheString="";


if (selFields!=null){
$.each(selFields, function(key, value) {
var valArray=[];
$.each(value.selectedValues, function(key,value){
valArray.push(value.qName);
})
cacheString=cacheString + '@' + value.fieldName +"~" + value.qSelected;
app1.field(value.fieldName).selectValues(valArray);


});
localStorage.setItem("QlikFilter",cacheString);
}

};
selState.OnData.bind( listener );
retrieveSelectionfromCache();

function retrieveSelectionfromCache()
{
var cacheString= localStorage.getItem("QlikFilter");
if (cacheString!=null && cacheString !=""){
app.clearAll();
var selFields=cacheString.split("@");

$.each(selFields, function(key, value) {
if (value!=null && value!=""){
var valArray=[];
var s = value.split("~");
var fieldName=s[0];
valArray = s[1].split(", ");
app.field(fieldName).selectValues(valArray);
}
});
}
else{
app.clearAll();
}

}

} );

[rbartley]

Hi,

Take a look at this thread.  It explains how to create a list, which will allow you to define a callback function that will be called when the selection is changed.  In this callback function, just get the selected value and apply it to all of the apps.

https://community.qlik.com/t5/Qlik-Sense-Integration/Qlik-Sense-Mashups-event-for-responding-to-sele...