Qlik Community

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Customer & Partners, DEC. 9, 11 AM ET: Qlik Product & Strategy Roadmap Session: Data Analytics REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
devan9876
Creator
Creator

Create FilterPane with Visualization API

I am able to generate a filter pane with the following code, but the filter pane doesn't do anything when I click on the fields. Is there something I am doing wrong?

function appendFilterPane(parent){
		var app=qlik.currApp();
		var listbox1=app.visualization.create('listbox',["MonthYear"],{"showTitles": false,"title": "MonthYear","showDetails":true});
		var listbox2=app.visualization.create('listbox',["Date"],{"showTitles": false,"title": "Date","showDetails":true});
		var listbox3=app.visualization.create('listbox',["Events"],{"showTitles": true,"title": "Events","showDetails":false});
		var listbox4=app.visualization.create('listbox',["Qty"],{"showTitles":false,"title": "Qty","showDetails":false});
		Promise.all([listbox1,listbox2,listbox3,listbox4]).then(function(data) {
			app.visualization.create('filterpane', null,{}).then(function(container){ 
				for (var i = 0; i < data.length; i++) {
					data[i].model.getProperties().then(function(child) {
						container.model.createChild(child);
					});
				}
			container.show(parent);
			});
		});		
}

 

filterpane.PNG

Labels (2)
5 Replies
jmr_itsn
Partner
Partner

Did you get this to work? It's a shame this isn't documented...

jmr_itsn
Partner
Partner

I found a way to make it work perfectly, it involves using getObject with the id of the created visualization instead of using the show function. An example:

 

const createMyFieldFilter = async (app) => {
  const listboxVis = await app.visualization.create('listbox', ['My Field'], {
    showTitle: false,
    title: 'My Field',
    showDetails: true,
  });

  const filterpaneVis = await app.visualization.create('filterpane', [], {
    qMeta: {
      privileges: ['read', 'update', 'delete', 'exportdata'],
    },
    qSelectionInfo: {},
    showTitles: false,
    title: '',
    subtitle: '',
    footnote: '',
    showDetails: false,
    visualization: 'filterpane',
  });

  listboxVis.model.getProperties().then((child) => {
    filterpaneVis.model.createChild(child);
    app.getObject('myFieldFilter', filterpaneVis.id);
  });
};
rarpecalibrate
Contributor III
Contributor III

HI @jmr_itsn ,

Is filterpane only available in the latest version of the Viz Api? I am still using April 2019, and I cant get this to work?

Many Thanks,

Ryan Arpe 

jmr_itsn
Partner
Partner

Hi, I'm not sure about whether it's compatible or not with April 2019. It worked on Feb 2020.

 

In older versions I recommend you to not use qlik.sessionApp and instead use qlik.sessionAppFromApp so you can just do yourSessionApp.getObject.

 

That way, you don't have to store all of your object's properties in the mashup and they can reside in a objects-only template  app. I found this way to be as performant as qlik.sessionApp alone and much more convenient.

katiepuran
Contributor II
Contributor II

would you mind share a complete project?