Solved: Re: Clear selections button in mashup - Qlik Community

SN · ‎2021-06-01

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/...

rwunderlich · ‎2021-06-01

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

rwunderlich · ‎2021-06-01

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 · ‎2021-06-02

Thanks a lot.. It worked.

coleturegroup · ‎2022-01-26

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>

<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">

<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>

</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="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>

</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="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>

</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="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">×</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>

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

</body>
</html>