Greetings Qlik Community,
we have a mashup with a very high number of objects (180 or more), the CPU and RAM utilization is reaching very high that users are not able to see the graphs until the load get lower, I have checked this video about killing hypercubes after each page load.
Video URL: https://www.youtube.com/watch?v=-w-d1Am2cjY
however its not working how we intended it to work, we can't use same page design we need to use different pages so I tried to change in the mashup.js file the function to create objects with different Ids so that I can navigate through them using html but its not navigating unless I load all the functions in the mashup.js file.
how can I navigate through the html pages without needing to load all objects (using routerLink in html).
Mashup.js sample file:
/*
* Bootstrap-based responsive mashup
* @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:"
};
//to avoid errors in workbench: you can remove this when you have added an app
var app;
require.config( {
baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources"
} );
require( ["js/qlik"], function ( qlik ) {
var control = false;
qlik.on( "error", function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
if ( !control ) {
control = true;
$( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 );
}
} );
$( "#closePopup" ).click( function () {
$( '#popup' ).hide();
} );
if ( $( 'ul#qbmlist li' ).length === 0 ) {
$( '#qbmlist' ).append( "<li><a href='#'>No bookmarks available</a></li>" );
}
//
$( "body" ).css( "overflow: hidden;" );
function AppUi ( app ) {
var me = this;
this.app = app;
app.global.isPersonalMode( function ( reply ) {
me.isPersonalMode = reply.qReturn;
} );
app.getAppLayout( function ( layout ) {
$( "#title" ).html( layout.qTitle );
$( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) );
//TODO: bootstrap tooltip ??
} );
app.getList( 'SelectionObject', function ( reply ) {
$( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 );
$( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 );
} );
app.getList( "BookmarkList", function ( reply ) {
var str = "";
reply.qBookmarkList.qItems.forEach( function ( value ) {
if ( value.qData.title ) {
str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>';
}
} );
str += '<li><a data-cmd="create">Create</a></li>';
$( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () {
var id = $( this ).data( 'id' );
if ( id ) {
app.bookmark.apply( id );
} else {
var cmd = $( this ).data( 'cmd' );
if ( cmd === "create" ) {
$( '#createBmModal' ).modal();
}
}
} );
} );
$( "[data-qcmd]" ).on( 'click', function () {
var $element = $( this );
switch ( $element.data( 'qcmd' ) ) {
//app level commands
case 'page1':
page1();
break;
case 'page2':
page2();
break;
case 'clearAll':
app.clearAll();
break;
case 'back':
app.back();
break;
case 'forward':
app.forward();
break;
case 'lockAll':
app.lockAll();
break;
case 'unlockAll':
app.unlockAll();
break;
case 'createBm':
var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val();
app.bookmark.create( title, desc );
$( '#createBmModal' ).modal( 'hide' );
break;
}
} );
}
//callbacks -- inserted here --
//open apps -- inserted here --
app = qlik.openApp('447fd760-f98b-441f-9e6c-d47c8a9e130e', config);
var visList = [];
//get objects -- inserted here --
function page1(){
cleanup();
console.log("page1 triggered");
app.visualization.get('drLNt').then(function(vis){vis.show('QV01');visList.push(vis);});
app.visualization.get('uJcELgD').then(function(vis){vis.show('QV02');visList.push(vis);});
app.visualization.get('wQUvyjs').then(function(vis){vis.show('QV03');visList.push(vis);});
app.visualization.get('DvLyS').then(function(vis){vis.show('QV04');visList.push(vis);});
app.visualization.get('fuaR').then(function(vis){vis.show('QV05');visList.push(vis);});
app.visualization.get('XrXbP').then(function(vis){vis.show('QV06');visList.push(vis);});
app.visualization.get('ANWthBX').then(function(vis){vis.show('QV07');visList.push(vis);});
app.visualization.get('ftdaHUd').then(function(vis){vis.show('QV08');visList.push(vis);});
app.visualization.get('mRXE').then(function(vis){vis.show('QV09');visList.push(vis);});
app.visualization.get('gfJUqv').then(function(vis){vis.show('QV10');visList.push(vis);});
app.visualization.get('GwfP').then(function(vis){vis.show('QV11');visList.push(vis);});
app.visualization.get('avGDu').then(function(vis){vis.show('QV12');visList.push(vis);});
app.visualization.get('muGkD').then(function(vis){vis.show('QV13');visList.push(vis);});
app.visualization.get('cWELe').then(function(vis){vis.show('QV14');visList.push(vis);});
console.log(visList);
}
function page2(){
cleanup();
console.log("page2 triggered");
app.visualization.get('bwccJ').then(function(vis){vis.show('QV20');visList.push(vis);});
app.visualization.get('EbhqxY').then(function(vis){vis.show('QV21');visList.push(vis);});
app.visualization.get('XSDrm').then(function(vis){vis.show('QV23');visList.push(vis);});
app.visualization.get('Wfnnk').then(function(vis){vis.show('QV24');visList.push(vis);});
app.visualization.get('EPmuw').then(function(vis){vis.show('QV25');visList.push(vis);});
app.visualization.get('mUGVPX').then(function(vis){vis.show('QV26');visList.push(vis);});
app.visualization.get('ygpJTAX').then(function(vis){vis.show('QV22');visList.push(vis);});
console.log(visList);
}
function cleanup(){
console.log('closed page ');
visList.forEach(function(vis){
vis.close().then(function(ret){console.log('closed ' + vis.id);});
});
visList = [];
}
page1();
page2();
//create cubes and lists -- inserted here --
if ( app ) {
new AppUi( app );
}
} );
