Qlik Community

Integration, Extension & APIs

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

Announcements
Don't miss the upcoming Q&A with Qlik session on Qlik Application Automation on November 16th! REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
rizaster
Contributor III
Contributor III

Mashup Object renders slowly

Hi all,

As I continue to add more objects to my mashup, the rendering times are increasing. Currently, when I click on a tab, it takes about 3-4 seconds for all of the objects to appear. This isnt too bad, but I am only a quarter of the way done in terms of adding objects to other sections of the site, so I expect this to increase.  These are very simple objects, that do not have complex calculations.

 

I have tried using approach, but it did not help, if anything it slowed it down. 

 

	app.visualization.get('xGhjKl').then(function(vis){
		vis.show("QV01");
	});

 

 Below is my actualJS  code, perhaps I am doing something incorrectly? Maybe it has something to do with the object resize method slowing things down, not sure, but any help would be appreciated, thanks!

 

 

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});

$(document).ready(function(){
$("body").scrollspy({target: "#"}) 
});

function flipcard1() {
$("#firstcard").toggleClass("flip");
}
function flipcard2() {
$("#secondcard").toggleClass("flip");
}
function flipcard3() {
$("#thirdcard").toggleClass("flip");
}
function flipcard4() {
$("#fourthcard").toggleClass("flip");
}

