Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Highlighted
wardzynski
Contributor

QS Mashup is clearing all selections when I change Tabs

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.split('=');

            var FieldName = decodeURI(sParameterName[0]);

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

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

            {

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

                    FieldValues = parseInt(FieldValues, 10);

                }

            }

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

        }

    }

6 Replies
rbartley
Valued Contributor

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

Dear Daniel,

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

rbartley
Valued Contributor

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

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

wardzynski
Contributor

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

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="https://community.qlik.com/extensions/XXXX1.html"> XXXX1 </a></li>

        <li><a href="https://community.qlik.com/extensions/XXXX2.html"> XXXX2 </a></li>

        <li><a href="https://community.qlik.com/extensions/XXXX3.html"> XXXX3 </a></li>

        <li><a href="https://community.qlik.com/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...

rbartley
Valued Contributor

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

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.

wardzynski
Contributor

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

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?

rbartley
Valued Contributor

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

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