Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
FieldValues
}
}
app.field(FieldName).selectValues(FieldValues, true, true);
}
}
Dear Daniel,
How have you implemented the tabs? Are the tabs on the same html page or on a different page?
Please post your HTML page(s) containing the 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...
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.
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?
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