Qlik sense mashup – Apply filters across two or more apps

Qliksense-selection-on-multiple-apps-mashup-bi-analytics

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();
    }
    }

5 Comments

  1. Hi, this code don´t work for filters with number values.. U know how we can improve to consider number and strings?

    Thanks!

    • Hi Mauricio
      Thank you, for the feedback. Can you please list some of the values being selected to isolate the issue? Also, is it when on the same page or when moving from one page to another.

      Thanks!!

    • Hi Mauricio,
      Please replace valArray.push(value.qName); inside the listener function to isNaN(value.qName) ? valArray.push(value.qName):valArray.push(Number(value.qName));

      Thank you, for spotting this!!

      • You also may want to convert the valArray values into numbers if its a number dimension in the retrieveSelectionfromCache() if you are using filter across pages.

  2. Hi Nivedha,

    First of all thanks for the quickly reply!

    I replaced the “valArray.push(value.qName);” line inside the listener function and at first it worked.

    But if i select a text and then i select a number the filter seems dont recognize the number. Or if i select a number and then a text, the filter dont recognize the text. This also happens when i make two text filters in a row.

    If i go to code line, change something(can be a comma) and save, the app starts to recognize the filters…

    Do u know what could be?

Leave a Reply

Your email address will not be published.


*