6 Replies Latest reply: Dec 7, 2017 3:55 AM by Richard Bartley RSS

    QS Mashup is clearing all selections when I change Tabs

    Daniel Wardzynski

      Dear QS Experts,

       

      I am working on a set of Mashups built upon QS Apps residing in QS Enterprise server version 11.11.2 June 2017 Patch 2.

      I have an inconsistent behaviour in my Mashups. Whenever I am selecting and moving between my tabs inside my Mashups the selections get cleared, and sometimes my fields stay selected.

      I have allocated the clearAll() function in two places:

       

      1) .js

      switch ( $element.data( 'qcmd' ) ) {
      //app level commands
      case 'clearAll':
      app.clearAll();
      break;

       

      2) .html

      <a class="qcmd1 col-sm-12" data-qcmd="clearAll">CLEAR ALL</a>

       

      I am also attaching the function that deals with the selections in my Mashup:

      function applySelections()

          {

              var sPageURL = window.location.search.substring(1);

              var sURLVariables = sPageURL.split('?');

              for (var i = 0; i < sURLVariables.length; i++)

              {

                  var sParameterName = sURLVariables[i].split('=');

                  var FieldName = decodeURI(sParameterName[0]);

                  var FieldValues = decodeURI(sParameterName[1]).split(',');

                  for(var j = 0; j < FieldValues.length; j++)

                  {

                      if (FieldValues[j].match(/^[0-9]+$/) != null) {

                          FieldValues[j] = parseInt(FieldValues[j], 10);

                      }

                  }

       

                  app.field(FieldName).selectValues(FieldValues, true, true);

              }

       

          }

        • Re: QS Mashup is clearing all selections when I change Tabs
          Richard Bartley

          Dear Daniel,

           

          How have you implemented the tabs?  Are the tabs on the same html page or on a different page? 

            • Re: QS Mashup is clearing all selections when I change Tabs
              Richard Bartley

              Please post your HTML page(s) containing the tabs.

                • Re: QS Mashup is clearing all selections when I change Tabs
                  Daniel Wardzynski

                  HI Richard,

                   

                  All the pages have different tabs using seperate .html files:

                   

                  Page 1:

                  --------------

                  <!doctype html>

                  <html><head>

                      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

                      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">7

                      <title>XXXXXXXXXXX</title>

                      <meta charset="utf-8">

                      <meta name="HandheldFriendly" content="True">

                      <meta name="MobileOptimized" content="320">

                      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

                      <meta name="apple-mobile-web-app-capable" content="yes">

                      <meta name="apple-mobile-web-app-status-bar-style" content="black">

                      <meta http-equiv="cleartype" content="on">

                      <!-- Bootstrap core CSS -->

                      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

                      <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">

                      <link rel="stylesheet" href="../Resources/main.css">

                      <link rel="stylesheet" href="XXX.css">

                      <!--<link rel="icon" href="../../../../content/Default/SPRicon.png">-->

                      <style></style>

                  </head>

                  <body role="document" style="overflow: auto">

                      <div class="wrapper">

                   

                   

                  <div id="header-placeholder">

                  </div>

                   

                  <section>

                  <!--

                  <div style="height: 7vh;">

                      </div>

                      <nav class="hamburger" role="navigation">

                            <div id="menuToggle">

                      <!--

                      A fake / hidden checkbox is used as click reciever,

                      so you can use the :checked selector on it.

                      -->

                  <!--           <input type="checkbox" />

                     

                      <!--

                      Some spans to act as a hamburger.

                      -->

                  <!--          <span class="hamburger"></span>

                          <span class="hamburger"></span>

                          <span class="hamburger"></span>

                     

                      <!--

                      Too bad the menu has to be inside of the button but hey, it's pure CSS magic.

                      -->

                  <!--        <div id="menu">

                              <div class="hamburgerheader" style="cursor: pointer;" data-qcmd="clearAll">Clear all</div>

                              <div class="hamburgerheader" style="cursor: pointer;" data-qcmd="back">Remove Last Selection</div>

                              <div  class="hamburgerheader">Filter:</div>

                              <div  class="filter" id="QVFDate" style="height:100px;"></div>

                                <div  class="filter" id="QVFFacility"></div>

                          </div>

                            </div>

                      </nav>

                  -->   

                  <div class="container kpi_list" id="main" role="main">

                      <div class="alert alert-danger alert-dismissible" role="alert" style="display:none">

                          <button type="button" class="close" id="closeerr" aria-label="Close"><span aria-hidden="true">×</span></button>

                          <span id="errmsg"></span>

                      </div>

                     

                     

                      <div class="brand-title">

                      XXXXXXXXXXXXXXX

                          <!--a href="#" alt="Home" target="_self" class="home_link"></a-->

                      </div>

                     

                     

                      <!-- PAGE NAVIGATION TABS -->

                      <ul style="margin-bottom: 0px; margin-top: 20px;" class="nav nav-tabs">

                          <li class="active"><a href="">Overview</a></li>

                          <li><a href="/extensions/XXXX1.html"> XXXX1 </a></li>

                          <li><a href="/extensions/XXXX2.html"> XXXX2 </a></li>

                          <li><a href="/extensions/XXXX3.html"> XXXX3 </a></li>

                          <li><a href="/extensions/XXXX4.html"> XXXX4 </a></li>

                      </ul>

                      <div class="" id="">

                          <div id="CurrentSelections" class="qvobjects" style="width:100%; padding-top:2px; margin-bottom: 10px;"></div>

                          </div>

                     

                      <!-- CONTENT / QLIK OBJECTS -->

                      <div class="col-sm-10">

                          <div class="col-sm-12 qvobject qvobject1" id="QV101">

                          </div>

                          <div class="col-sm-12 qvobject qvobject7" id="QV108">

                          </div>

                          <div class="col-sm-12 qvobject qvobject2" id="QV102">

                          </div>

                          <div class="col-sm-12 qvobject qvobject2" id="QV103">

                          </div>

                          <div class="col-sm-6 qvobject qvobject3" id="QV104">

                          </div>

                          <div class="col-sm-6 qvobject qvobject3" id="QV105">

                          </div>

                          <!--<div class="col-sm-12 qvobject qvobject4" id="QV106">

                          </div>-->

                          <div class="col-sm-12 qvobject qvobject6" id="QV107">

                          </div>

                      </div>

                     

                     

                      <!-- FILTER SECTION ON RIGHT SIDE OF PAGE -->

                      <div class="col-sm-2">   

                          <a class="qcmd1 col-sm-12" data-qcmd="clearAll">CLEAR ALL</a>

                          <a class="qcmd1 col-sm-12" data-qcmd="back">REMOVE LAST SELECTION</a>

                      <!-- <div class="col-sm-12 qvobject filter_object" style="margin-left"><div id="QV1000"></div> DW - The link -->       

                     

                          <p> </p>       

                          <h4>

                              Treating Team

                          </h4>

                          <div class="col-sm-12 qvobject filter_object" id="QV914">

                          </div>

                          <div class="col-sm-12 qvobject filter_object" id="QV913">

                          </div>

                          <div class="col-sm-12 qvobject filter_object" id="QV931"> 

                  .....

                   

                  </div>

                     

                   

                  </div></section>

                   

                  <!-- footer -->

                  <div id="footer-placeholder">

                  </div>

                  <!-- /.footer -->

                   

                  </div>

                   

                  <!--Error Popup-->

                  <div id="popup">

                      <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closePopup"><span aria-hidden="true">×</span></button>

                   

                      <p id="popupText">

                      </p>

                  </div>

                   

                  <script src="../Resources/handlebars.min.js"></script>

                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

                  <script src="../Resources/modernizr-custom.js"></script>

                  <script src="../../resources/assets/external/requirejs/require.js"></script>

                  <script src="../Resources/bootstrap.min.js"></script>

                  <script src="../Resources/sharedComponents.js"></script>

                  <script src="XXX.js"></script>

                  <script type="text/javascript">

                     $('html,body').animate({scrollTop:0},800);

                  </script>

                   

                   

                  </body></html>

                  --------------

                   

                  Page 2:

                  --------------

                  BASICALLY SAME

                  --------------    

                   

                  Page 3:

                  --------------

                  BASICALLY SAME

                  --------------

                  etc...

              • Re: QS Mashup is clearing all selections when I change Tabs
                Richard Bartley

                Hi Daniel,

                 

                Do all of your html files call qlik.openApp()?  If so, then the selections will not be kept as you navigate between the different HTML pages.  I was advised that it is better to have the tabs within the same html page and to hide/show the divs containing the tab code.

                  • Re: QS Mashup is clearing all selections when I change Tabs
                    Daniel Wardzynski

                    Hi Richard,

                    None of the HTML files call the qlik.openApp function.

                    Moving all tabs to 1 html is not an option, as we are using a bootstrap etc...

                    I find the mashup technology a bit to buggy, should have been more stable at this point.

                    No other options?

                      • Re: QS Mashup is clearing all selections when I change Tabs
                        Richard Bartley

                        Hi Daniel,

                         

                        You must be opening the app in one of the script files referenced in one of your html files otherwise how can you access your visualizations?  I am using bootstrap too and have combined the tabs into one html file.  Here's a link to a page that might help you out:

                         

                        https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

                         

                        Here's a snippet:

                         

                        <ul class="nav nav-tabs">

                          <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

                          <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

                          <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

                        </ul>

                         

                        <div class="tab-content">

                          <div id="home" class="tab-pane fade in active">

                            <h3>HOME</h3>

                            <p>Some content.</p>

                          </div>

                          <div id="menu1" class="tab-pane fade">

                            <h3>Menu 1</h3>

                            <p>Some content in menu 1.</p>

                          </div>

                          <div id="menu2" class="tab-pane fade">

                            <h3>Menu 2</h3>

                            <p>Some content in menu 2.</p>

                          </div>

                        </div>

                         

                        You can maintaining selections in this way and I have not found this approach to be buggy at all.  It's just a question of understanding how mashups work - create session, open app, reference objects, apply and change selections etc.

                         

                        I hope this helps