2 Replies Latest reply: Aug 19, 2016 12:48 PM by Ramon Ruiz RSS

    Expanded Qlik Sense graph in Mashup

    Ramon Ruiz

      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

        • Re: Expanded Qlik Sense graph in Mashup
          Paul Nowicki

          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;

          }