Qlik Community

New to Qlik Sense

If you’re new to Qlik Sense, start with this Discussion Board and get up-to-speed quickly.

Announcements
Qlik Insider: SaaS capabilities for Data Integration and Analytics, May 25th! Register Now
cancel
Showing results for 
Search instead for 
Did you mean: 
SN
Contributor II
Contributor II

Clear selections button in mashup

Hello, 

I want to make a clear selections button in a mashup page but I couldn't do it in javascript, can someone please help me?

I have tried both solutions but didn't work too...

https://community.qlik.com/t5/Integration-Extension-APIs/Function-in-Mashup-to-Clear-All-Selections/...

 

1 Solution

Accepted Solutions
rwunderlich

If using the Capabilities API, the button can be as simple as:

<button type="button" onclick="app.clearAll()">Clear Selections</button>

Can you show your code?

View solution in original post

3 Replies
rwunderlich

If using the Capabilities API, the button can be as simple as:

<button type="button" onclick="app.clearAll()">Clear Selections</button>

Can you show your code?

SN
Contributor II
Contributor II
Author

Thanks a lot.. It worked.

coleturegroup
Contributor II
Contributor II

I can't seem to get additional Apps added to the mashup to clear any selections in the second two apps. This template includes three sample sections of equal proportions.  Below the HTML is included, if you can see why the second two sections for (clear selections) are not working please correct them so i can correct my script. And do i need to make an adjustment in the JS file?

<!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">
<title>Qlik Sense Mashup</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">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<style>
/**
* set padding to make room for bootstrap menu
*
*/
body {
padding-bottom: 30px;
}

/*
* need to set the height for objects
* set top padding to make room for selection toolbar
*/
div.qvobject, div.qvplaceholder {
padding: 30px 10px 10px 10px;
height: 400px;
}

.qcmd {
cursor: pointer;
}

#popup {
background-color: #7f8c8d;
color: #FFFFFF;
position: fixed;
padding: 10px;
margin: 10px;
bottom: 0;
right: 0;
display: none;
border-radius: 5px;
}

/*
* Overrides Bootstrap navbar z-index to avoid conflict with selections bar
*/
.navbar-fixed-top {
position: relative;
z-index: 100;
}
.Heading
{
Margin: 10px;
background-color: #7f8c8d;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
font-family: vertical;
}

</style>
</head>
<body role="document" style="overflow: auto">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container1">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" data-toggle="tooltip" data-placement="right" id="title">Qlik Sense</span>

</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a class="qcmd" data-qcmd="clearAll">ClearAll</a>
</li>
<li>
<a class="qcmd" data-qcmd="back">Back</a>
</li>
<li>
<a class="qcmd" data-qcmd="forward">Forward</a>
</li>
<li class="dropdown qcmd">
<a class="dropdown-toggle" data-toggle="dropdown">Bookmarks <b class="caret"></b></a>
<ul id="qbmlist" class="dropdown-menu dropdown-menu-right"></ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>


<div class="container1" 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="row">
<table>
<tr>
<td style="color:red; font-size:18px; font-weight: bold; text-align:right;">
Proof of Concept: Ask Enterprise Questions Mashup
</td>
</tr>
</table>
</div>


<div class="row">
<div class="col-sm-2 qvplaceholder" id="QV01">
</div>
<div class="col-sm-2 qvplaceholder" id="QV02">
</div>
<div class="col-sm-4 qvplaceholder" id="QV03">
</div>
<div class="col-sm-4 qvplaceholder" id="QV04">
</div>
<div class="col-sm-12 qvplaceholder" id="QV05">
</div>
</div>
</div>

<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" data-toggle="tooltip" data-placement="right" id="title">Qlik Sense</span>

</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a class="qcmd" data-qcmd="clearAll">ClearAll</a>
</li>
<li>
<a class="qcmd" data-qcmd="back">Back</a>
</li>
<li>
<a class="qcmd" data-qcmd="forward">Forward</a>
</li>
<li class="dropdown qcmd">
<a class="dropdown-toggle" data-toggle="dropdown">Bookmarks <b class="caret"></b></a>
<ul id="qbmlist" class="dropdown-menu dropdown-menu-right"></ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

<div class="container2" 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="row">
<table>
<tr>
<td style="color:red; font-size:18px; font-weight: bold; text-align:right;">
Next App Consumed
</td>
</tr>
</table>
</div>


<div class="row">
<div class="col-sm-2 qvplaceholder" id="QV06">
</div>
<div class="col-sm-2 qvplaceholder" id="QV07">
</div>
<div class="col-sm-4 qvplaceholder" id="QV08">
</div>
<div class="col-sm-4 qvplaceholder" id="QV09">
</div>
<div class="col-sm-12 qvplaceholder" id="QV10">
</div>
</div>
<!-- add more rows here if you want more visualizations -->
</div>


<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container3">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" data-toggle="tooltip" data-placement="right" id="title">Qlik Sense</span>

</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a class="qcmd" data-qcmd="clearAll">ClearAll</a>
</li>
<li>
<a class="qcmd" data-qcmd="back">Back</a>
</li>
<li>
<a class="qcmd" data-qcmd="forward">Forward</a>
</li>
<li class="dropdown qcmd">
<a class="dropdown-toggle" data-toggle="dropdown">Bookmarks <b class="caret"></b></a>
<ul id="qbmlist" class="dropdown-menu dropdown-menu-right"></ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

<div class="container3" 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="row">
<table>
<tr>
<td style="color:red; font-size:18px; font-weight: bold; text-align:right;">
Next App Consumed
</td>
</tr>
</table>
</div>


<div class="row">
<div class="col-sm-2 qvplaceholder" id="QV11">
</div>
<div class="col-sm-2 qvplaceholder" id="QV12">
</div>
<div class="col-sm-4 qvplaceholder" id="QV13">
</div>
<div class="col-sm-4 qvplaceholder" id="QV14">
</div>
<div class="col-sm-12 qvplaceholder" id="QV15">
</div>
</div>
<!-- add more rows here if you want more visualizations -->
</div>

<!-- Bootstrap Modals -->
<div class="modal " id="createBmModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Create bookmark</h4>
</div:
<div class="modal-body">
<form>
<label for="bmtitle" class="control-label">Title:</label>
<input type="text" class="form-control" id="bmtitle">
<label for="bmdesc" class="control-label">Description:</label>
<input type="text" class="form-control" id="bmdesc">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" data-qcmd="createBm" class="qcmd btn btn-primary">Create</button>
</div>
</div>
</div>
</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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>