Sense Mashup apply filter when loading website

[ARe]

Hi

I got a fairly simple mashup which just displays a table with data.

when opening the mashup I would like to apply a filter to a field.

/*
 * Basic responsive mashup template
 * @owner Enter you name here (xxx)
 */
/*
 *    Fill in host and port for Qlik engine
 */
var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
var config = {
	host: window.location.hostname,
	prefix: prefix,
	port: window.location.port,
	isSecure: window.location.protocol === "https:"
};
require.config( {
	baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
} );

require( ["js/qlik"], function ( qlik ) {
	qlik.on( "error", function ( error ) {
		$( '#popupText' ).append( error.message + "<br>" );
		$( '#popup' ).fadeIn( 1000 );
	} );
	$( "#closePopup" ).click( function () {
		$( '#popup' ).hide();
	} );
	function empty(heading,text){
	//console.log(heading+' '+text+': '+text.length);
	if(text.trim().length>2) return heading+': '+text;
	else return '';
	}
	//callbacks -- inserted here --
	function opplan(reply, app){
		//console.log(reply)
		$("#customTable").empty();
		$.each(reply.qHyperCube.qDataPages[0].qMatrix,function(k,val){
			//console.log(val[0].qText,val[1].qText,val[8].qText)
		var html="";
		html+='<tr>'
			+'<td>'+val[11].qText+'<!--OP--></td>'
			+'<td colspan=2>'+val[12].qText+'<!--Patient--></td>'
//			+'<td>'+val[4].qText+'<!--Fallzahl--></td>'
			+'<td>'+val[3].qText+'<!--Eingriff--></td>'
			+'<td>'+val[2].qText+'<!--Diagnose--></td>'
			+'<td>'+val[17].qText+'<!--Allergien--></td>'
		+'</tr>'
		+'<tr>'
			+'<td>'+val[13].qText+'<!--Plandatum--></td>'
			+'<td>'+val[0].qText+'<!--ANÄ-ARt--></td>'
			+'<td>'+val[5].qText+'<!--Freigabe--></td>'
			+'<td>'+empty('Frühere OPs',val[6].qText)+'<!--Fr&uuml;hrere Ops--></td>'
			+'<td>'+empty('Diabetes',val[1].qText)+'<!--Diabetes--></td>'
			+'<td>'+empty('Lagerung',val[10].qText)+'<!--Lagerung--></td>'
		+'</tr>'
		+'<tr>'
			+'<td></td>'
			+'<td>'+empty('Skelett',val[18].qText)+'<!--Skelett--></td>'
			+'<td>'+empty('Infektion',val[8].qText)+'<!--Infektion--></td>'
			+'<td>'+empty('Hören',val[7].qText)+'<!--H&ouml;ren--></td>'
			+'<td>'+empty('SM',val[14].qText)+'<!--Schrittmacher--></td>'
			+'<td>'+empty('Übelkeit',val[16].qText)+'<!--&Uuml;belkeit--></td>'
		+'</tr><tr><td colspan=\'6\' class=\'trenner\'>&nbsp;</td></tr>';

			$("#customTable").append(html);
			//console.log('Länge='+val.length);
			});
}

	//open apps -- inserted here --
	//var app = qlik.openApp('7a9535c9-f560-4ac4-b1d8-3774b084e84f', config); //ssrv600
	var app = qlik.openApp('37dd6c10-3934-4d22-9275-66644639525c', config); //HN
	app.field('Tag').select([0],true);
	//get objects -- inserted here --
	app.getObject('QV03','JEnUvs');
	//app.getObject('QV02','msGvSuC');
	app.getObject('QV01','ZtjKg');
	
	
	
	
	app.getObject('CurrentSelections','CurrentSelections');
	/*
	https://jsdev.org/commercial/qlik/3.x/get-data-by-api/
	https://help.qlik.com/en-US/sense-developer/April2018/Subsystems/APIs/Content/CapabilityAPIs/AppAPI/getAppLayout-method.htm
	*/
	app.getAppLayout(function(layout){
		var qLastReloadTime = new Date(layout.qLastReloadTime);
		var curr_date = qLastReloadTime.getDate();
		var curr_month = qLastReloadTime.getMonth() + 1; //Months are zero based
		var curr_year = qLastReloadTime.getFullYear();
		var curr_hour = qLastReloadTime.getHours();
		var curr_minutes = qLastReloadTime.getMinutes();
		//alert();
		document.getElementById("qLastReloadTime").innerHTML ="Stand: " + curr_date + "." + curr_month + "." + curr_year + " "+curr_hour + ":"+curr_minutes;
		//alert(layout.qLastReloadTime);
	});
	
	
	//create cubes and lists -- inserted here --
		app.createCube({
	"qInitialDataFetch": [
		{
			"qHeight": 20,
			"qWidth": 19
		}
	],
	"qDimensions": [
		{
			"qDef": {
				"qFieldDefs": [
					"Anästhesieart"
				]
			},
			"qNullSuppression": false, //wichtig sonst fehlt die ganze zeile, wenn eintrag null ist
			"qOtherTotalSpec": {
				"qOtherMode": "OTHER_OFF",
				"qSuppressOther": true,
				"qOtherSortMode": "OTHER_SORT_DESCENDING",
				"qOtherCounted": {
					"qv": "5"
				},
				"qOtherLimitMode": "OTHER_GE_LIMIT"
			}
		},
		{
			"qDef": {
				"qFieldDefs": [
					"Diabetes"
				]
			},
			"qNullSuppression": false,
			"qOtherTotalSpec": {
				"qOtherMode": "OTHER_OFF",
				"qSuppressOther": true,
				"qOtherSortMode": "OTHER_SORT_DESCENDING",
				"qOtherCounted": {
					"qv": "5"
				},
				"qOtherLimitMode": "OTHER_GE_LIMIT"
			}
		},
		
		.....
		
	"qMeasures": [],
	"qSuppressZero": false,
	"qSuppressMissing": false,
	"qMode": "S",
	"qInterColumnSortOrder": [19,11,13],
	"qStateName": "$"
	},opplan);
	
	 
	
} );

Problem is that the filter is not always applied.

	var app = qlik.openApp('37dd6c10-3934-4d22-9275-66644639525c', config); //HN
	app.field('Tag').select([0],true);

The page is loaded and data (without filtering) is displayed.

When I hit F5 (reload) the page is reloaded and the filter is applied

When I then again hit F5 the Filter is gone.

... and so on -

Any ideas why?

Thanks!

KR,

Andreas

[Damien_V]

Hello @ARe 

I believe it's because you have the toggle parameter set to true.

https://help.qlik.com/en-US/sense-developer/May2023/Subsystems/APIs/Content/Sense_ClientAPIs/Capabil...

If toggle is true, if there is no selection in the field and you make a selection it will apply, then if you make the same selection again it will remove it, like what you are describing.

Try

app.field('Tag').select([0],false);

and see if it helps.

Best regards,

[ARe]

Hi @Damien_V ,

thanks for you reply. unfortunately setting the parameter to false has no effect.

Meanwhile I opend a support case - let's see.

KR,

ANdreas

[Damien_V · Accepted solution]

Hi @ARe 

We've had a look with my colleague yesterday and as he already communicated to you this is working as designed.

If the same selection is already applied and you try to apply it again then it will remove it when "toggle" is true.

However, the toggle option behaves in a different way depending if you use app.field.select() or app.field.selectValues()

By using app.field.selectValues() with the toggle value set to false, you will get the expected behavior.

Best regards,

[ARe]

Hi @Damien_V 

yes app.field.selectValues() did the trick, thanks. I just verified yesterday in the evening and did not yet update this case 🙂

KR,

Andreas