Hello Community,
I stumbled upon an interesting issue today and would love to know if I did something wrong:
My task is to link different Qlik Sense apps and synchronize their field selections via JavaScript, which seems very easy at first:
require(["js/qlik"], function (qlik) {
// load apps
var master = qlik.openApp('869559e8-d565-4909-a302-b74390ca98d8', config);
var slave = qlik.openApp('f35b3d7a-c6fa-4c55-9b6f-7869d07f653a', config);
// load filter-objects
master.getObject('QV01', '3466decc-948a-43cc-b6f0-3804909c9889')
slave.getObject('QV02', 'JmbmQWN');
// assign event-handler to selection state of master app
var selState = master.selectionState();
var listener = function () {
if (selState.selections.length == 0) {
return;
}
// re-map selections for easier access
var syncableSelections = selState.selections.map(function (s) {
return {
field: s.fieldName,
values: s.qSelected
};
});
syncableSelections.forEach(function (selection) {
console.log('Selecting in ' + slave.id, selection.field, JSON.stringify(selection.values));
slave.field(selection.field).selectMatch(selection.values, true);
});
};
selState.OnData.bind(listener);
});
With this code, only the first selection I make in my master app is applied to the slave-application. Others are ignored and I get a ""Request aborted" message in the developer console.
While trying different things I found that if I extract the "syncableSelections"-variable using JSON.stringify and manually re-assign the variable (making it a constant), the selection of multiple fields works as expected (=even if I deselect stuff in the slave app, it will be re-selected next time I select something in the master app):
syncableSelections = [{
"field": "dlType",
"values": "R"
}, {
"field": "Vergleich",
"values": "YTY"
}, {
"field": "MeasureLabel",
"values": "Einkaufsvolumen"
}, {
"field": "DimensionLabel",
"values": "Mandant"
}, {
"field": "Basis",
"values": "Rechnung"
}
];
syncableSelections.forEach(function (selection) {
console.log('Selecting in ' + slave.id, selection.field, JSON.stringify(selection.values));
slave.field(selection.field).selectMatch(selection.values, true);
});
...
I even logged both JSON-Versions to console and they're exactly the same, yet it only works when syncableSelections is a constant.
I've never experienced something like this so if anyone knows why this is happening I'd love to know!
And for anyone interested, those are possible solutions to this issue (atleast the ones I found):
Using setTimeout (shorter but maybe there'll be timing issues [I didn't really test it]):
var s = 0;
var time = 25;
syncableSelections.forEach(function (selection) {
console.log('Selecting in ' + slave.id, selection.field, JSON.stringify(selection.values));
setTimeout(function () {
slave.field(selection.field).selectMatch(selection.values, true);
}, s * time);
s++;
});
Using a sequential promise-chain (sequentially executes every promise in an array):
// create promise array
var promises = [];
// and generator-function for a selection-promise
var promiseForLater = function (selection) {
// we want to return a function without parameters because
// we're going to execute it in a context where we don't know which selection
// we want to apply
return function () {
return app.field(selection.field).selectValues(selection.values, true);
}
};
// clear before applying other selections
promises.push(function () {
return app.clearAll()
});
// use generator-function to fill array with functions
syncableSelections.forEach(function (selection) {
promises.push(promiseForLater(selection));
});
// use es6 array-"reduce" function to sequentially
// execute the selection-promises
promises.reduce(function (promiseChain, currentTask) {
// we dont need any result,
// hence we skip the concatenation of result-values
return promiseChain.then(function (chainResults) {
return currentTask()
});
// start value, has to be set for reduce function
}, Promise.resolve([]));
Cheers,
Mathias
