Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
mohitd910
Creator II
Creator II

How to Resize Objects in qliksense Mashups

//create the tabs and make qlik objects resize when a new tab is selected $("#tabs").tabs().bind('tabsselect', function(event, ui) { qlik.resize(); });

I just Created a mashup and i also know this function is used to resize the objects. But i donot Know where and how i can use this Function Please sugest me .
There is no tab option in  my Workbanch so what i have to use.


This is my js.


/*global require, alert*/

/*

*

* @owner Enter you name here (xxx)

*/

/*

*    Fill in host and port for Qlik engine

*/

var config = {

  host: window.location.hostname,

  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 ) {

  alert( error.message );

  } );

  //callbacks -- inserted here --

  //open apps -- inserted here --

  var app = qlik.openApp('be4b4597-d154-4ab9-bda2-f1bce68daec4', config);

  //get objects -- inserted here --

  app.getObject('QV09','yBTy');

   app.getObject('CurrentSelections','CurrentSelections');

  app.getObject('QV08','JZEj');

  app.getObject('QV07','AYtJU');

  app.getObject('QV06','mLeCrp');

  app.getObject('QV05','mGjwFq');

  app.getObject('QV04','PPDQm');

  app.getObject('QV03','jjePfp');

  app.getObject('QV02','MzJVgv');

  app.getObject('QV01','djmaKQ');

 

  $('#QV09').hide()

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

 

  $(document).ready(function(){

var d = new Date();

var CurrentYear = d.getFullYear();

    $("#CurrentYear").html(CurrentYear);

  });

   

  $('#QV02').on('click', function(event) { 

    $('#QV01').toggle();

    $('#QV03').toggle();

    $('#QV04').toggle();

    $('#QV05').toggle();

    $('#QV06').toggle();

    $('#QV07').toggle();

    $('#QV08').toggle();

    $('#QV09').toggle();

 

    if($('#QV09').is(':visible'))

    {

   app.getObject('QV09','yBTy');

      }

    app.getObject('QV08','JZEj');

  app.getObject('QV07','AYtJU');

  aapp.getObject('QV06','mLeCrp');

  app.getObject('QV05','mGjwFq');

  app.getObject('QV04','PPDQm');

  app.getObject('QV03','jjePfp');

  app.getObject('QV02','MzJVgv');

  app.getObject('QV01','djmaKQ');

  app.getObject('CurrentSelections','CurrentSelections');

});

} );

5 Replies
Francis_Kabinoff
Former Employee
Former Employee

So for hiding and displaying charts using jQuery .toggle(),  you would want to call the qlik.resize() method when the toggle is completed.

You could write a function like below and use this instead of the .toggle() method.

$.fn.extend({

  toggleResize: function() {

    return this.toggle(400, function() {

      qlik.resize();

    });

  }

});

example use based on your js

$('#QV02').on('click', function(event) {

     $('#QV01').toggleResize();

    $('#QV03').toggleResize();

     etc...

});


Basically,the idea is that you want to call the qlik.resize() method immediately after the chart becomes visible.

mohitd910
Creator II
Creator II
Author

thats k but i want to give also a option to user to look into a big screen also .How it is possible

fernandocalixto
Partner - Contributor II
Partner - Contributor II

Just inert that line on the .js mashup document:

Screenshot001.jpg

 

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

justdi
Contributor
Contributor

it doesn't work. Jquery not find qlik.resize reference

mk09123
Contributor II
Contributor II

Hello 

I have one question related to this qlik.resize()

Is there any way we can prevent the charts for not getting reset 

mean by reset if we have a bar chart and it's having a scrollbar so after the use of qlik.resize() the chart using the left side value first instead of the current value 

Thanks