Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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 --
} );
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.
Hi,
Looks like a lot of objects. Try not getting them until the users opens the tab where they are shown.
Thanks, this is what I was thinking, but unsure how that would be implemented. Any ideas or examples? Thanks!
Bump, any guidance would be appreciated.
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.
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!
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.
This is extremely helpful, especially for someone who is fairly new to JS. Thanks for the well thought out walk through!
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]);
};
};
};
});
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:
var target = $(e.target).attr("href");
target = target.replace('#','')
I would use:
let target = $(e.target).attr("href").substring(1);
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])
});
Hope it helps!