Common Filters Across Multiple Apps in Qlik Sense Mashup!!

[Cascader]

I am working on a Qlik Sense mashup that contains charts from multiple Qlik Sense applications. These applications share common fields such as Date and Department.

I noticed that when I apply a filter to one chart, other charts from the same application respond correctly, which is expected. However, charts coming from different applications do not respond to the same filter, even though the field names and values are the same.

What is the recommended or best‑practice approach to create common/global filters in a mashup so that selections are applied consistently across charts coming from different Qlik Sense apps?

Any guidance, examples, or architectural recommendations would be appreciated.

[mk09123]

$(document).ready(function () {
  const uniqueAppId = ["app id 1", "app id 2", "app id 3"]; //add all the app ids
  console.log("uniqueAppId", uniqueAppId);
  const apps = {};

  uniqueAppId.forEach((appId) => {
    apps[appId] = qlik.openApp(appId, config);
  });

  // add the app id and filter object id from your primary app
  var masterApp = qlik.openApp("primary app id ", config);
  masterApp.getObject("filter1", "filter object id");
  masterApp.getObject("filter2", "filter object id");
  masterApp.getObject("filter3", "filter object id");
  masterApp.getObject("filter4", "filter object id");

  masterApp.selectionState().OnData.bind(function () {
    const selections = masterApp.selectionState().selections;

    const filterFields = ["date","department"]; // add all the field name same but in lowercase

    uniqueAppId.forEach((appId) => {
      const app = apps[appId];
      selections.forEach((selection) => {
        const fieldName = selection.fieldName.toLowerCase();

        if (filterFields.includes(fieldName)) {
          const selectedValues = selection.selectedValues.map(
            (value) => value.qName
          );
          app
            .field(selection.fieldName)
            .selectValues(selectedValues, false, true);
        }
      });
    });
    // add button in html file with id clearAllButton (which will remove all the selection)
    $("#clearAllButton").click(function () {
      uniqueAppId.forEach((appId) => {
        apps[appId].clearAll();
      });
      masterApp.clearAll();
    });
  });
});

// don't make any changes on the code apart from the app id, object id and field values