Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

Not applicable

Expanded Qlik Sense graph in Mashup

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

1 Solution

Accepted Solutions
pnowicki
Contributor

Re: Expanded Qlik Sense graph in Mashup

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;

}

2 Replies
pnowicki
Contributor

Re: Expanded Qlik Sense graph in Mashup

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;

}

Not applicable

Re: Expanded Qlik Sense graph in Mashup

Thanks Paul. It works for me.

Community Browser