/*
 * 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.setOnError( function ( error ) {
		$( '#popupText' ).append( error.message + "
" );
		$( '#popup' ).fadeIn( 100 );
	} );
	$( "#closePopup" ).click( function () {
		$( '#popup' ).hide();
	} );
// Function to toggle hidden objects in a bootstrap popup modal

	$.fn.extend({

  		toggleResize: function() {

			return this.toggle(1, function() {

			qlik.resize();

			});

  		}

	});

// IDs for showing up on toggleResize function

	$(document).ready(function(){

		$('.btn').on('click', function(event) {


			qlik.resize();

		});
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  			qlik.resize();
		} );
	});


	//callbacks -- inserted here --
	//open apps -- inserted here --


	var app1 = qlik.openApp('org analysis cost savings _V3.qvf', config);


	//get objects -- inserted here --


app1.visualization.get('362485c5-ae22-45ad-b71d-0495db5bf853').then(function(vis){vis.show("vSP_SVP_adj_4");});
app1.visualization.get('d7d7a6c9-8468-4da8-a67f-95f765ca5ee0').then(function(vis){vis.show("vSP_to_adj_8");});
app1.visualization.get('62e38075-3d4d-420c-9c33-46c2af8b8be4').then(function(vis){vis.show("vSP_TL_table");});
app1.visualization.get('0098a10a-06dc-458a-b9da-b1e34683fd25').then(function(vis){vis.show("vSP_TL_reset");});
app1.visualization.get('20d4ed2c-9201-4b74-8a4a-124b1750afba').then(function(vis){vis.show("vSP_TL_adj_8");});
app1.visualization.get('9c6e1765-c9e9-4655-8bfa-aaabfcda463c').then(function(vis){vis.show("vSP_TL_adj_7");});
app1.visualization.get('afaadcfd-8ab5-4662-ab52-a54efb4462fa').then(function(vis){vis.show("vSP_TL_adj_6");});
app1.visualization.get('94323e91-b5b8-4070-bf31-24477ae7e517').then(function(vis){vis.show("vSP_TL_adj_5");});
app1.visualization.get('c8c10a04-2527-417e-9d54-f4ad33d79fc7').then(function(vis){vis.show("vSP_TL_adj_4");});
app1.visualization.get('3a3734ce-749e-43e4-b1ec-17da01e18e5f').then(function(vis){vis.show("vSP_TL_adj_3");});
app1.visualization.get('2a147de7-0411-46d3-9b5b-e8ad78490537').then(function(vis){vis.show("vSP_TL_adj_2");});
app1.visualization.get('80cfc1d8-e4b6-44de-83ef-7ea986473a60').then(function(vis){vis.show("vSP_TL_adj_1");});
app1.visualization.get('636937b6-5330-4f11-ad98-38a38ae4f022').then(function(vis){vis.show("SP_TL_1");});
app1.visualization.get('743cdb5c-5cf2-4f4a-bffb-dcb3b5cf4037').then(function(vis){vis.show("SP_TL_4");});
app1.visualization.get('9a5356c1-bc69-41ed-9afd-c72f9d0a01ff').then(function(vis){vis.show("SP_TL_3");});
app1.visualization.get('e95fa751-e5ee-4e78-94f4-9a7d181d421e').then(function(vis){vis.show("SP_TL_2");});
app1.visualization.get('shcXWAr').then(function(vis){vis.show("SP_TL_count3");});
app1.visualization.get('HRULJT').then(function(vis){vis.show("SP_TL_count4");});
app1.visualization.get('PSeF').then(function(vis){vis.show("SP_TL_cost");});
app1.visualization.get('mMYCuv').then(function(vis){vis.show("SP_TL_count2");});
app1.visualization.get('aAeKCpL').then(function(vis){vis.show("SP_TL_count1");});
app1.visualization.get('6acc269a-dab0-4e85-a00c-04ee72cd7a95').then(function(vis){vis.show("vSP_engineer_reset");});
app1.visualization.get('29aabe25-4aea-4864-83f2-baeeea5ab8a4').then(function(vis){vis.show("vSP_engineer_adj_8");});
app1.visualization.get('2ddfbcae-c8bb-428c-8c0e-6e13adaa18e7').then(function(vis){vis.show("vSP_engineer_adj_7");});
app1.visualization.get('4c7d5439-d485-43f0-8852-f48c172235fd').then(function(vis){vis.show("vSP_engineer_adj_6");});
app1.visualization.get('3098d761-720e-4f34-a4f8-bf09eef3f4d4').then(function(vis){vis.show("vSP_engineer_adj_5");});
app1.visualization.get('929c8990-13b4-453f-a6fc-eb9de61d2458').then(function(vis){vis.show("vSP_engineer_adj_4");});
app1.visualization.get('97302087-12c2-42c1-badb-644830d1094b').then(function(vis){vis.show("vSP_engineer_adj_3");});
app1.visualization.get('ab366be6-abe7-4a13-8c7f-a747b1fbedd2').then(function(vis){vis.show("vSP_engineer_adj_2");});
app1.visualization.get('858607b6-1c4c-453e-8f3a-9c8640fccdfa').then(function(vis){vis.show("vSP_engineer_adj_1");});
app1.visualization.get('d15072c6-ce70-4d40-8118-cdc7c1dd825a').then(function(vis){vis.show("SP_engineer_1");});
app1.visualization.get('fe0f5d41-f7c7-4021-b798-382bcbd496c9').then(function(vis){vis.show("vSP_engineer_table");});
app1.visualization.get('cd4c7a0c-c6de-4a0a-b189-04eef8350f1c').then(function(vis){vis.show("SP_engineer_4");});
app1.visualization.get('0b0171d7-2653-46c3-9031-bac209daea9d').then(function(vis){vis.show("SP_engineer_3");});
app1.visualization.get('c0c4910a-adcc-40cd-aa5a-91c14cbb8e9d').then(function(vis){vis.show("SP_engineer_2");});
app1.visualization.get('TJeYDQ').then(function(vis){vis.show("SP_engineer_count4");});
app1.visualization.get('CwXFXs').then(function(vis){vis.show("SP_engineer_count3");});
app1.visualization.get('acFRwJR').then(function(vis){vis.show("SP_engineer_count2");});
app1.visualization.get('RmREsY').then(function(vis){vis.show("SP_engineer_count1");});
app1.visualization.get('jPZUbp').then(function(vis){vis.show("SP_engineer_cost");});
app1.visualization.get('cLsXbXy').then(function(vis){vis.show("vSP_to_reset");});
app1.visualization.get('9b86d67d-fe40-41f7-881c-6763772bcc95').then(function(vis){vis.show("vSP_to_adj_7");});
app1.visualization.get('7073c375-da09-421e-9b5e-26adf48a4d2b').then(function(vis){vis.show("vSP_to_adj_6");});
app1.visualization.get('c5232ad7-831b-4140-a1b5-0ca299809781').then(function(vis){vis.show("vSP_to_adj_5");});
app1.visualization.get('aa67b74a-014a-42d3-8d4c-850a10ca426e').then(function(vis){vis.show("vSP_to_adj_4");});
app1.visualization.get('fe6854fe-1760-44bb-b7e1-6b936934988d').then(function(vis){vis.show("vSP_to_adj_3");});
app1.visualization.get('5c7a679e-dd03-4802-9418-8a6f8eb35043').then(function(vis){vis.show("vSP_to_adj_2");});
app1.visualization.get('e8fb5b2f-e2fc-4794-b8fc-a6596ade9627').then(function(vis){vis.show("vSP_to_adj_1");});
app1.visualization.get('5ac5a938-9247-4468-b7e8-51749e5d5753').then(function(vis){vis.show("SP_to_1");});
app1.visualization.get('35a0b7cf-0055-4a48-8889-a0d62f6f8f28').then(function(vis){vis.show("SP_to_4");});
app1.visualization.get('11f6f23e-beb7-4bac-a3f1-1257a0eba154').then(function(vis){vis.show("SP_to_3");});
app1.visualization.get('80c7f865-be47-47f6-8bf0-57b5b83d8d3c').then(function(vis){vis.show("SP_to_2");});
app1.visualization.get('bsMrT').then(function(vis){vis.show("vSP_to_table");});
app1.visualization.get('eYajyVp').then(function(vis){vis.show("SP_to_cost");});
app1.visualization.get('XUgAFkT').then(function(vis){vis.show("SP_to_count4");});
app1.visualization.get('JprntLP').then(function(vis){vis.show("SP_to_count3");});
app1.visualization.get('kbBrJz').then(function(vis){vis.show("SP_to_count2");});
app1.visualization.get('DNpweJD').then(function(vis){vis.show("SP_to_count1");});
app1.visualization.get('5a021a31-b932-4942-9723-cc0544028f37').then(function(vis){vis.show("vSP_intern_reset");});
app1.visualization.get('79b028b7-d58c-421a-8ef7-da182517e6c5').then(function(vis){vis.show("vSP_intern_adj_8");});
app1.visualization.get('e5c8f0c8-c8b9-4a6e-b95e-59706c890f0d').then(function(vis){vis.show("vSP_intern_adj_7");});
app1.visualization.get('0ee0e255-accd-4c42-ad55-490e2130e3ce').then(function(vis){vis.show("vSP_intern_adj_6");});
app1.visualization.get('71f9f193-3f3a-4247-80f2-7f5e14511d72').then(function(vis){vis.show("vSP_intern_adj_5");});
app1.visualization.get('05274617-d0a7-4d1c-9e7e-9d39f3f78ea6').then(function(vis){vis.show("vSP_intern_adj_4");});
app1.visualization.get('0232eba8-f4a5-4ddd-bf9e-72212778e685').then(function(vis){vis.show("vSP_intern_adj_3");});
app1.visualization.get('4c7580d3-69cc-4af7-a093-7fd53cca6b3d').then(function(vis){vis.show("vSP_intern_adj_2");});
app1.visualization.get('acda6660-9c85-40bb-aaf3-197ed6e1e1b8').then(function(vis){vis.show("vSP_intern_adj_1");});
app1.visualization.get('a27493d8-cc2d-49a2-9149-2ede51f665f7').then(function(vis){vis.show("vSP_intern_table");});
app1.visualization.get('mPCpd').then(function(vis){vis.show("SP_intern_cost");});
app1.visualization.get('c46ff78b-2423-4bff-b106-aa7623972448').then(function(vis){vis.show("SP_intern_1");});
app1.visualization.get('ecf691e6-e8be-45bd-8946-578eb3afdcff').then(function(vis){vis.show("SP_intern_4");});
app1.visualization.get('9e3690ee-f06d-4b6c-ba6a-807b9d91288a').then(function(vis){vis.show("SP_intern_3");});
app1.visualization.get('ceb08f27-6069-4b75-9a61-5a8242a72300').then(function(vis){vis.show("SP_intern_2");});
app1.visualization.get('XjsPAJ').then(function(vis){vis.show("SP_intern_count4");});
app1.visualization.get('jhExFB').then(function(vis){vis.show("SP_intern_count3");});
app1.visualization.get('XpBnE').then(function(vis){vis.show("SP_intern_count2");});
app1.visualization.get('GExezw').then(function(vis){vis.show("SP_intern_count1");});
app1.visualization.get('d4be23bc-46e4-4568-aa61-5b89399b5eb1').then(function(vis){vis.show("vSP_SVP_adj_8");});
app1.visualization.get('89e94679-c863-44c6-8543-45600f6e6175').then(function(vis){vis.show("vSP_SVP_adj_7");});
app1.visualization.get('3c7078aa-7449-4b6b-ae4d-af7ad2ebc57e').then(function(vis){vis.show("vSP_SVP_adj_6");});
app1.visualization.get('c20dfb47-4aef-4554-b930-30ce870929f1').then(function(vis){vis.show("vSP_SVP_adj_5");});
app1.visualization.get('a09a996f-6398-4d25-b5b5-1c40e7567cf6').then(function(vis){vis.show("vSP_SVP_adj_3");});
app1.visualization.get('cfd0d6b5-94e9-493d-ae8d-ef940d3b3985').then(function(vis){vis.show("vSP_SVP_adj_2");});
app1.visualization.get('9f7b1a56-ba4a-4d96-bc96-2a84c427b612').then(function(vis){vis.show("vSP_SVP_adj_1");});
app1.visualization.get('XHpSBr').then(function(vis){vis.show("SP_SVP_count4");});
app1.visualization.get('RFpjM').then(function(vis){vis.show("SP_SVP_count3");});
app1.visualization.get('FUGNh').then(function(vis){vis.show("SP_SVP_count2");});
app1.visualization.get('GzXR').then(function(vis){vis.show("SP_SVP_count1");});
app1.visualization.get('rkphU').then(function(vis){vis.show("cont_castsav");});
app1.visualization.get('a425ff2f-1620-4973-a5bf-9cc49b2a4058').then(function(vis){vis.show("tot_costsav");});
app1.visualization.get('80f94180-b4d8-48a6-b68c-845c7d375837').then(function(vis){vis.show("SP_VP_1");});
app1.visualization.get('CDu').then(function(vis){vis.show("US_costsav");});
app1.visualization.get('gHSjSar').then(function(vis){vis.show("US_char_tot");});
app1.visualization.get('594ca953-0111-47d7-9c4b-fdad8d0743bc').then(function(vis){vis.show("vSP_SVP_reset");});
app1.visualization.get('45973928-fc5b-460f-882c-c062680ee436').then(function(vis){vis.show("vSP_VP_reset");});
app1.visualization.get('ceabbb49-5bec-4adb-b42d-5fc25f108512').then(function(vis){vis.show("SP_SVP_1");});
app1.visualization.get('fb4a4266-ba4a-4749-b71e-2a0e9b902188').then(function(vis){vis.show("SP_SVP_4");});
app1.visualization.get('9bb16c58-5649-49ce-9f51-94e1a9b9f09b').then(function(vis){vis.show("SP_SVP_3");});
app1.visualization.get('69737cc1-97e8-4bb9-b928-ff53b9e9f070').then(function(vis){vis.show("SP_SVP_2");});
app1.visualization.get('ed4984ff-289f-4f1d-8648-f54694401ef7').then(function(vis){vis.show("SP_VP_4");});
app1.visualization.get('0f9eca39-a770-4a56-8781-fc783234086f').then(function(vis){vis.show("SP_VP_3");});
app1.visualization.get('ea6e2877-c500-4a99-bdeb-75177076da71').then(function(vis){vis.show("SP_VP_2");});
app1.visualization.get('37c47ecc-c2f0-47ae-8b8b-e817102da3de').then(function(vis){vis.show("vSP_VP_table");});
app1.visualization.get('8eec4c0d-f683-490c-ae28-a3fb0e0c4274').then(function(vis){vis.show("vSP_SVP_table");});
app1.visualization.get('sLzXzYc').then(function(vis){vis.show("SP_SVP_cost");});
app1.visualization.get('FmqjPnd').then(function(vis){vis.show("SP_VP_cost");});
app1.visualization.get('2448870c-c61a-4250-b86e-01d868b1ac4c').then(function(vis){vis.show("vSP_VP_adj_8");});
app1.visualization.get('9c989bdb-2b4f-4276-bae5-cb7b93bf7314').then(function(vis){vis.show("vSP_VP_adj_7");});
app1.visualization.get('efc556f0-6540-4cfa-9424-ca22b566b113').then(function(vis){vis.show("vSP_VP_adj_6");});
app1.visualization.get('92961cf1-c1be-4d15-8838-dbea76cac74f').then(function(vis){vis.show("vSP_VP_adj_5");});
app1.visualization.get('3062b333-ed2f-453d-80ca-971c43a3d997').then(function(vis){vis.show("vSP_VP_adj_4");});
app1.visualization.get('05e95926-73ba-4013-b316-f8e62cdb71ba').then(function(vis){vis.show("vSP_VP_adj_3");});
app1.visualization.get('7f6d6f3e-a5a4-49a4-aeeb-fd7877228152').then(function(vis){vis.show("vSP_VP_adj_2");});
app1.visualization.get('8e82f95b-4022-454b-841a-3b1aa09c820a').then(function(vis){vis.show("vSP_VP_adj_1");});
app1.visualization.get('PKKmzt').then(function(vis){vis.show("SP_VP_count4");});
app1.visualization.get('ejWru').then(function(vis){vis.show("SP_VP_count3");});
app1.visualization.get('nkEJcze').then(function(vis){vis.show("SP_VP_count2");});
app1.visualization.get('VxHxyru').then(function(vis){vis.show("SP_VP_count1");});
app1.visualization.get('fe7a55f1-71bb-4de0-984e-8849c64fd51d').then(function(vis){vis.show("vSP_director_adj_8");});
app1.visualization.get('c5243739-39cc-40bb-867c-f1f650f4630c').then(function(vis){vis.show("vSP_director_adj_7");});
app1.visualization.get('a7f36d31-d050-473b-896b-4a89fe21c660').then(function(vis){vis.show("vSP_director_adj_6");});
app1.visualization.get('7a393b70-5658-4256-85f1-82307ac7f30e').then(function(vis){vis.show("vSP_director_adj_5");});
app1.visualization.get('22b5081b-362e-4395-adf8-816b7701bb64').then(function(vis){vis.show("vSP_director_adj_4");});
app1.visualization.get('00c3152f-4781-4acb-b0e1-81abed19708d').then(function(vis){vis.show("vSP_director_adj_3");});
app1.visualization.get('e5ecf583-ea73-4820-9afa-c77f16054269').then(function(vis){vis.show("vSP_director_adj_2");});
app1.visualization.get('0bc79e0d-b176-48ff-9069-3e86cd5fe75b').then(function(vis){vis.show("vSP_director_adj_1");});
app1.visualization.get('0b50289c-6afe-4b6e-bbd5-b9a9fc651fa9').then(function(vis){vis.show("vSP_director_reset");});
app1.visualization.get('91bd9bc5-39a4-42a7-9482-a7e982675a67').then(function(vis){vis.show("vSP_director_table");});
app1.visualization.get('481c83a2-2d08-449d-a829-6456ddefefae').then(function(vis){vis.show("SP_director_1");});
app1.visualization.get('0fccd254-45c7-4190-aa85-957112f9f40b').then(function(vis){vis.show("SP_director_4");});
app1.visualization.get('cd263bec-2901-4bf6-9cf0-cb9754fa07bf').then(function(vis){vis.show("SP_director_3");});
app1.visualization.get('71196011-fc91-4098-8dfc-2ea1608bf5da').then(function(vis){vis.show("SP_director_2");});
app1.visualization.get('jCsxnU').then(function(vis){vis.show("SP_director_cost");});
app1.visualization.get('jhJWYgu').then(function(vis){vis.show("SP_director_count4");});
app1.visualization.get('HTvmM').then(function(vis){vis.show("SP_director_count3");});
app1.visualization.get('PxzDjLU').then(function(vis){vis.show("SP_director_count2");});
app1.visualization.get('mFPMts').then(function(vis){vis.show("SP_director_count1");});
app1.visualization.get('a5a02323-8301-4acb-958c-78bea6d097cc').then(function(vis){vis.show("SP_manager_1");});
app1.visualization.get('qpCgkj').then(function(vis){vis.show("SP_manager_count4");});
app1.visualization.get('Tzqtur').then(function(vis){vis.show("SP_manager_count3");});
app1.visualization.get('ZdcjHsc').then(function(vis){vis.show("SP_manager_count2");});
app1.visualization.get('wgjWjh').then(function(vis){vis.show("SP_manager_count1");});
app1.visualization.get('a67ffdce-7464-4a77-8a6b-7ea9b40c731c').then(function(vis){vis.show("vSP_manager_adj_8");});
app1.visualization.get('d560285e-33f6-4297-9377-b37e08c4aa19').then(function(vis){vis.show("vSP_manager_adj_7");});
app1.visualization.get('a46a967e-6070-4c07-9c10-c00668f55d5c').then(function(vis){vis.show("vSP_manager_adj_6");});
app1.visualization.get('9927d380-37c2-40e4-98e9-fd542977ab67').then(function(vis){vis.show("vSP_manager_adj_5");});
app1.visualization.get('a0b83c85-f2a5-4507-9bb2-051d81f9528a').then(function(vis){vis.show("vSP_manager_adj_4");});
app1.visualization.get('c585d73c-d4d7-44fc-837a-aa8172c1a0c5').then(function(vis){vis.show("vSP_manager_adj_3");});
app1.visualization.get('9eadf1e1-f0d3-4e55-bb52-ea4d5b579f73').then(function(vis){vis.show("vSP_manager_adj_2");});
app1.visualization.get('9aab9038-4a74-41a7-ab36-34639d3bd86e').then(function(vis){vis.show("vSP_manager_adj_1");});
app1.visualization.get('901ffb99-1bbc-492d-817b-e8a4bbe21511').then(function(vis){vis.show("vSP_manager_table");});
app1.visualization.get('3edbbcef-0194-4b37-ab57-0639a1ad1850').then(function(vis){vis.show("vSP_manager_reset");});
app1.visualization.get('d08f6b65-ac79-40ec-9cb3-2d03d5aa4526').then(function(vis){vis.show("SP_manager_4");});
app1.visualization.get('aa03a72f-10b5-41b5-b7eb-5699a6ab265b').then(function(vis){vis.show("SP_manager_3");});
app1.visualization.get('463f6f25-8e0c-461f-926d-c30568bdc681').then(function(vis){vis.show("SP_manager_2");});
app1.visualization.get('ghChnp').then(function(vis){vis.show("SP_manager_cost");});
app1.visualization.get('f73cb713-05f3-4b98-9a17-ad92b244c7c0').then(function(vis){vis.show("SP_sranalyst_1");});
app1.visualization.get('13b704e8-3dca-48b5-9d8d-a45685c75291').then(function(vis){vis.show("vSP_sranalyst_reset");});
app1.visualization.get('NqLmHm').then(function(vis){vis.show("SP_sranalyst_count4");});
app1.visualization.get('bxrtmtv').then(function(vis){vis.show("SP_sranalyst_count3");});
app1.visualization.get('nbfqkbt').then(function(vis){vis.show("SP_sranalyst_count2");});
app1.visualization.get('mzJARfE').then(function(vis){vis.show("SP_sranalyst_count1");});
app1.visualization.get('cJNfYx').then(function(vis){vis.show("SP_sranalyst_cost");});
app1.visualization.get('f82f9341-ca44-4fc7-a5a3-66223da63984').then(function(vis){vis.show("vSP_sranalyst_table");});
app1.visualization.get('eceec0e1-e53f-48aa-b939-eb256d97d1a7').then(function(vis){vis.show("SP_sranalyst_4");});
app1.visualization.get('b35143b7-f765-4beb-a22f-a5e917fd4aa6').then(function(vis){vis.show("SP_sranalyst_3");});
app1.visualization.get('59f5df0c-84f4-4af4-a307-6347d116c8e2').then(function(vis){vis.show("SP_sranalyst_2");});
app1.visualization.get('5414a4e4-2179-4641-9f1f-13ec4ee91feb').then(function(vis){vis.show("vSP_sranalyst_adj_8");});
app1.visualization.get('351053d8-e4b7-4909-9ec1-50b53fb1c4ab').then(function(vis){vis.show("vSP_sranalyst_adj_7");});
app1.visualization.get('dca3b99a-f471-4f40-ae52-1a3a96aa2e2c').then(function(vis){vis.show("vSP_sranalyst_adj_6");});
app1.visualization.get('bc63d6d1-f635-4e1e-90d9-4d7ee0996023').then(function(vis){vis.show("vSP_sranalyst_adj_5");});
app1.visualization.get('adc11e12-5ce0-4fc2-99bb-13838c3bef47').then(function(vis){vis.show("vSP_sranalyst_adj_4");});
app1.visualization.get('8e8b6a60-2d82-43aa-9fc3-c127852b42c8').then(function(vis){vis.show("vSP_sranalyst_adj_3");});
app1.visualization.get('e7979249-2a69-46bf-8f4d-7e739711b5ef').then(function(vis){vis.show("vSP_sranalyst_adj_2");});
app1.visualization.get('5c6e2585-0939-4407-8891-5543a1c0f8dc').then(function(vis){vis.show("vSP_sranalyst_adj_1");});
app1.visualization.get('MqC').then(function(vis){vis.show("SP_analyst_cost");});
app1.visualization.get('8aee3e1a-eda6-4008-9bcb-13f8b4986799').then(function(vis){vis.show("SP_analyst_1");});
app1.visualization.get('084f1816-94ea-476b-93f9-201750c26c4f').then(function(vis){vis.show("vSP_analyst_reset");});
app1.visualization.get('55975f96-b5bf-4031-8595-98690f445f13').then(function(vis){vis.show("vSP_analyst_table");});
app1.visualization.get('799c47e9-0e60-4d13-b40c-31e5618fdc95').then(function(vis){vis.show("SP_analyst_4");});
app1.visualization.get('f46568b5-c7d9-4f59-af43-c98a5e56d384').then(function(vis){vis.show("SP_analyst_3");});
app1.visualization.get('742e3f3c-b984-4f21-9247-efaebd532a3f').then(function(vis){vis.show("SP_analyst_2");});
app1.visualization.get('032ef02e-86b6-4457-aa9f-4407ace799be').then(function(vis){vis.show("vSP_analyst_adj_8");});
app1.visualization.get('ae6d8c54-746e-466f-af97-a96b265f8e12').then(function(vis){vis.show("vSP_analyst_adj_7");});
app1.visualization.get('622edc76-69eb-4ce2-8f22-60c57af48103').then(function(vis){vis.show("vSP_analyst_adj_6");});
app1.visualization.get('60250eb6-c69b-4128-a76d-2938d27ea03a').then(function(vis){vis.show("vSP_analyst_adj_5");});
app1.visualization.get('50550181-afe9-43b4-ad0f-26f7d091ff71').then(function(vis){vis.show("vSP_analyst_adj_4");});
app1.visualization.get('335c8e98-6fe9-4c7a-9be0-8945323e7b6a').then(function(vis){vis.show("vSP_analyst_adj_3");});
app1.visualization.get('82c394c4-de2b-4b00-89a9-42d1068c2812').then(function(vis){vis.show("vSP_analyst_adj_2");});
app1.visualization.get('b3421804-1e7b-4bda-8b06-3ce471ea1854').then(function(vis){vis.show("vSP_analyst_adj_1");});
app1.visualization.get('UWNPuRW').then(function(vis){vis.show("SP_analyst_count4");});
app1.visualization.get('VjXVsP').then(function(vis){vis.show("SP_analyst_count3");});
app1.visualization.get('Xjeptd').then(function(vis){vis.show("SP_analyst_count2");});
app1.visualization.get('ZDJmgkz').then(function(vis){vis.show("SP_analyst_count1");});
app1.visualization.get('jCJJCTy').then(function(vis){vis.show("SP_reset");});
app1.visualization.get('0896fcc6-b59e-4921-b5f0-20df72fb691f').then(function(vis){vis.show("SP_assistant_1");});
app1.visualization.get('bcf4f3d6-d250-44c9-84a0-7ab022034a7a').then(function(vis){vis.show("vSP_assistant_reset");});
app1.visualization.get('nDwZctB').then(function(vis){vis.show("SP_assistant_cost");});
app1.visualization.get('2cba2bac-316f-4b45-91cb-1ca5e0e01411').then(function(vis){vis.show("vSP_assistant_table");});
app1.visualization.get('6c4762f3-89ad-4efd-b90b-af02c9682439').then(function(vis){vis.show("vSP_assistant_adj_8");});
app1.visualization.get('0948e835-6af6-48e5-bc51-d4a72c7b2dd5').then(function(vis){vis.show("vSP_assistant_adj_6");});
app1.visualization.get('aa80812f-8a56-45d5-b9ff-c5e42491dc51').then(function(vis){vis.show("vSP_assistant_adj_7");});
app1.visualization.get('7622fc10-fe54-4b35-a18b-8285ff865ac7').then(function(vis){vis.show("vSP_assistant_adj_5");});
app1.visualization.get('d5ca180d-4a98-4c20-b277-3296485279dd').then(function(vis){vis.show("vSP_assistant_adj_4");});
app1.visualization.get('d87b49f4-58d7-403c-83ab-d2cb9fe7f420').then(function(vis){vis.show("vSP_assistant_adj_3");});
app1.visualization.get('4da09c27-1290-4a68-9229-a76e3cf729df').then(function(vis){vis.show("vSP_assistant_adj_2");});
app1.visualization.get('ee33cb72-0522-4211-bbab-35a2d6728fc5').then(function(vis){vis.show("vSP_assistant_adj_1");});
app1.visualization.get('00b7fdeb-2173-4b5c-a8f8-1e313dedba3c').then(function(vis){vis.show("SP_assistant_3");});
app1.visualization.get('3f65f76c-d6b9-4aa6-9da0-2ed2a65dbca2').then(function(vis){vis.show("SP_assistant_4");});
app1.visualization.get('342f6f1e-7e34-4884-ac6a-255589b06af3').then(function(vis){vis.show("SP_assistant_2");});
app1.visualization.get('fnLdy').then(function(vis){vis.show("SP_assistant_count4");});
app1.visualization.get('YnGm').then(function(vis){vis.show("SP_assistant_count3");});
app1.visualization.get('PPzNVrX').then(function(vis){vis.show("SP_assistant_count2");});
app1.visualization.get('KJbVJ').then(function(vis){vis.show("SP_assistant_count1");});
app1.visualization.get('DSSZrAs').then(function(vis){vis.show("SP_overall_count4");});
app1.visualization.get('PLDpdD').then(function(vis){vis.show("SP_overall_count3");});
app1.visualization.get('mWQfDgK').then(function(vis){vis.show("SP_overall_count2");});
app1.visualization.get('SUpGuN').then(function(vis){vis.show("SP_overall_count1");});
app1.visualization.get('e9638eea-ab29-4623-8005-a6d2b14a2184').then(function(vis){vis.show("vSP_overall_table");});
app1.visualization.get('405115ee-7f13-40f4-a646-b0a82886d27f').then(function(vis){vis.show("SP_overall_1");});
app1.visualization.get('8a605e6a-f50a-47a3-9106-c9cccbd6f782').then(function(vis){vis.show("SP_overall_4");});
app1.visualization.get('52e92a4c-dde6-410b-a306-764d6b824613').then(function(vis){vis.show("SP_overall_3");});
app1.visualization.get('1dee5172-3823-4bb7-97eb-633f8e59384b').then(function(vis){vis.show("SP_overall_2");});
app1.visualization.get('aCwrPU').then(function(vis){vis.show("SP_overall_cost");});
app1.visualization.get('pCPVVya').then(function(vis){vis.show("SP_costsav");});
app1.visualization.get('EzPbsZ').then(function(vis){vis.show("SP_graph");});

	

	
	
	
	//create cubes and lists -- inserted here --

} );

 

 

1 Solution

Accepted Solutions
cpomeren003
Partner
Partner

Hi,

What I would do is:
- When bootstrap tab gets clicked only get and show these visualizations;
- All other visualizations are closed so they don't slow everything down;

So first you need to figure out when people go to a specific tab. Use this a a starting point (found here: https://getbootstrap.com/docs/4.0/components/navs/😞

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

 
In this function (e) you should probably call something like this:

qlikVisualizations.forEach(qlikVisualization => {
  app.visualization.get(qlikVisualization.id).then(vis => {
    vis.show(qlikVisualization.elementId);
    qlikVisualization.QVisualization = vis;
  });
});

Where qlikVisualizations looks like this (id is objectID and elementId is the HTML id):

qlikVisualizations: [
       {
         id: "awe32",
         elementId: "element1",
         QVisualization: undefined
       },
       {
         id: "brwe2",
         elementId: "element2",
         QVisualization: undefined
       }
];


And when you try to close the visualizations you use this code, so first find the event that happens when you close a tab (see: https://getbootstrap.com/docs/3.4/javascript/#tabs-events) and then basically call this close function:

qlikVisualizations.forEach(({ QVisualization }) => {
  QVisualization.close();
  QVisualization = undefined;
});


You could also use the following logic (it's easier I think):
- Create a global array called activeVizs that starts off as an empty array, so:
activeVizs: [];
- When I open a tab I check if there are any visualizations in the array called activeVizs, if there are I will close them with the above close function;
- After that I get and show all the needed visualizations of the current active tab (same as before) and I will add all these visualizations to the array activeVizs;

This way there will only be one tab worth of visualizations active.

Hope this helps.

View solution in original post

10 Replies
ErikWetterberg

Hi,

Looks like a lot of objects. Try not getting them until the users opens the tab where they are shown.

rizaster
Contributor III
Contributor III
Author

Thanks, this is what I was thinking, but unsure how that would be implemented. Any ideas or examples? Thanks!

rizaster
Contributor III
Contributor III
Author

Bump, any guidance would be appreciated.

oz_moyal
Creator
Creator

Hi,
First load ONLY the visualizations that needs to be visible when page loads, do not load ALL the visualizations.

Now, what action leads to show different vis ?
if it is tab switch, then only when user OPEN the tab, load the visualizations that are visible in the new tab

Also u should consider closing the visualizations that are no longer visible (vis. close (u will need to keep reference of the visualizations)

If u need more help u need to share what is that u show, when do u need to show different visualizations, it is not enough just to show code, we need to understand how the UI works to optimize it.

rizaster
Contributor III
Contributor III
Author

Hi,

Thanks for the response. To give an overview of the UI, there are 4 sections of the page, each with their own modal (bootstrap). When you click on the modal, the modal contains bootstrap tabs, each tab has different objects. 

A specific example of loading when opening a tab would be helpful to get me in the right direction. Thanks!

cpomeren003
Partner
Partner

Hi,

What I would do is:
- When bootstrap tab gets clicked only get and show these visualizations;
- All other visualizations are closed so they don't slow everything down;

So first you need to figure out when people go to a specific tab. Use this a a starting point (found here: https://getbootstrap.com/docs/4.0/components/navs/😞

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

 
In this function (e) you should probably call something like this:

qlikVisualizations.forEach(qlikVisualization => {
  app.visualization.get(qlikVisualization.id).then(vis => {
    vis.show(qlikVisualization.elementId);
    qlikVisualization.QVisualization = vis;
  });
});

Where qlikVisualizations looks like this (id is objectID and elementId is the HTML id):

qlikVisualizations: [
       {
         id: "awe32",
         elementId: "element1",
         QVisualization: undefined
       },
       {
         id: "brwe2",
         elementId: "element2",
         QVisualization: undefined
       }
];


And when you try to close the visualizations you use this code, so first find the event that happens when you close a tab (see: https://getbootstrap.com/docs/3.4/javascript/#tabs-events) and then basically call this close function:

qlikVisualizations.forEach(({ QVisualization }) => {
  QVisualization.close();
  QVisualization = undefined;
});


You could also use the following logic (it's easier I think):
- Create a global array called activeVizs that starts off as an empty array, so:
activeVizs: [];
- When I open a tab I check if there are any visualizations in the array called activeVizs, if there are I will close them with the above close function;
- After that I get and show all the needed visualizations of the current active tab (same as before) and I will add all these visualizations to the array activeVizs;

This way there will only be one tab worth of visualizations active.

Hope this helps.

View solution in original post

rizaster
Contributor III
Contributor III
Author

This is extremely helpful, especially for someone who is fairly new to JS. Thanks for the well thought out walk through!

rizaster
Contributor III
Contributor III
Author

In case anyone needed the specific code i used, below is an example. Although Cpomeren003's code worked (with slight tweaks), the objects were still rendering slowly. Since my app has over 400 objects, two things were needed to speed it up:1) use a multi dimensional array and 2) the for loop should only activate when the tab name matches the appropriate part in the array. This is a little different from the original for loop (according to my understanding anyways) because in the original for loop, any tab you click on will make you run through the whole array of 400 items, hence why it didnt really improve speed. Additionally, I didnt need to use the close function since this is a scenario planning tool, and the adjustments made in each tab need to stay even after navigating away from the tab.

Long story short, the dashboard is really fast now, stake holders are happy, and hopefully this explanation helps anyone in a similar situation. Thanks again for all the help!

 

 

 

 

 

var objects = {
	US_assistant: [
		['US_assistant_count4','fnLdy'],
		['US_assistant_count3','YnGm'],
		['US_assistant_count2','PPzNVrX'],
		['US_assistant_count1','KJbVJ']
	],
	US_analyst:[
		 ['US_analyst_count4','UWNPuRW'],
		 ['US_analyst_count3','VjXVUS'],
		 ['US_analyst_count2','Xjeptd'],
		 ['US_analyst_count1','ZDJmgkz']
	]};

$('a[data-toggle="tab"]').on('click', function (e) {
	e.preventDefault();
        //stores opened tab name
	var target = $(e.target).attr("href");
 	target = target.replace('#','')
 // iterate through outer loop of array, match with tab that is clicked
		for (var key in objects) {
			if (key==target){
          //pulls objects belonging specifically to the opened tab
				for (var key1 in objects[key]) {				
						app1.getObject(objects[key][key1][0],objects[key][key1][1]);
				};	
			  };
		};
	});

 

 

 

 

 

cpomeren003
Partner
Partner

Rizaster, just to clarify, I never meant for you to load all the 400 objects at the same time, because as you found out it will still be super slow. In my example I used an array called "qlikVisualizations" but it would only have the current active objects, so for example 20 of the 400 objects. The reason I could do this was that my original code was based on a vue.js app and every page/component in it had its own list of objects(qlikVisualizations array) to render when active and to remove when deactivated.

Some tips:

  • You mention the term multi dimensional array, another good term for this is "nested arrays". I generally find that an easier term to remember.
  • I see that you use a standard for loop instead of the forEach method. There isn't really anything wrong with this, but just make sure you understand how the forEach method works, since it is such a powerful and easy method to use.
  • Instead of: 

 

var target = $(e.target).attr("href");
 	target = target.replace('#','')​

I would use:

let target = $(e.target).attr("href").substring(1);
​

 

  • Instead of:

 

for (var key1 in objects[key]) {				
   app1.getObject(objects[key][key1][0],objects[key][key1][1]);
};	​

I would use:

objects[key].forEach(function(element) {
  app1.getObject(element[0], element[1])
});​

 

  • You currently use the getObject method. Have you tried swapping between all the tabs back and forth? In my experience, since you never close these objects it will lag after a while since you never close these objects. For example, first tab opens 10 objects, second tab opens 20 objects and third tab opens 10 objects, this results in a total of 40 objects being 'active' / in memory. In an ideal scenario there should only be 10 objects in memory (those of the last opened tab).

Hope it helps!