Expanded Qlik Sense graph in Mashup

[#1]

Hi,

I am working with mashups with Qlik Sense and I need to make available the functionality of expanding the graph as full screen and minimize it again. This functionality is available with Qlik Sense but not when you are importing the graphs into a mashup.

Could anyone support on this: how we can import the functionality into mashups? Is something that needs to be done "manually" with JS/JQuery?

Thanks,

Ramon

[pnowicki · Accepted solution]

Ramon,

You do indeed lose this functionality in a mashup.  However, you can do this with a mixture of HTML/JS/CSS, I have included relevant parts of my code and hope this helps you.

Here is my HTML:

<div class="panel panel-default">

       <div class="panel-heading">

            <button class="panel-fullscreen"><span class="glyphicon glyphicon-resize-full color=#404040"></span><span                class="glyphicon glyphicon-resize-small color=#404040"></span></button>

            <button class="panel-collapse"></button>

            <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>Trend</h3>

       </div>

            <div id="QV1-9" class="qvobject"></div>

  </div>

Here is part of my JS:

$('.panel-collapse').on('click', function() {

  $(this).closest('.panel').find('.panel-body').toggle();

  $(this).toggleClass('is-collapsed');

  });

  $('.panel-fullscreen').on('click', function() {

  var panel = $(this).closest('.panel');

  panel.toggleClass('is-fullscreen');

  $(this).toggleClass('is-fullscreen');

  qlik.resize(panel.find('.qvobject').attr('id'));

  });

Here is my CSS:

.panel-collapse {

  border: 1px solid #999;

    width: 20px;

    height: 20px;

    float: right;

  font-size: 20px;

    line-height: 18px;

}

.panel-collapse::before {

  content: '-';

}

.panel-collapse.is-collapsed::before {

  content: '+';

}

.panel-fullscreen {

  border: 1px solid #999;

    width: 20px;

    height: 20px;

    float: right;

  font-size: 20px;

    line-height: 18px;

  margin-left: 10px;

  font-size: 14px;

    line-height: 20px;

}

.panel-fullscreen:not(.is-fullscreen) .glyphicon-resize-small {

  display: none;

}

.panel-fullscreen.is-fullscreen  .glyphicon-resize-full {

  display: none;

}

.panel.is-fullscreen {

  position: fixed;

    top: 106px;

    background: #fff;

    z-index: 3;

    right: 0;

    left: 165px;

    bottom: 0;

}

[#3]

Thanks Paul. It works for me.