Qlik sense mashup – Apply filters across two or more apps

This blog is about applying filter selection across multiple applications from a mashup. This is essential in scenarios where we have apps that share common data fields. For example, HR system and project management systems may have different data and for some reason this need to be separate, we can merge them together in the mashup and apply filters together.

In this example, for simplicity, a copy of Helpdesk app, that is part of the example apps that comes along with
Qliksense desktop implementation, is created and a chart title is renamed for explanatory purpose.
You can download the working source code of this mashup from GITHUB.

One main objective of this approach is to NOT use any custom filters as that would require additional development and maintenance efforts. Also, if not implemented correctly it may lead to performance degrade.

Technically, one may encounter two scenarios where filter needs to be applied on more than one app.

Secnario 1: A single page that renders visualization from more than one app to the user

Scenario 2: Two separate modules (pages) exist and user goes from one module (page) to another and the context (filter selection) needs to be preserved between the modules. Or there is a need to preserve selection between two different sessions.

Scenario 1: Single page that renders visualization from more than one app to the user
  • Identify one of the apps as the primary apps.
  • Create filter pane from this app to have the common fields
  • Render the filter pane in the mashup
  • Use the following function to capture selection change and apply it to the second app.Downside of this is that the selections made in the charts of the secondary app may not reflect in the filter. In this case you can disable selection on the charts. If you do not want the selection on the charts disabled, then you will have to create custom filter and apply selections to both apps together.
    var selState = app.selectionState( );
    var listener = function() {
    app2.clearAll();
    var selFields = selState.selections;
    if (selFields!=null){
    $.each(selFields, function(key, value) {
    var valArray=[];
    $.each(value.selectedValues, function(key,value){
    valArray.push(value.qName);
    })
    app2.field(value.fieldName).selectValues(valArray);
    });
    }
    };
    selState.OnData.bind( listener );
Scenario 2: Applying filters across pages or preserving selection between two sessions of the same page

The implementation is similar to the above except that filter selections are transferred only on the page load. In the example, I have used this to retain the filter selection between multiple sessions.

  • Create filter panes on the apps
  • Render them in the respective mashup page
  • Use the following function to capture the selection change and store the selection in the browser cache
$.each(selFields, function(key, value) {
cacheString=cacheString + '@' + value.fieldName +"~" + value.qSelected;
}
localStorage.setItem("QlikFilter",cacheString);

 

  • ¬†When the respective mashup page loads, read the local storage and apply the filters accordingly.
    function retrieveSelectionfromCache()
    {
    var cacheString= localStorage.getItem("QlikFilter");
    if (cacheString!=null && cacheString !=""){
    app.clearAll();
    var selFields=cacheString.split("@");</li>
    </ul>
    $.each(selFields, function(key, value) {
    if (value!=null &amp;&amp; value!=""){
    var valArray=[];
    var s = value.split("~");
    var fieldName=s[0];
    valArray = s[1].split(", ");
    app.field(fieldName).selectValues(valArray);
    }
    });
    }
    else{
    app.clearAll();
    }
    }

You May Also Like

About the Author: codeatroost

Leave a Reply

Your email address will not be published. Required fields are marked *